Using the Tween library

Often we want to animate an Entity or some arbitrary value between two points. This is called tweening. We have created a tweening library for that exact purpose. You can find the library at https://github.com/playcanvas/playcanvas-tween.

To use the library just upload the tween.js file to your project. This will allow you to tween Entity properties like position, rotation, scale etc like so:

entity.tween(entity.getLocalPosition()).to({x: 10, y: 0, z: 0}, 1, pc.SineOut);

Here is an example on how to tween the local position of an Entity:

Here are links to the Project and the Editor for this example.

To get the above we are doing:

this.entity
    .tween(this.entity.getLocalPosition())
    .to(new pc.Vec3(4, 0, 0), 1.0, pc.SineOut)
    .loop(true)
    .yoyo(true)
    .start();

Here is an example on how to tween the local rotation of an Entity:

Here are links to the Project and the Editor for this example.

To get the above we can do:

this.entity
    .tween(this.entity.getLocalEulerAngles())
    .rotate(new pc.Vec3(180, 0, 180), 1.0, pc.Linear)
    .loop(true)
    .yoyo(true)
    .start();

Here's how to tween the local scale of an Entity:

Here are links to the Project and the Editor for this example.

To get the above we can do:

this.entity
    .tween(this.entity.getLocalScale())
    .to(new pc.Vec3(3, 3, 3), 1.0, pc.SineOut)
    .loop(true)
    .yoyo(true)
    .start();

And finally here's a way to tween colors:

Here are links to the Project and the Editor for this example.

To get the above we can do:

var color = new pc.Color(0, 0, 0);
var material = this.entity.render.material;
this.app
    .tween(color)
    .to(new pc.Color(1, 1, 1), 1.0, pc.Linear)
    .loop(true)
    .yoyo(true)
    .on('update', function () {
        material.diffuse = color;
        material.update();
    })
    .start();

Again you can find the library at https://github.com/playcanvas/playcanvas-tween.