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(newpc.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(newpc.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(newpc.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 =newpc.Color(0,0,0);
var material =this.entity.render.material;
this.app
.tween(color)
.to(newpc.Color(1,1,1),1.0, pc.Linear)
.loop(true)
.yoyo(true)
.onUpdate(function(){
 material.diffuse= color;
 material.update();
})
.start();

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