実録！HTML5でモバイルWebアプリ開発 ― 第4回

CSS3 AnimationsとJSの連携でキャラクターを制御

2011年08月18日 13時00分更新

ハン☆スタ制作委員会／マインドフリー株式会社

ツイートする

　HTML5 CanvasやWebSocketなどの最新技術を駆使して作ったiPhone 4用ブラウザーゲーム「Handy Stadium」の裏側を解説する本連載も、今回で最終回（連載バックナンバー）。今回は、CSSアニメーションを中心としたフロントエンドの実装について解説します。


最新技術を使って作ったiPhone 4専用レトロゲーム「Handy Stadium」（画像をクリックするとゲームサイトへ移動します）

Handy Stadium: http://bb.mindfree.co.jp/

オリジナルのJavaScriptライブラリー「mm.js」

　Handy Stadiumのフロントエンドの実装における大きなポイントは、jQueryではなく独自のライブラリーを使っていること、Canvas以外のアニメーションはJavaScriptではなくCSSで実現していることです。

　フロントエンドの処理は、最近ではjQueryを使うことが多いですが、Handy Stadiumの場合はDOMを操作する処理がそれほど多くなく、対象端末をiPhone、ブラウザーをMobile Safari/Google Chrome（ともにWebKitベース）に絞っているので、jQueryを使わずに独自のライブラリーを作りました。

・mm.js: https://github.com/5509/mm.js/blob/master/source/mm.js

　「mm.js」は、Handy Stadiumで必要なDOM操作関連のメソッド群をまとめた簡易ライブラリーで、jQueryライクで使えるようになっています。

CSSでアニメーションを実装

　Handy Stadiumではボールやキャラクターの移動、バットの動きなど、さまざまなアニメーションが使われていますが、すべてのアニメーションをCanvasに任せるとJavaScriptの処理が複雑になります。そこで、ヒットを打った後、ランナーが各塁間を移動する走塁アニメーションにはCSS3 Animationsを利用しました。

　Mobile SafariのJavaScript処理能力やiPhoneの端末のスペックはPCに比べると低いので、DOMを操作してアニメーションさせるには負担が重く、PCサイトではスムーズに動いてもモバイル端末では動作が非常に遅くなることもあります。モバイル端末ではCSS3のTransitionsやAnimationsが使えるので、アニメーション処理はCSSで、他の処理をJavaScriptで、といった形で分担するほうがよいでしょう。

　ランナーの走塁アニメーションはキーフレームで動かすので、CSS Transitionsではなく、CSS Animationsを利用しています。CSS Animationsは、keyframes [keyframes名]{...}で振る舞いを定義します。from{...}に開始時の状態を、to{...}に終了時の状態をCSSのプロパティで指定します。その後、animation-nameで使用するkeyframes名を指定し、アニメーションを実行します。

　keyframesとanimationプロパティを使うための基本的なコードと、プロパティの一覧を以下にまとめます。以下のサンプルでは、幅100pxのボックスが0.6秒かけて幅300pxに拡大するアニメーションを1回実行する、という意味になります。


@-webkit-keyframes hoge {
    form {
        width: 100px;
    }
    to {
        width: 300px;
    }
}
div {
    width: 100px;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count: 1;
}
div.animate {
    width: 300px;
    -webkit-animation-name: hoge;
}

animationプロパティの一覧

プロパティ名	解説
animation-name	実行するkeyframesの名前を指定
animation-duration	アニメーションにかける時間を指定
animation-timing-function	どのようにアニメーションさせるかを指定
animation-iteration-count	アニメーションの再生回数を指定（リピートはinfinite）
animation-direction	alternateを指定すると、再生・逆再生の順番に実行
animation-play-state	pausedを指定するとアニメーションを一時的に中断
animation-delay	開始までの時間を指定
animation	上記プロパティをショートハンドで指定できます