Tutorials

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.getLocalRotation())
.to(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.model.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.