[Introduction to Unity] Learn Animation System

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 in ‘Animation View’.

To display the animation view, select ‘Window > Animation’.

The animation view is currently displayed as a separate window.

It’s difficult to work in this way, so try combining these windows.

Drag the tab labelled ‘Animation’ into an existing window.

I have combined it with the Editor window.

Rotate a Cube

First, let’s make a simple animation that 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. The ‘create’ button will appear.

This is the button to record animation.

Click it.

This brings up a window to enter the file name for the animation clip and where you can save it, so enter the file name ‘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.

First, 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 through ‘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.

These correspond to the parameters of ‘Transform’ in the Inspector window.

In the timeline on the right, there are 4 markers (◇) 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.

Set Keyframes

Let’s set the keyframes.

Click the ‘◇’ marker at 0:00 in the ‘Rotation.y’ track.

The value of ‘Rotation.y’ is zero. Leave this as it is.

Next, click the ‘Rotation.y’ keyframe at 1:00, and then click the value, which is set to 0 currently, 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.

‘Curves’ View

Now you learned how to make an animation by setting keyframes. I want to introduce 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, we have so far set the keyframes on the Dopesheet view.

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 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 for it.

The function of each item is as follows:

‘Loop Time’:
Check this when you want to loop the animation. Uncheck this if you want to play the animation once.

‘Loop Pose’:
Check this to loop the animation seamlessly.

‘Cycle Offset’:
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.

Animation Controller

In 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 learned 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, please refer to this article when you want to upload the asset you created.

Now, you can see the animation working in STYLY Web Studio.

By using the animation system in Unity, you can create your favorite animations without programming skill.