Using Tween.js for Simple Animations
Featured
Tween.js (https://github.com/tweenjs/tween.js/) is a great tweening engine for creating simple programmatic animations. It’s an open source Javascript library created by Sole (https://github.com/sole). and can be easily integrated into your Lens Studio project.
With tweening, you can modify any value in Lens Studio over time with easing. Perfect for programmatically animating position, scale and rotation of objects. And even things less obvious like a material’s color or the intensity of a light.
Add Tween.js to Project
To use in Lens Studio, first save Tween.js as a local file:
https://raw.githubusercontent.com/tweenjs/tween.js/master/src/Tween.js
Next, drag tween.js into the Resources panel.
To add it to your Scene, create a new Object with a Script component. Then, add Tween.js to your script component, bound to the Initialized event. You’ll now be able to use Tween.js in your custom Javascript.
Create a Tween!
Now, add your own custom script to utilize the tweening!
Here’s an example of tween.js being used inside Lens Studio. The below script bounces an object’s scale back and forth using an elastic easing function. The script is bound to the Lens Turned On event (called immediately after Initialized) and exposes configurable inputs to tune.
// @input vec3 startScale = {1.0, 1.0, 1.0}
// @input vec3 goalScale = {2.0, 2.0, 2.0}
// @input float time = 1.0
var tweenStartScale = {
x: script.startScale.x,
y: script.startScale.y,
z: script.startScale.z
};
var tweenGoalScale = {
x: script.goalScale.x,
y: script.goalScale.y,
z: script.goalScale.z
};
// Tween that moves from start scale <-> end scale
// Bouncing back and forth infinitely
var tween = new TWEEN.Tween(tweenStartScale)
.to(tweenGoalScale, script.time * 1000.0)
.easing(TWEEN.Easing.Elastic.Out)
.onUpdate(function() {
updateScale(tweenStartScale);
})
.yoyo(true)
.repeat(Infinity)
.start();
// Here's were the values returned by the tween are used
// to drive the transform of the SceneObject
function updateScale(scale) {
var transform = script.getTransform();
transform.setLocalScale(new vec3(scale.x, scale.y, scale.z));
}
// On update, update the Tween engine
function onUpdateEvent() {
TWEEN.update();
}
// Bind an update event
var updateEvent = script.createEvent("UpdateEvent");
updateEvent.bind(onUpdateEvent);
The script binds the Lens Studio update event and calls the Tween.js update. Then, in the new tween, we bind our own custom update to Tween.js’ onUpdate. Tween values are returned here allowing us to apply them to objects.
For more information on using tween.js, check out the Tween.js user guide:
https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md
-
Hello,
I'm trying this solution to create simple animation, but following your tuto, I get an error in the console. What did I miss?
Thank you
Comment actions -
Hi Keven, I suspect you didn't add the Tween.JS script to your scene.
- Create a new empty object
- Add a script component
- Add Tween.JS to the script component
- Select initialized from the event dropdown
If it still happens, it might be an order of operations problem. Trying moving the script you're trying to use Tween.JS with to the event "Lens Turned On" which happens after Initialized. This will let Tween.JS initialize and be ready to use prior to you using it.
Comment actions -
Well, I did have the script in my scene, but it seems I did not name it correctly, now that I have deleted the previous object and create a new one with the proper name, it's working.
Thank you.
Time to figure out, how to tweak to do what I want, which is creating a baseball bat movement.
Comment actions -
Hi Travis, thanks so much for putting the TweenJS integration, it's super helpful.
Just a quick note, at some point, shouldn't it be natively integrated in the main scripting API?
In other 3d frameworks, there's usually a way to create animations programmatically on scene objects directly, which is a good middle ground between having to create all the animations in your 3d modeling tool, or modifying the objects' parameters manually on each frame (which is essentially what TweenJS is doing, if I'm not mistaken).
Anyways, would love to hear your thoughts!
Comment actions -
Also I added type definitions for the TweenManager to my Lens scripting api typings on Github;
see https://github.com/huggingface/snapchat-lens-api/commit/bb5538111516b199b760f3c8dd5e3712150ebe36
It's pretty helpful.
Thanks for the nice tool!
Comment actions
Please sign in to leave a comment.
Have a comment?