This tutorial shows you how to create your own base animation. For the sake of this tutorial , we will recreate the Flip and Jump animation that can be found in the animation presets folder
- Create a new prefab game object and attach a SimpleAnimation component to it:
2. The Simple animation component has 3 Time lines: Translation , Scale and rotation. Each has it’s own animation curve and setup:
Translation
First we will do the translation time line. For the flip animation the translation starts at (0,0,0) and peaks at (0,-0.5,0) and then goes back to (0,0,0). The timeline is between 0 and 1. when it’s value is 1 it will be the original glyph position , when it’s value is 0 it will be on the “Translation” property. Lets set up the translation so the glyph jumps:
As you can see on the time line. It starts with 1 then declines to 0 and then goes back to 1. This means
the translation starts at (0,0,0) and peaks at (0,-0.5,0) and then goes back to (0,0,0).
Scale
The scale works in a similar way to the translation. when the timeline is 1 the original scale is applied to the glyph, when the timeline is 0 the specified scale is applied.
Setting the scale to (0,0,0) means the glyph starts out invisible , and then grows to (1,1,1). In this example we are setting an easing curve with an anticipation effect:
As you can see , this timeline goes beyond “1”. This will scale the text more then it’s original scale. this concept can be used with translation and rotation as well
Rotation
The rotation works in a similar way to scale and translation. You can set each component with a degree value:
Here we are setting a 270 degree rotation on the x axis as the 0 value of the timeline. We can then set the timeline itself :
Anchor
Sometime we would like the scale and rotation to operate on anchor instead of the center of the glyph:
The anchor determines the center of scale and rotation. For the sake of this animation it is set to (0.5,0.5,0.5) , which is the center of the glyph. You can set it to (0.5,0,0.5) which is the bottom center of the glyph , or to (0,0.5,0.5) which is the left center of the glyph. each component blends along an axis of the glyph.
Move glyph Multiplier
some custom animation move other glyphs, You can set this multiplier to determine how fast other glyphs move. Setting it to 0 means the glyphs move immediately. For most cases you would like to set it 1 , which means the glyph move when the animation is done.