Using Tween.js for Simple Animations

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