There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.

Tutorial: Animating 3D Objects

In this tutorial you'll learn how to animate a 3D object, without using scripting.

Something Went Wrong
We're having trouble playing this video.


First you'll learn how to play an animation that's included in a 3D object's file - this is known as a baked keyframe animation.

Then we’ll show you how to use the Patch Editor to animate an object's skeleton. This is known as procedural animation, and you can use this technique to animate all kinds of objects in Spark AR Studio.

You can download the sample content content to follow along. It includes the objects and assets you'll need to build the effect.

Setting Up

If you open the unfinished effect in the sample content folder, you'll see a 3D object in the Viewport that looks like a teddy springing out of a box:



This 3D object is a child of a plane-tracker, which means it will appear when someone points the back camera at a real-life surface, like the a table or the floor.

In the Assets panel, this object is listed under 3D Objects, as teddy.

Creating an animation playback controller

Using an asset included in Spark AR Studio called an animation playback controller is an easy way to play a baked animation.

The animation playback controller allows you to control when an animation plays, pauses and stops. You can also use it to edit the speed of the animation.

To create an animation playback controller:

  1. Click Add Asset at the bottom of the Assets panel.
  2. Select Animation Playback Controller:


You'll see the animation playback controller listed in the Assets panel as animationPlaybackController0.

Next you'll need to connect the animation itself to the animation playback controller. You can see the animation listed in the Assets panel under 3D Animations - it's called Dance.



Select the animation playback controller in the Assets panel. You'll see its properties have opened in the Inspector.

Click the dropdown next to Animation Clip, and select Dance:



If an object had more than one animation included in the file, they'd all be listed here under Animation Clip. Learn more about playing more than one animation in an effect.

Finally, to show the animation in the scene, we need to go back to the 3D object:

  1. Select teddy in the Scene panel.
  2. In the Inspector, click the dropdown next to Animation.
  3. Select AnimationPlaybackController0.

Editing the animation playback controller

If you make sure the animation playback controller is selected in Assets panel, you can play with its speed.

Over in the Inspector, use the slider to edit the speed:



There are a couple of other options here too. You can:

  • Use the checkbox next to Play on Start to control whether or not the animation plays as soon as the effect is opened.
  • Uncheck the box next to Loop, to make the animation play once, and then stop.

Find out more about using these options to trigger animation in response to an interaction with your effect.

Using patches to animate an object

Before you start the next part this tutorial, delete the animation playback controller:

  1. Select it in the Assets panel.
  2. Press delete on your keyboard.


Instead of animating the teddy by playing the baked animation, you're going to use patches to set the exact movement of the objects that make up the teddy.

You'll do this by using the Loop Animation and Transition patches to control the movement of these objects through their position and rotation properties.

For this effect you're going to animate joint objects, but you could use the same technique to animate all kinds of objects in your scene.

If you expand the teddy object in the Scene panel, you'll see two objects nested underneath it. Model_group contains a series of mesh that define the shape of the object.

The second object, skel_root, contains the joints. You're going to animate four joints - to make the teddy wave and bounce up and down.

To find the joints you'll need, expand the skeleton in the Scene panel. The joints you'll need to make the teddy wave are called arm_r and wrist_r:



Select them both at the same time by holding down command on your keyboard.

Next create patches to represent their Rotation property. We're using the rotation property so we can rotate the joints slightly, which will make the teddy appear to wave.

To create these patches, click the arrow next to Rotation in the Inspector:

The Loop Animation and Transition patches

Create the Loop Animation and Transition patches in the Patch Editor:

  1. Right-click in the Patch Editor.
  2. Select a Loop Animation patch, then right-click again and select a Transition patch.


The Loop Animation patch and Transition patches are usually used together. This is because the Loop Animation patch controls the progress of an animation, and the Transition patch can be configured to control how and where the object moves.

To see this in practice, connect the Progress output in the Loop Animation patch to the Progress input in the Transition patch - when a patch is selected, you'll see a label to indicate which port is which.

Then connect the output of the transition patch to the 3D Rotation input in both arm_r and wrist_r.

Here's how the graph will look:



And if you look closely, you can see the arm is moving very slightly:



This is because the End values in the Transition patch are set to 1 by default. This means the arm is moving very slightly, from the Start values of 0, to the end values of 1.

Let's make this movement more dramatic. It's really a matter of testing different options when working out the best values here, but let's start by changing the three End values to 20.

As you can see, the arm is moving more dramatically:



Next change all three of the Start co-ordinates to -10.

So the teddy is clearly waving now - but obviously in real life the arm would move back and forth.

To achieve this effect, check the box next to Mirrored in the Loop Animation patch. Checking this box will play the animation forward, then in reverse. While you're there, change the duration to 0.75. This will speed the animation up.

The finished graph, with all the correct values, will look like this:



Next let's make the teddy move up and down. Again, we'll be using the Loop Animation and Transition patches.

In the Patch Editor, create another Loop Animation patch, and 2 Transition patches.

Next, return to the object in the Scene panel, to create patches to represent the joints in the middle of the skeleton. These joints are called spring_mid, and jack_base. So, select spring_mid and jack_base. Again, you can select them both at the same time by holding down command on your keyboard.

This time, click the arrows next to Position over in the Inspector.

Connect:

  1. The Progress output in the Loop Animation patch to the Progress input in both Transition patches.
  2. The output of one Transition patch to the spring_mid patch.
  3. The output of the other Transition patch to the jack_base patch.

Ok, so the teddy is moving, but obviously you'll need to make some adjustments to the positions it's moving between!



Like before, you can do this in the Transition patches.

Start with the Transition patch connected to jack_base. So the joints move up and down - and not to the side - change the X and Z values to 0 next to both Start and Finish. Then:

  1. Next to Start, change Y to 0.1.
  2. Next to End, change Y to 0.15.

In the other Transition patch:

  1. Next to Start, change Y to 0.1.
  2. Next to End, change Y to 0.12.

Again, in the Loop Animation patch check the box next to Mirrored. Let's speed it up a bit too - set the Duration value to 0.25.

Here's how the final graph should look:



Just one last tweak now. Let's take a look at the Curve value in the Transition patch. You can adjust this to set the pacing of the movement. It's worth experimenting with this option in your own effects.

For this tutorial, set the Curve to Sinusoidal In-Out in both Transition patches.

Learn more

In this tutorial, you've learned two different ways to animate a 3D object in your scene.

Learn more about animation: