loading ...

HTML5のcanvas要素を使ってアニメーションを作る

2009.10.09(Fri)

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

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

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に直接書いているので、興味のある方は、ソースをご覧ください。

トラックバック

この記事のトラックバックURL

Clip to Evernote
福井:0776-52-2134 東京:03-6432-9221
コンサルティング・サイト制作に関するお問合せはこちらまで

最新Web制作実績

  • 出来る大人のビジネスアイテム - Gold Men -
  • 下着工房「自由空間」肌・楽・下着
  • メッキのことならめっきのソムリエ/ニムラ
  • 残留農薬検査・食品検査分析 | 食品検査センター

制作実績をもっと見る

Syndicate this site (XML)
RSS2.0
SBコンサルQ&A
Webコンサルティングに関する広範な情報を毎月配信します。

PageTop