The Animation Playback Controller

A 3D model of a monkey is shown in the Viewport and Simulator. When a tap on the Simulator is detected, the monkey starts to dance.

Use the animation playback controller to easily play, stop and trim baked animations in 3D objects.

You can also add interactivity with the animation playback controller. For example, playing the animation in response to a tap anywhere on the device screen with the Screen Tap patch, or on a specific object in the effect with the Object Tap patch. The fastest way to do this is from the Inspector. You can also create a controller from the Assets panel and assign it to an animation later.

Creating an animation playback controller from the Inspector

To create a new animation playback controller:

  1. In the Scene panel, select the asset with baked animations.
  2. In the Inspector, to the right of Animation, select Create New Animation Controller.

The asset’s first animation will be auto-assigned to the animation playback controller, and it will start playing immediately.

Animation playback controller created and 3D model of a monkey visible in Inspector starts to sway

“Kako” by manoeldarochadeoliveira is licensed under CC BY 2.0.

To choose a different animation clip from the list:

  1. In the Assets panel, select the animationPlaybackController.
  2. Go to the Inspector, to the right of the Animation Clip, select a different animation from the dropdown.

A different animation selected in the Inspector and the 3D model of a monkey stops swaying and bends over

“Kako” by manoeldarochadeoliveira is licensed under CC BY 2.0.

Creating an animation playback controller from the Assets panel

To create a new animation playback controller:

  1. At the bottom of the Assets panel, click Add Asset.
  2. Select Playback ControllerAnimation Playback Controller.

The animation playback controller will be listed in the Assets panel.

An animation playback controller is shown in the Assets panel

“Kako” by manoeldarochadeoliveira is licensed under CC BY 2.0.

Next assign the animation playback controller to the object in the scene you want to animate:

  1. In the Scene panel, select the object.
  2. Go to the Inspector.
  3. To the right of Animation, from the dropdown list select the animation playback controller.
The animation playback controller being selected in the 3D model's Inspector menu.

Adding the animation to the playback controller

The animation needs to be connected to the animation playback controller.

The animations your object contains will be listed in the Assets panel.Expand the asset to see them: :

Animations highlighted in the Assets panel.

To connect an animation to an animation playback controller:

  1. In the Assets panel, select the animation playback controller.
  2. In the Inspector, click the dropdown next to Animation.
  3. Select the animation you want to control.

Starting, Stopping and trimming the animation

In the Assets panel, if you select the animation playback controller, in the Inspector you'll see Properties labeled Play, Loop, Reset and Trim

The animation controller's properties, shown in the Asset panel.

When the box to the right of Loop is selected the animation will play on a loop as soon as the effect is opened.

Clicking the arrows to the left of Play and Reset will create patches to represent these properties. You can connect these to other patches to configure when the animation plays and resets — for example in response to an interaction from the person using your effect.

Under Trim, drag the blue handles to set new start and end points for your animation. You can also use the trim feature to make multiple clips from the same animation .

Adding interaction with the Screen Tap and Object Tap patches

Adding interactivity to your animated effect is simple. In this example we'll make the animation play in response to interaction

Start by creating a patch for the Play property of the animation playback controller:

  1. In the Assets panel, select the animation playback controller and go to the Inspector.
  2. Click the arrow to the left of Play. This will create a patch and open the Patch Editor.

Now create the interaction patch. There are lots to choose from. To drive the animation, you'll need an interaction patch that creates a boolean signal (a signal that's either on, or off). For example, the Mouth Open, Screen Tap or Object Tap patches. To create an interaction patch:

  1. In the Patch Editor, right click
  2. Select an interaction patch from the menu.

Connect the output of the interaction patch to the Play input port in the animation playback controller patch. A Switch patch will be created automatically. Joining these 3 patches together creates a switch that will turn the animation on or off in response to an interaction.

Here's how your graph will look:

A patch graph with three patches.

If you're using the Object Tap patch, you'll need to attach a patch representing the object in the scene to the Object input port in the Object Tap patch. Create a patch representing the object by selecting the object in the scene panel and dragging it into the Patch Editor.

Here's how your graph will look:

A patch graph with four patches.

In the Simulator, select Simulate Touch to test the effect. The animation should play when you click the screen:

A 3D model of a monkey is shown in the Viewport and Simulator. When a tap on the Simulator is detected, the monkey starts to dance.

If you connect a patch representing the Reset property instead of the Play property the animation will reset instead.

Animation playback controller - properties

Animation Clip

Choose an animation to control with the playback controller.

Type

This will always say animation, because this playback controller controls animations.

Duration

The duration of the animation.

Original FPS

The animation's frame per second.

Play

Create a patch to control when the animation starts to play.

Loop

Check this box to continuously loop the animation when the effect is opened.

Reset

Create a patch to reset the animation.

Speed

Use this slider to adjust the speed of the animation.

Trim

Drag the blue handles to set new start and end points for your animation.

Used By

The 3D object that contains the animation.

Interactions

Create a patch to represent the animation playback controller.

Was this article helpful?