Advanced Techniques

Note: This feature does not work on IE9.
It works fine on smartphones and tablets.

Keyframe animation allows you to define the position and state of elements for each frame of an animation. This enables you to create complex animations in a simple way. It’s easier to understand by seeing it in action, so let’s check out a sample right away.

;------------Define the 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]



;---------Define the character to animate

[chara_new name="miku" storage="miku1.png" jname="Miku"]

[chara_show name="miku" wait=true]

[chara_show name="ren" wait=true]



;---------Execute animation over 5 seconds

[kanim layer=0 keyframe="animation1" time="5000" ]

[wa]

Explanation:

Define the animation movement between the [keyframe] and [endkeyframe] tags.
Inside each [frame] tag, use the p parameter to define the percentage of progress at which a certain transformation should occur.

Finally, use the [kanim] tag to specify the name of the target and the keyframe animation to be applied. Also specify the duration of the animation.

Since keyframe definitions are separate from the animation execution, they can be reused multiple times.

Using this keyframe animation feature allows you to create more advanced and elaborate animations.

For more details, please refer to the tag reference.

Go to tag reference