Animation Curves and Events

Using Animation Curves 

The Property List

In an Animation Clip, any animatable property can have an Animation Curve, which means that the Animation Clip controls that property. In the property list of the Animation View properties with Animation Curves have colored curve indicators. For information on how to add curves to an animation property.

A Game Object can have quite a few components and the property list in the Animation View can get very long. To show only the properties that have Animation Curves, click the lower left button in the Animation View to set its state to Show: Animated.

Set the toggle button in the lower left corner to Show: Animated to hide all the properties without Animation Curves from the property list.

Understanding Curves, Keys and Keyframes

An Animation Curve has multiple keys which are control points that the curve passes through. These are visualized in the Curve Editor as small diamond shapes on the curves. A frame in which one or more of the shown curves have a key is called a keyframe. The keyframes are shown as white diamonds in the Keyframe Line.

If a property has a key in the currently previewed frame, the curve indicator will have a diamond shape.

The Rotation.y property has a key at the currently previewed frame. The Keyframe Line marks the keyframes for all shown curves.

The Keyframe Line only shows keyframes for the curves that are shown. If a property is selected in the property list, only that property is shown, and the Keyframe Line will not mark the keys of the curves that are not shown.

When a property is selected, other properties are not shown and the keys of their curves are not shown in the Keyframe Line.

Adding and Moving Keyframes

The Keyframe Line shows the keyframes of the currently shown curves. You can add a keyframe by double-clicking the Keyframe Line or by using the Keyframe button.

A keyframe can be added at the currently previewed frame by clicking the Keyframe button or at any given frame by double-clicking the Keyframe Line at the frame where the keyframe should be. This will add a key to all the shown curves at once. It is also possible to add a keyframe by right-clicking the Keyframe Line and select Add Keyframe from the context menu. Once placed, keyframes can be dragged around with the mouse. It is also possible to select multiple keyframes to drag at once. Keyframes can be deleted by selecting them and pressing Delete, or by right-clicking on them and selecting Delete Keyframe from the context menu.

Wrap Mode

An Animation Clip in Unity can have various Wrap Modes that can for example set the Animation Clip to loop. See WrapMode in the Scripting Reference to learn more. The Wrap Mode of an Animation Clip can be set in the Animation View in the lower right selection box. The Curve Viewwill preview the selected Wrap Mode as white lines outside of the time range of the Animation Clip.

Setting the Wrap Mode of an Animation Clip will preview that Wrap Mode in the Curve View.

Supported Animatable Properties

The Animation View can be used to animate much more than just the position, rotation, and scale of a Game Object. The properties of anyComponent and Material can be animated - even the public variables of your own scripts components. Making animations with complex visual effects and behaviors is only a matter of adding Animation Curves for the relevant properties.

The following types of properties are supported in the animation system:

• Float
• Color
• Vector2
• Vector3
• Vector4
• Quaternion

Arrays are not supported and neither are structs or objects other than the ones listed above.

Booleans in script components are not supported by the animation system, but booleans in certain built-in components are. For those booleans, a value of 0 equals False while any other value equals True.

Here are a few examples of the many things the Animation View can be used for:

• Animate the Color and Intensity of a Light to make it blink, flicker, or pulsate.
• Animate the Pitch and Volume of a looping Audio Source to bring life to blowing wind, running engines, or flowing water while keeping the sizes of the sound assets to a minimum.
• Animate the Texture Offset of a Material to simulate moving belts or tracks, flowing water, or special effects.
• Animate the Emit state and Velocities of multiple Ellipsoid Particle Emitters to create spectacular fireworks or fountain displays.
• Animate variables of your own script components to make things behave differently over time.

When using Animation Curves to control game logic, please be aware of the way animations are played back and sampled in Unity.

Rotation Interpolation Types

In Unity rotations are internally represented as Quaternions. Quaternions consist of .x, .y, .z, and .w values that should generally not be modified manually except by people who know exactly what they’re doing. Instead, rotations are typically manipulated using Euler Angles which have .x, .y, and .z values representing the rotations around those three respective axes.

