実践テクニック

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

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

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

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

タグリファレンスへ