2010年11月アーカイブ

JavaScriptで遊ぼう！、第1回です。
マウス動かしてみてください。本文がうねうね動いてるでしょうか。
最終的には、ブックマークレット化して、サイトジャックでギャラクシ○ンやりたいなー、と思ってます。
技術的には、本文を一文字ずつばらして再構成し、JSで座標を制御させてます。
うーん、でもいまのやり方だとタグが一切無視される。改行なくなってるし。
適当に更新していきます。
※Safari、FireFox での作動を確認してます

フリーでウェブ制作、グラフィックデザイン、iPhoneアプリ開発などをしてます。
ブログ始めます。

このブログ、MT5 & HTML5 で作ってます。
Internet Explorer ではたぶん見れないです。
それ以外ではおおむね見れました。スマホもたぶんOKです。

まずは、先日行われた iPhone アプリ開発勉強会で行ったプレゼンの内容を、ちょっと手直しして掲載します。iPhone アプリ開発といいつつ、実は JavaScript と Canvas のお話しです。
モーション、HTML5関連、iOS関連などなどの話題をこつこつとやっていきたいと思ってます。

Core Animation でつまずいた点。

Canvas と Core Graphics は似てるよ、という話

Canvas も Core Graphics も Apple が作った仕様だからか、とても似ています。なので、片方を抑えていれば（もしかしたら）コンバート可能です。

横方向へのサイン運動をふるえの動きとして利用してみました。

先ほどのジャンプに、減速する処理を加えました。各ボールに、ぴょんぴょん跳ねるためのradianと、寿命のためのradianの2つを利用してます。

さて、これまで紹介した動きはいわゆる等速運動、一定の速度で動く動きです。 次からは、加速・減速の動きのバリエーションを紹介します。
例えば、ボールを放ったときの動きを表現するとします。放られたボールは最初は勢いよく、やがて動きをゆるめて地面に落ちます。
X軸（横移動）に絞って色々試してみます。

さきほどの回転の動きに、半径を増やす処理を加えると螺旋の動きになります。

さきほどの波の動きのY座標を絶対値（正の数）にすると、ぴょんぴょん飛び跳ねるような動きになります。

三角関数の sin、cos、tan の値をY座標にしてみました。

X座標を等速運動にすると波の動きになります。正弦曲線、サイン波とも言うようです。

さきほどの動きと同じなのですが、基本の円運動です。

このエントリーは、アニメーション・モーションを JavaScript で記述するための覚え書きです。いままで実務で使ってきたわざをちょっと整理してみます。
まずは、モーション設計をする上でよく使う三角関数について、おさらいとして触れます。もっともぼくは数学の素養は乏しいので、あやしいところもあるかもしれません。