When interpolating between two rotations, the interpolation can either be performed on the Quaternion values or on the Euler Angles values. TheAnimation View lets you choose which form of interpolation to use when animating Transform rotations. However, the rotations are always shown in the form of Euler Angles values no matter which interpolation form is used.

Transform rotations can use Euler Angles interpolation or Quaternion interpolation.

Quaternion Interpolation

Quaternion interpolation always generates nice interpolations along the shortest path between two rotations. This avoids rotation interpolation artifacts such as Gimbal Lock. However, Quaternion interpolation cannot represent rotations larger than 180 degrees, because it is then shorter to go the other way around. If you use Quaternion interpolation and place two keys further apart than 180 degrees, the curve will look discontinuous, even though the actual rotation is still smooth - it simply goes the other way around, because it is shorter. If rotations larger than 180 degrees are desired, additional keys must be placed in between. When using Quaternion interpolation, changing the keys or tangents of one curve may also change the shapes of the other two curves, since all three curves are created from the internal Quaternion representation. When using Quaternion interpolation, keys are always linked, so that creating a key at a specific time for one of the three curves will also create a key at that time for the other two curves.

Placing two keys 270 degrees apart when using Quaternion interpolation will cause the interpolated value to go the other way around, which is only 90 degrees.

Euler Angles Interpolation

Euler Angles interpolation is what most people are used to working with. Euler Angles can represent arbitrary large rotations and the .x, .y, and .zcurves are independent from each other. Euler Angles interpolation can be subject to artifacts such as Gimbal Lock when rotating around multiple axes at the same time, but are intuitive to work with for simple rotations around one axis at a time. When Euler Angles interpolation is used, Unity internally bakes the curves into the Quaternion representation used internally. This is similar to what happens when importing animation into Unity from external programs. Note that this curve baking may add extra keys in the process and that tangents with the Constant tangent type may not be completely precise at a sub-frame level.

Editing Curves

Curves can be used for many different things and there are several different controls in Unity that use curves that can be edited.

• The Animation View uses curves to animate properties over time in an Animation Clip.

The Animation View.

• Script components can have member variables of type Animation Curve that can be used for all kinds of things. Clicking on those in the Inspector will open up the Curve Editor.

The Curve Editor.

• The Audio Source component uses curves to control rolloff and other properties as a function of distance to the Audio Source.

Distance function curves in the AudioSource component in the Inspector.

While these controls have subtle differences, the curves can be edited in the exact same way in all of them. This page explains how to navigate and edit curves in those controls.

Adding and Moving Keys on a Curve

A key can be added to a curve by double-clicking on the curve at the point where the key should be placed. It is also possible to add a key by right-clicking on a curve and select Add Key from the context menu.

Once placed, keys can be dragged around with the mouse:

• Click on a key to select it. Drag the selected key with the mouse.
• To snap the key to the grid while dragging it around, hold down Command on Mac / Control on Windows while dragging.

It is also possible to select multiple keys at once:

• To select multiple keys at once, hold down Shift while clicking the keys.
• To deselect a selected key, click on it again while holding down Shift.
• To select all keys within a rectangular area, click on an empty spot and drag to form the rectangle selection.
• The rectangle selection can also be added to existing selected keys by holding down Shift.

Keys can be deleted by selecting them and pressing Delete, or by right-clicking on them and selecting Delete Key from the context menu.

Navigating the Curve View

When working with the Animation View you can easily zoom in on details of the curves you want to work with or zoom out to get the full picture.

You can always press F to frame-select the shown curves or selected keys in their entirely.

Zooming

You can zoom the Curve View using the scroll-wheel of your mouse, the zoom functionality of your trackpad, or by holding Alt while right-dragging with your mouse.

You can zoom on only the horizontal or vertical axis:

• zoom while holding down Command on Mac / Control on Windows to zoom horizontally.
• zoom while holding down Shift to zoom vertically.

