前回の記事で解説しているお絵描きアプリケーション「My Animals Note!」のオープニングと、「保存データ」画面で線画が飛び回るアニメーションは、CSS3で作成しています。ここでは簡単なサンプルを使って仕組みを解説しますので、興味を持った方は、日経ソフトウエアのWebサイト(http://software.nikkeibp.co.jp/)からソースコードをダウンロードして、CSSの記述をチェックしてください。

図A●リストAの実行画面。正方形が回転しながら右下へ動く
[画像のクリックで拡大表示]

 リストAのHTMLドキュメントをWebブラウザ(SafariかGoogle Chrome)で開くと、赤い正方形が画面左上に現れて、右下に向かって回転しながら移動します(図A)。右下で静止した後、鉛直方向を軸として1回転した後、左上にすっと戻って行きます。これを2回繰り返します。

 コードの説明をしましょう。(1)のCSSは、canvas1というidを持つ要素((2)のcanvas要素)に対するアニメーションを設定しています。上の行から順に、動き方、アニメーションを行う時間、繰り返しの回数、イージング(動き始めと動き終わりの加速・減速の度合い)を指定します。

リストA●CSS3でアニメーションを行うサンプルコード
[画像のクリックで拡大表示]

 動き方を指定する属性「-webkit-animation-name」では「imove1」と指定していますね。これは、動き方を定義するキーフレームとしてimove1を利用することを表しています。キーフレームとは時間の経過に伴って、アニメーションの対象となる要素が、どのように変化するかを定義するものです。なお、属性名の冒頭にある「-webkit-」は、ベンダープリフィックス*Aです

 キーフレームimove1の具体的な内容を定義しているのが、@-webkit-keyframes imove1から始まる(3)のブロックです。0%、50%、…とあるのは経過時間です。アニメーションを行う時間のうち、どの時点でどこまで変化しているかを表します。例えば、0%では、translate(移動)が(0px, 0px)、rotateY(鉛直方向を軸とする回転)とrotate(回転)の値を0degにしています。次の50%では、translateが(600px, 400px)で、rotateが360degとなっています。

 これは、アニメーションを行う全体の時間の半分の時点で、Webブラウザ上の座標で(0px, 0px)から(600px, 400px)まで移動し、かつ360度回転していることを指定しています。その間の動きは、なめらかになるようにWebブラウザが自動的に補間します。

 (4)は、(3)のcanvas要素に赤い正方形を描画する関数です。内容は前回のリスト1と同じですので、説明を省略します。この関数は(5)のonloadイベントハンドラにより、ドキュメントがロードされたタイミングで実行されます。

この記事で紹介しているサンプルコードはこちらのページからダウンロードできます。
山崎 大助(やまざき だいすけ)
山崎 大助(やまざき だいすけ) GENOVA(http://www.genova.co.jp/)所属。デジタルハリウッドでPHP講座の講師を務めるほか、フリーソフト「AIR Note!」の開発、WEB業界誌での執筆や各PC関連誌などで紹介されるなど、多方面で活動中。最近はRIA開発に注力しており、HTML5/CSS3の潜在能力の高さに驚かされています。既にiPad/iPhoneではHTML5で構築したサイトが増加しています。皆さんもぜひチャレンジして下さい。
出典:日経ソフトウエア 2010年12月号 p.43
記事は執筆時の情報に基づいており、現在では異なる場合があります。