Animation plays an important role when creating VR and games.
Unity has various animation features.
By using animation features available in Unity, you can create quality animations without programming.
In this article, I introduce the animation system that moves a primitive object from the basics.
Open the animation view
When creating an animation in Unity, you work on ‘Animation View’.
To display the animation view, select ‘Window > Animation’ first.
The animation view is currently displayed as a separate window.
It’s difficult to work on in this style, so combine it with another window.
Drag the tab labelled ‘Animation’ into an existing window.
I combined it with the Editor window.
Rotate a Cube
Firstly, let’s make a simple animation that only rotates a Cube.
Right-click on the Hierarchy window and select ‘3D Object > Cube’ to create a Cube.
Alternatively, you can create it from ‘Game Object’ in the menu bar.
Open the animation view with the Cube selected, and the ‘create’ button appears.
This is the button to record animation.
It brings up the window to enter the file name of the animation clip and where to save it, so set the file name to ‘Rotate’ and save it in the default location.
The animation-clip file you saved is stored in the ‘Asset’ folder in the project file.
You can use this animation clip in other projects, but you don’t need to remember it for now.
Now, let’s set the animation.
In the animation view, use the ‘Add Property’ button to add the items for animation settings.
Firstly, click ‘Add Property’.
Add the Rotate property
Create the item to rotate the Cube.
Press the ‘Add Property’ button and click the triangle on the left side of the ‘Transform’ icon to expand. Then, click the ‘+’ button on the right side of ‘Rotation’.
The ‘Rotation’ property has been added to the animation view.
As shown above, in the animation view, you can add the properties that you want to control by ‘Add Property’, and then change the parameters to animate the object.
Set the Rotation property
In the animation view, click on the triangle on the left side of ‘Rotation’ to expand, and the items, ‘Rotation.x’, ‘Rotation:y’ and ‘Rotation:z’, appear in there.
Those correspond to the parameters of ‘Transform’ in the Inspector window.
In the timeline on the right, 4 markers (◇) are shown in the tracks of ‘Cube: Rotation’ and its three items.
This is called ‘keyframe’ (also called ‘key’) where you can set the parameters for the animation at that point.
Let’s set the keyframes.
Click the ‘◇’ marker at 0:00 in the ‘Rotation.y’ track.
The value of ‘Rotation.y’ is zero. Leave it as it is.
Next, click the ‘Rotation.y’ keyframe at 1:00, and then click the value, which is set to 0 currently, to set it to 360.
Now the timeline corresponds to the animation ‘From 0:00 to 1:00, the Cube rotates from 0° to 360° around the Y-axis (=1 turn).
Let’s play the Scene.
You can see the Cube is rotating around the Y-axis.
Now you learnt how to make an animation by setting keyframes. Here I introduce a bit more about the graphical views of the animation window.
There are two buttons, ‘Dopesheet’ and ‘Curves’, at the bottom of the animation window.
‘Dopesheet’ has been selected by default, so we did set the keyframes on the Dopesheet view so far.
Let’s select ‘Curves’.
The yellow ‘◇’ marker is displayed next to ‘Rotation.y’ and the yellow curve appears in the graph.
This helps you to understand the change of the parameter intuitively.
In the Dopesheet view, you can easily check all the keyframes at once when setting multiple keyframes, but in the Curve view, it’s easy to grasp the change of each parameter.
Let’s create an animation while choosing those two views properly.
Set animation clips
In the Project view, there are two files, ‘Cube’ and ‘Rotate’.
‘Rotate’ is the file of the animation clip.
An animation clip records specific animated content.
‘Cube’ is the file of the animation controller.
An animation controller determines which animation to be generated and when to start it (ex. the conditions to start animation).
Select the ‘Rotate’ file to display the Inspector window of it.
The function of each item is as follows:
Check it when you want to loop the animation. Uncheck it to play the animation once.
Check it to loop the animation seamlessly.
This offsets the start point of the animation when playing the animation repeatedly. You can delay the start point of the animation loop by increasing this value.
In the Project view, double-click on ‘Cube’ to display the animation controller.
In this view, 3 parts are placed by default; They correspond to the settings for the animation.
It’s a bit complicated to set the animation controller, so just remember that you can edit the contents of the animation controller here, for now.
Add multiple animations
Based on what we have learnt so far, I created an animation that includes all the motions of translation, rotation and scaling.
Upload to STYLY
The following article explains more about how to upload an asset from Unity to STYLY, so refer to it when you upload the asset you created.
Now, you can see the animation working on Web Studio.
By using the animation system in Unity, you can create your favourite animations without programming.