Furthermore, you can drag the end caps of the scrollbars to shrink or expand the area shown in the Curve View.

Panning

You can pan the Curve View by middle-dragging with your mouse or by holding Alt while left-dragging with your mouse.

Editing Tangents

A key has two tangents - one on the left for the ingoing slope and one on the right for the outgoing slope. The tangents control the shape of the curve between the keys. The Animation View have multiple tangent types that can be used to easily control the curve shape. The tangent types for a key can be chosen by right-clicking the key.

Right-click a key to select the tangent type for that key.

In order for animated values to change smoothly when passing a key, the left and right tangent must be co-linear. The following tangent types ensure smoothness:

• Auto: The tangents are automatically set so make the curve go smoothly through the key.

• Free Smooth: The tangents can be freely set by dragging the tangent handles. They are locked to be co-linear to ensure smoothness.

• Flat: The tangents are set to be horizontal. (This is a special case of Free Smooth.)

Sometimes smoothness is not desired. The left and right tangent can be set individually when the tangents are Broken. The left and right tangent can each be set to one of the following tangent types:

• Free: The tangent can be freely set by dragging the tangent handle.

• Linear: The tangent points towards the neighboring key. A linear curve segment can be made by setting the tangents at both ends to be Linear.

• Constant: The curve retains a constant value between two keys. The value of the left key determines the value of the curve segment.

Objects with Multiple Moving Parts

You may want to animate Game Objects that have multiple moving parts, such as a gun turret with a moving barrel, or a character with many body parts. All the parts can be animated by a single Animation component on the parent, although it is useful to have additional Animation components on the children in some cases.

Animating Child Game Objects

The Game Object hierarchy is shown in the panel to the left of the Animation View.

You can access the children of a Game Object by using the foldout triangle next to the object’s name. The properties of child objects can be animated just like those of the parent.

Child Game Objects can be folded out in the Animation View.

Alternatively you can select just the child Game Object you want to animate from the Hierarchy panel or the scene view. When you do this, only the child object is shown in the property list, although the animation data is still handled by the Animation component on the parent.

The child Game Objects selected in the Hierarchy View are shown in the Animation View.

Handling Multiple Animation Components

If both a parent object and one of its children both have an Animation component then either component can animate the child object. The property list can be used to select which one you want to use.

Select the Animation component you want to edit from the property list

As an example, you may have a multiple characters (a hero and sidekick, say) that each have their own Animation component. You could have another Game Object in the same scene whose Animation component is used for controlling cutscenes. The cutscene might involve both the hero and sidekick characters walking around, which could be achieved by animating their positions from the cutscene controller. However, both characters would need to be children of the cutscene object to be controlled by its Animation component.

Using Animation Events

The power of animation clips can be increased by using Animation Events, which allow you to call functions in the object’s script at specified points in the timeline.

The function called by an animation event can optionally take one parameter. The parameter can be a float, string, int, object reference or an AnimationEvent object. The AnimationEvent object has member variables that allow a float, string, integer and object reference to be passed into the function all at once, along with other information about the event that triggered the function call.

// This JavaScript function can be called by an Animation Event
function PrintFloat (theValue : float) {
    Debug.Log ("PrintFloat is called with a value of " + theValue);
}

You can add an animation event to a clip at the current playhead position by clicking the Event button or at any point in the animation by double-clicking the Event Line at the point where you want the event to be triggered. Once added, an event can be repositioned by dragging with the mouse. You can delete an event by selecting it and pressing Delete, or by right-clicking on it and selecting Delete Event from the contextual menu.

Animation Events are shown in the Event Line. Add a new Animation Event by double-clicking the Event Line or by using the Event button.

When you add an event, a dialog box will appear to prompt you for the name of the function and the value of the parameter you want to pass to it.

The Animation Event popup dialog lets you specify which function to call with which parameter value.

The events added to a clip are shown as markers in the event line. Holding the mouse over a marker will show a tooltip with the function name and parameter value.

Holding the mouse cursor over an Animation Event marker will show which function it calls as well as the parameter value.