Tween

To make it easier for you to mix-and-match our different examples, add the Tween package to your project, select + -> Scripts -> Tween Manager in the Scene Hierarchy panel.

Animation can make your Lenses more engaging as it can add life and movement to your AR experience.  The Tween Template demonstrates multiple scenarios of implementing Tween into your project to add animations directly within Lens Studio. With Tween you can move, scale, rotate, change the color of an object and more through simple drop downs. The template comes with examples of animating 3D objects, orchestrating animations, as well as animating interactable UI elements.

Tween is just one way of adding animation in to your Lens. There are many different ways depending on what you are trying to make. They can be added as 3D Animation, 2D Animation, Vertex Animation or even with shaders created in Material Editor.

Tutorial

Guide

Tween animation is a type of animation that allows users to interpolate between two parameters of an object, such as scaling up and down, moving from one position to another, rotating and changing colors.

In Lens Studio, you can create Tween animations using the built-in helper scripts--with each helper script taking care of each parameter (e.g. position, scale, rotation, etc.). You can even chain or play these tween animations at the same time with helper scripts to create more advanced animations. For example, you may tween an object's position as well as their scale at the same time in order to create a bouncy objects which squashes when they land on the floor.

In addition, in the process of tweening from one point to another, an Easing Function is used to define the acceleration of the movement to give you more precise control over how an object animates.

Each easing mode is related to some math function that describes the movement. These easing functions are not unique to Lens Studio. You can find much more information, such as a graph of the movement, by searching them online.

Get Started

The template contains several examples of tween scripts being applied to objects to demonstrate what you can do. You can find a Simple Tween object and an Advanced Tween object under WorldObjectController > Tween Objects in the scene which houses these examples. You’ll also find the Tween_UI object under the orthographic camera with animated UI objects under it. Feel free to toggle on objects labeled with [TRY_ME] to see the extra content in the Tween Template!

The Tween Template has a TweenManager all the way at its top. Every project with tween script animations would need to have the TweenManager object with TweenManager and the Tween script attached at the top of its hierarchy, otherwise the tween scripts would give an error message.

Simple Tweens

The Simple Tween object contains 5 objects with different types of tween animations:

• Move
• Rotate
• Scale
• Change Color
• Change Value

The tween script that is controlling every animation is attached to the TweenObject child object under each object.

Try adjusting parameters on each tween script, such as Loop Type, Time, Delay, Easing Function and Easing Type.

If the Scene Object input is left blank, then the tween animation would be applied to whichever object this script is attached to.

Advanced Tweens

The advanced tween example contains 3 animated tween objects:

• Bouncy Tween
• Particle Tween
• Flashy Tween

Each of these examples use the TweenChain script to arrange different tweens to play in a certain order. Multiple tween chains are used to create a combination of different animations which result in a character that’s moving in a more complex way than just from one point to another.

For example, the Bouncy Tween object is set up under a few layers of parent objects, each of which does one type of animation, such as move vertically, move horizontally, scale up and down, etc.

Let's take a look at the VerticalMove example to see how it works. The VerticalMove object has two tween scripts on it, neither are set to play automatically. Each of the tween has a unique name describing what the tween animation does.

Then on TweenChain > VerticalMoveChain, we have a TweenChain script that’s calling the tween animations on the VerticalMove object in a certain order.

We have all our chain objects set up in a similar fashion for each of our tweens. Note that each chain contains tween animations which all add up to the same time length (this is important if the animation has to loop).

Finally, we have the TweenChainSync object with the TweenSyncHelper script attached. This script takes the length of time defined in the Tween Length parameter, and calls the array of chained tween again once it has elapsed. This script is here to prevent multiple tween chains running together from drifting away over time.

UI ScreenTransform Tweens

There are 4 different objects with multiple Screen Transform objects under the Orthographic Camera, each of which is displacing a unique aspect of tween animation on Screen Transform.

The Game Screen Example displays ways to incorporate tween animation into UI elements in any mobile games.

Both the Play Button and Hamburger Button can be clicked on screen, and certain UI animations would display when those buttons are clicked.

It is very useful to combine Behavior script with tween script to create responsive animations upon certain actions. In this example, when the Play Button is clicked, two Behavior scripts are used to trigger different animations.

One Behavior script runs a tween called BOUNCE that’s attached on the PlayButton. So the BOUNCE animation plays every time the PlayButton is pressed.

Another Behavior script sends out a global trigger PLAY_GAME_UI.

All other tween animations that get triggered when the button is clicked would have a Behavior script to run certain tweens on this trigger. For example, we can have the InfoButton show up by having it play an animation named ENTER

The Easing Layout Example has a few UI objects laid out on the screen. Each item will display a scaling animation with the easing function described below when they are clicked.

The refresh button would fade in all items on the screen with an order. It uses the RunTweenSeriesHelper script which is set to be triggered with the Play Tween Trigger sent out by a Behavior script.

The Simple Tween Example and Advanced Tween Example shows the same motion examples as the 3D Simple Tween and Advanced Tween objects on the 2D space.

Setting up Tween animation from scratch

Besides using this template, you can set up your own tween animations from scratch. The tween scripts can be found by going to + > Helper Scripts > Tween Manager under the Scene Hierarchy panel. A Tween Manager object will be created in the scene, make sure to have Tween Manager all the way at the top in the hierarchy so that the objects below it can have scripts that references it!

Then a folder called Tween would be created in the Asset Browser panel. All tween scripts can be found in the Tween folder, and they can be applied freely to any objects in the scene to create tween animations. For example, you would add a TweenTransform script on an object which transform (position, rotation, scale) you want to add tween animation to.

Previewing Your Lens

You're now ready to preview your Face Lens. To preview your Lens in Snapchat, follow the Pairing to Snapchat guide.