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

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

Open the animation view

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.

The animation view is opened

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

I combined it with the Editor window.

Combine 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.

Create a Cube

Open the animation view with the Cube selected, and the ‘create’ button appears.

This is the button to record animation.

Click it.

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.

Save the animation-clip file

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.

Where to save the animation clip

Now, let’s set the animation.

The initial state of the animation view.

In the animation view, use the ‘Add Property’ button to add the items for animation settings.

Firstly, click ‘Add Property’.

Press ‘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’.

Add the ‘Rotation’ property

The ‘Rotation’ property has been added to the animation view.

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.

Expand the ‘Rotation’ property

In the timeline on the right, 4 markers (◇) are shown in the tracks of ‘Cube: Rotation’ and its three items.

Check the keyframes in the animation view

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 it as it is.

Set the keyframe at 0:00

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.

Set the keyframe at 1:00

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.

The rotation around the Y-axis

You can see the Cube is rotating around the Y-axis.

‘Curves’ view

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.

Select ‘Curves’

Let’s select ‘Curves’.

‘Curves’ view

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’.

Check the Project view

‘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 Inspector window of the animation clip

The function of each item is as follows:

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

‘Loop Pose’:
Check it 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 the Project view, double-click on ‘Cube’ to display the animation controller.

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.

The settings in the animation view

The cube is being scaled up while translating and rotating.

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.

Check the asset on ‘WebStudio’.

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.