こんにちは、営業の東です。

前回のcanvasネタだったんですが、今回もcanvasネタですｗ

Flashの代替が期待されているHTML5ですが、canvas要素を使うことでFlashのようにアニメーションを作ることができます。

とは言うものの、Flashの代わりに使うには、機能的に足りないし、実装も大変です。

もしかすると、簡単なものはFlashからHTML5 + JavaScriptに置き換わっていくかもしれませんね。

作るアニメーションの見本

canvas要素のアニメーションのサンプルは、世の中的なまだまだ少ないので、検索してもあまり良いものが見つかりません。

Processing.jsのサイトから作るアニメーションの見本を見つけるのがいいですね。

で、今回選んだ見本はこちら。
Processing.js - Basic - easing

マウスポインタの位置に向けて、ゆっくりと円が向かってくるアニメーションです。

見本を元に作ったアニメーション

今回の見本は、「目標地点に向かって、徐々に動かす」という動きの良いお手本になります。

目標の場所に向けて、徐々に近づけたり、目標の大きさに向けて、徐々にサイズを大きくしたり、小さくしたりといったような動きに応用が利く良い見本です。

見本は、processing.jsというライブラリを使っているので、ライブラリを使わないようにリライトして、少し応用的な動きを取り入れたのが、今回作った以下のアニメーションです。

マウスに4つの円がゆっくり近づいてきて、すべてが重なった時に、四隅にはじけます。

※この記事上では、パソコンのスペックによって遅すぎる方もいると思いますので、そういう方は以下をご覧ください。

canvasアニメーション

Internet Explorerは、最新バージョンでもcanvas要素をサポートしていないので、explorercanvasというJavaScriptライブラリ等が必須となります。（IEは処理がかなり遅いです）

アニメーションのプログラムは、今回のサンプルのように、基本を覚えると応用がしやすくなるので、ライブラリに頼らず、なるべく原理・原則を学ぶのが肝なのかもしれないと感じ始めています。

今回のサンプルプログラムは、HTMLに直接書いているので、興味のある方は、ソースをご覧ください。