注意:この機能は IE9では動作しません。
スマートフォンやタブレットなどでは、問題なく動作します。
キーフレームアニメーションとは、アニメーションのフレームごとに、要素の位置や状態を定義することで
複雑なアニメーションをシンプルに実現することできる機能です。とにかく、実際に見ていただいたほうが早いと
思いますので、早速サンプルを見て行きましょう
;------------keyframe の定義
[keyframe name="animation1"]
[frame p=20% x="100" ]
[frame p=40% x="-100" ]
[frame p=60% y=100 ]
[frame p=80% rotate="40deg" ]
[frame p=100% y="-100" rotate="0deg"]
[endkeyframe]
;---------アニメーションさせるキャラクターの定義
[chara_new name="miku" storage="miku1.png" jname="ミク"]
[chara_show name="miku" wait=true]
[chara_show name="ren" wait=true]
;---------アニメーションの実行 5秒かけてキーフレームアニメーションを実行する
[kanim layer=0 keyframe="animation1" time="5000" ]
[wa]
【解説】
[keyframe]と[endkeyframe]タグの中で、アニメーションの動きを定義します。
[frame]タグの中でパラメータp に指定したパーセンテージの位置で、物体がどのような状態にあるかを定義します。
最後に[kanim]タグで、アニメーションさせたい対象のnameと、キーフレームアニメーションの種類を指定してい
することで、アニメーションが開始されます。アニメーションにかける時間などもあわせて指定します。
キーフレームアニメーションの情報とアニメーション実行を分離して管理できますので
キーフレーム定義は、何度も使い回しすることができますね。
その他、このキーフレームアニメをつかえば、かなり凝った演出が可能になると思います。
詳細はタグリファレンスをご確認ください
タグリファレンスへ