Tap Through Animation Layers

Hey Everyone!

Let’s see how we can tap through different animation layers!

In my project I currently have three animations in different layers.

Let’s create a script to this object that we can use to play our animations (Inspector Panel -> Add Component -> Script). We want the script to play an animation on turn on and when you tap, so let’s set this script to Initialize so we can bind both events in the same script.

Since we’re dealing a list of animations, the first thing we will add to this script is an input to get the animation, and get the names of the animation we want to play.

// @input Component.AnimationMixer animMixer
// @input string[] tapAnimLayer

When you go back to your Script component in the Inspector panel you should see a field to select your animation, and a way to add strings to a list. We’ll add our animation component to the Anim Mixer field, and the name of our animation layers to the Tap Anim Layer list.

Since both on tap and on lens turn on we will do the same thing (play animation), let’s create a helper function to play our animation. We’ll play from second 0, and loop the animation infinitely (-1). You can look at the animationMixer API page to learn more.

function playAnimIndex(index)
{
 script.animMixer.start(script.tapAnimLayer[index], 0, -1);
 script.animMixer.setWeight(script.tapAnimLayer[index], 1.0); 
}

Now we can call this function on TurnOn and onTap. We’ll also add the index of the animation we want to play. We’ll start with the first in the list.

// Starting animation index
var currentAnimLayerIndex = 0;
// Function runs at start of lens
function onLensTurnOnEvent()
{
 // start the new animation
 playAnimIndex(currentAnimLayerIndex)
}
var turnOnEvent = script.createEvent("TurnOnEvent");
turnOnEvent.bind(onLensTurnOnEvent);
function onTap(eventData)
{
 // start the new animation
 playAnimIndex(currentAnimLayerIndex);
}
var tapEvent = script.createEvent("TapEvent");
tapEvent.bind(onTap); 

Next we’ll get the onTap function to play the next animation in the list. We’ll create some helper functions to help us achieve this.

Since we don’t want animations to affect each other, we need to tell the current animation to stop.

function stopAnimIndex(index)
{
 script.animMixer.stop(script.tapAnimLayer[index]);
 script.animMixer.setWeight(script.tapAnimLayer[index], 0.0); 
}

Then we also need to tell the Lens to set our currentAnimLayerIndex to the next one in the list. We use a modulus to wrap around so that once we hit the end of the list, we’ll start back on the first animation.

function incrementAnimIndex()
{
 currentAnimLayerIndex = currentAnimLayerIndex + 1;
 currentAnimLayerIndex = currentAnimLayerIndex % script.tapAnimLayer.length;
}

Finally, we’ll modify our onTap function to call these helper functions before we play the animation.

function onTap(eventData)
{
 // stop current animation
 stopAnimIndex(currentAnimLayerIndex);
 
 // increment current animation
 incrementAnimIndex();
 // start the new animation
 playAnimIndex(currentAnimLayerIndex);
}

And you should be able to tap through your animation layers!

Happy crafting!

Our final script:

// @input Component.AnimationMixer animMixer
// @input string[] tapAnimLayer
// Starting animation index
var currentAnimLayerIndex = 0;
// Function runs at start of lens
function onLensTurnOnEvent()
{
 // start the new animation
 playAnimIndex(currentAnimLayerIndex);
}
var turnOnEvent = script.createEvent("TurnOnEvent");
turnOnEvent.bind(onLensTurnOnEvent);
function onTap(eventData)
{
 // stop current animation
 stopAnimIndex(currentAnimLayerIndex);
 
 // increment current animation
 incrementAnimIndex();
 // start the new animation
 playAnimIndex(currentAnimLayerIndex);
}
var tapEvent = script.createEvent("TapEvent");
tapEvent.bind(onTap); 
function incrementAnimIndex()
{
 currentAnimLayerIndex = currentAnimLayerIndex + 1;
 currentAnimLayerIndex = currentAnimLayerIndex % script.tapAnimLayer.length;
}
function playAnimIndex(index)
{
 script.animMixer.start(script.tapAnimLayer[index], 0, -1);
 script.animMixer.setWeight(script.tapAnimLayer[index], 1.0); 
}
function stopAnimIndex(index)
{
 script.animMixer.stop(script.tapAnimLayer[index]);
 script.animMixer.setWeight(script.tapAnimLayer[index], 0.0); 
}