実践テクニック

注意：この機能は IE９では動作しません。
スマートフォンやタブレットなどでは、問題なく動作します。

キーフレームアニメーションとは、アニメーションのフレームごとに、要素の位置や状態を定義することで 複雑なアニメーションをシンプルに実現することできる機能です。とにかく、実際に見ていただいたほうが早いと 思いますので、早速サンプルを見て行きましょう

;------------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と、キーフレームアニメーションの種類を指定してい することで、アニメーションが開始されます。アニメーションにかける時間などもあわせて指定します。

キーフレームアニメーションの情報とアニメーション実行を分離して管理できますので キーフレーム定義は、何度も使い回しすることができますね。

その他、このキーフレームアニメをつかえば、かなり凝った演出が可能になると思います。

詳細はタグリファレンスをご確認ください

タグリファレンスへ