Skip to main content

Animation Sequence Editor

To edit an

Animation Sequence
, use the Animation Sequence Editor extension in the Editor.

What is an Animation Sequence?​

The

Animation Sequence
asset allows you to create entity-based animations directly in the Editor. More specifically, you can animate the component data of entities.

An

Animation Sequence
can be used to make a cinematic cut scene, or a simple animation that livens up your application.

Simple examples of animations that can be done with animation sequence:

  • Animating the albedo of a material component
  • Animating the position of a local transform component

Tracks​

Animation sequences are composed of tracks. A track is made of up keys which have an associated value and time. There are three different kinds of tracks: animation, trigger and event.

Each track is associated to an entity.

You associate entities to tracks via the

Animation Sequence Controller
component.

Animation Track​

Animation tracks are used to animate an entity’s component attribute. An animation track will interpolate between keys. At a time t of the animation sequence playing, the two keys between which t fall will be the keys that are interpolated.

In the example below, at time 600ms, the animation sequence will set the entity’s position to the result of the interpolation between the values of keys A and B.

Animation track in the Animation Sequence Editor
Animation track in the Animation Sequence Editor

Trigger Track​

Trigger tracks are also used to animate an entity’s component attribute. Unlike animation tracks, a trigger track will not interpolate between keys, but will simply set the key value at the key time.

In the example below, at time 1000ms, the animation sequence will set the entity’s position to the value specified by key B.

Trigger track in the Animation Sequence Editor
Trigger track in the Animation Sequence Editor

Event Track​

Event tracks are used to emit events of an

Event Map
asset. Its keys correspond to specific events in the
Event Map
specified upon creating the track. While the animation sequence plays, these specified events will be emitted at their specified times.

These events are listenable in scripts and in client-side Livelink.js code, allowing your application to react to key points in a sequence.

Event tracks are also associated to an entity, which will be the one emitting the specified events.

In the example below, at time 1000ms, the entity “cube” will emit the event specified in key B.

Event track in the Animation Sequence Editor
Event track in the Animation Sequence Editor

Animation Sequence Controller​

To add an animation sequence instance to your scene, add an entity with an

Animation Sequence Controller
component and link your animation sequence to it. You will then be able to assign entities to each of its tracks.

You can also modify the loop, playback speed, start offset and stop offset of an animation sequence via the

Animation Sequence Controller
.

Animation Sequence Controller

animation_sequence_controller

Animation sequence controller with reference to an animation sequence and assigned entities.

Schema

entities

Map<UUID, Entity Reference>

Track to entity map. Key is track uuid, value is the entity to assign to it.

loop

Boolean

Default:false

Loop playback when reaching the stop offset.

playbackSpeed

Float

Default:1

Playback speed multiplier. Negative values play in reverse.

startOffset

Float

Default:0

Min:0

Max:1

Normalized start offset [0, 1].

stopOffset

Float

Default:1

Min:0

Max:1

Normalized stop offset [0, 1]. When looping, playback wraps to startOffset at this point.


Animation Sequence Editor​

As you’re working, the progress you make will be automatically saved in the animation sequence editor. You can close the session and open a new one and nothing will be lost.

However, when you’re ready to compile your animation sequence and see your changes reflected in the playback, make sure to press Publish.

A general overview of the Animation Sequence Editor
A general overview of the Animation Sequence Editor

Create a Track​

Drag and drop an entity from the scene graph to “drop an entity to create a new track” . You can animate all entities (including external entities). This will create a new track in the animation sequence and automatically assign the entity to that track in the

Animation Sequence Controller
of the currently selected animation entity.

You will be given the option to decide what component attribute (like transform.position.y or material.albedo.xyz) you want to animate in that track.

There are three different kinds of tracks you can create.

Delete a Track​

Create a Key​

Double click on the track to create a new key at that time. You can always modify the time more precisely afterwards (check “modify a key”).

You can only create keys in the scope of your animation sequence’s duration. In the example above, you can only create keys from 0 to 5000ms. To create keys past 5000ms change the duration first.
You can only create keys in the scope of your animation sequence’s duration. In the example above, you can only create keys from 0 to 5000ms. To create keys past 5000ms change the duration first.

Modify a Key​

Click on a key to modify it. You can modify the key’s time, value and the easing function which will impact the way time passes from that key to the next. Examples of the easing functions available.

Delete a Key​

Modify Duration​

Modify Time Range​

Press Ctrl and scroll over the sequencer time range to increase/decrease the time range.

Disabled Tracks​

Play, Pause, Stop​

You can play, pause and stop animation sequences. Stopping an animation sequence will restore the values of the first keys of each track.

Editor​

To control the playback of an animation sequence use the play, pause and stop buttons in the Animation Sequence Editor.

Scripts / Application Code​

To play, pause and stop an animation sequence, you need to modify the component attribute playState of the

Animation Sequence Controller
. This attribute is hidden in the Editor but can be modified in a script or with Livelink.js. playState is an int enum whose values can be:

0 - (stop)

1- (play)

2 - (pause).