[HTML5 canvas] アニメーション処理の制御を試してみた

オブジェクトのアニメーション制御にちょっと挑戦。

Flash では「Tweener」とかモーション系のライブラリがあるので、オブジェクトのアニメーション制御が非常に楽なんだけども、javascript の場合、そういう情報に疎かったりする…汗

とりあえず、以前に自分で作ってたことのある Flash ライブラリの処理を参考にして、アニメーションの制御をしてみた。

⇒サンプルを見る（別ウインドウ）

上記サンプルでは、円が5つ縦に並んでおり、キャンバス上でクリックすると、そのクリックしたX座標に向かって円が動くという内容。それぞれの円で動く速さが異なり、上から「等速」「加速」「減速」「加速-減速」「減速-加速」というパターンとなっている。

またラジオボタンでアニメーションを行う時間を変更できるようにしている。

ただ、あまり複雑なアニメーションで制御できるわけではないので、コンテンツ内容によって処理をカスタマイズするのが手っ取り早い感じかな。

もう少し汎用性が高められると便利なんだろうけどもね…。自分であれこれ改良するにも限度がありそうな予感…。

なんで、もっと良い処理の仕方や、モーション管理系のライブラリがあると良いんだけどもねー。

いやー、思い切り、他力本願（;´д｀）ﾉ

この記事をブックマークしておく