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.
Tip: 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.
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.
Tip: 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.
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!
Tip: 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 Tween object contains 5 objects with different types of tween animations:
- 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
Easing Function and
Tip: If the Scene Object input is left blank, then the tween animation would be applied to whichever object this script is attached to.
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.
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.
Game Screen Example displays ways to incorporate tween animation into UI elements in any mobile games.
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
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
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.
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
Object 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 have scripts that references it!
Then a folder called Tween would be created in the
Resources 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.
Please refer to the guides below for additional information:
Still Looking for help?Visit Support