JavaScriptで遊ぼう!、第1回です。
マウス動かしてみてください。本文がうねうね動いてるでしょうか。
最終的には、ブックマークレット化して、サイトジャックでギャラクシ○ンやりたいなー、と思ってます。
技術的には、本文を一文字ずつばらして再構成し、JSで座標を制御させてます。
うーん、でもいまのやり方だとタグが一切無視される。改行なくなってるし。
適当に更新していきます。
※Safari、FireFox での作動を確認してます
2010年11月アーカイブ
フリーでウェブ制作、グラフィックデザイン、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 で記述するための覚え書きです。いままで実務で使ってきたわざをちょっと整理してみます。
まずは、モーション設計をする上でよく使う三角関数について、おさらいとして触れます。もっともぼくは数学の素養は乏しいので、あやしいところもあるかもしれません。