CSS animationでRPG風戦闘シーン
by kazu69
cssのアニメーションにfirefox5から対応したということで、復習してみた。
cssアニメーションプロパティ
アニメーションのキーフレームを示す名前
animation-name : name;
1 回のアニメーションの長さ(秒,ミリ秒)
animation-duration :.10s;
アニメーションの進め方を設定します。これは加速曲線を定義。アニメーションのイージング機能を定義する感じ(ease,linear,ease-in,ease-out,ease-in-out)
animation-timing-function: ease-in-out;
要素が読み込まれてからアニメーション開始までの遅延時間(秒,ミリ秒)
animation-delay : 10s;
アニメーション完了後に、逆方向のアニメーションを行い、交互にくり返すかの設定
animation-direction: normal;
アニメーション完了後に、実行前や実行後、その両方のスタイルを適用するかを設定
animation-fill-mode: forwards;
アニメーションを一時停止したり、再開したりすることができる。アニメーションの状態を判定できるプロパティ
animation-play-state: running;
アニメーションの繰り返し回数を設定(無限に繰り返す場合はinfinite )
animation-iteration-count: 1;*/
実際には各プロパティにはvendor prefixが必要。
アニメーションは状態毎にイベントを発火するので、
//アニメーション開始イベント
e.addEventListener("animationstart", listener, false);
//アニメーション終了イベント
e.addEventListener("animationend", listener, false);
//アニメーションが1周するごとに発生
e.addEventListener("animationiteration", listener, false);
のように取得可能。
こちらもvendor prefixが必要でwebkitAnimationEnd,mozAnimationStartなどとしないといけない。
で、簡単に作ったのが以下。ゲーム風の表現も全然可能ですね。
css animationをサポートしてないブラウザだと動かないです。実用にはここでjQeuryなどでアニメーションさせたりするといいかな。
css animationのほうがjvascriptでの表現より軽く、負荷も少ない。
cssを書くのが大変なので、scssやless使ってやると楽になりそう。