This is a tween library for PlayCanvas. You can include tween.js in your Project to start using the library.
If you create your application after loading this library, you can call the following method to enable tweening on your application:
app.addTweenManager();Tweening pc.Entity properties looks like this:
var tween = entity.tween(fromProperty).to(toProperty, duration, easing);
tween.start();For example, this tweens the entity's local position with duration 1.0 and SineOut easing:
var tween = entity.tween(entity.getLocalPosition()).to({x: 10, y: 0, z: 0}, 1.0, pc.SineOut);
tween.start();If you are dealing with rotations you should use rotate instead of to. This takes euler angles and uses an internal quaternion or it can take quaternions to slerp between angles. For example:
entity.tween(entity.getLocalEulerAngles()).rotate({x: 0, y: 180, z: 0}, 1.0, pc.Linear);entity.tween(entity.getLocalRotation()).rotate(targetQuaternionRotation, 1.0, pc.Linear);You can also tween properties of any other object not just entities. For example:
// some object with a property called 'value'
var data = {
value: 0
};
// create a new tween using pc.Application#tween
// passing another object as the target. Any properties
// that are common between the target and the source object
// will be tweened
app.tween(data).to({value: 1}, 1.0, pc.BackOut);You can chain method calls for a tween. For example:
// delay, yoyo and loop tween
entity
.tween(entity.getLocalPosition()).to({x: 10, y: 0, z: 0}, 1.0, pc.SineOut)
.delay(1.0)
.yoyo(true)
.loop(true)
.start();To start playing a tween call tween.start().
To stop a tween call tween.stop().
To pause a tween call tween.pause().
To resume a paused tween call tween.resume().
To delay a tween call tween.delay(duration) where duration is in seconds.
To repeat a tween count times call tween.repeat(count).
To loop a tween forever call tween.loop(true).
To make a tween play in reverse after it finishes call tween.yoyo(true). Note that to actually see the tween play in reverse in the end, you have to either repeat the tween at least 2 times or set it to loop forever. E.g. to only play a tween from start to end and then from end to start 1 time you need to do:
tween.yoyo(true).repeat(2);To reverse a tween call tween.reverse().
To subscribe to events during Tween execution, use a these methods:
This is called on every update cycle. You can use this method to manually update something in your code using the tweened value.
It provides dt argument.
E.g.
var color = new pc.Color(1, 0, 0);
var tween = app.tween(color).to(new pc.Color(0, 1, 1), 1, pc.Linear);
tween.onUpdate((dt) => {
material.diffuse = color;
material.update();
});This is called when the tween is finished. If the tween is looping the onLoop will be called instead.
E.g.
entity
.tween(entity.getLocalPosition())
.to({x: 10, y: 0, z: 0}, 1, pc.Linear)
.onComplete(() => {
console.log('tween completed');
});This is called whenever a looping tween finishes a cycle. This is called instead of the onComplete for looping tweens.
E.g.
entity
.tween(entity.getLocalPosition())
.to({x: 10, y: 0, z: 0}, 1, pc.Linear)
.loop(true)
.onLoop(() => {
console.log('tween loop');
});There are various easing methods you can use that change the way that values are interpolated. The available easing methods are:
pc.Linearpc.QuadraticInpc.QuadraticOutpc.QuadraticInOutpc.CubicInpc.CubicOutpc.CubicInOutpc.QuarticInpc.QuarticOutpc.QuarticInOutpc.QuinticInpc.QuinticOutpc.QuinticInOutpc.SineInpc.SineOutpc.SineInOutpc.ExponentialInpc.ExponentialOutpc.ExponentialInOutpc.CircularInpc.CircularOutpc.CircularInOutpc.BackInpc.BackOutpc.BackInOutpc.BounceInpc.BounceOutpc.BounceInOutpc.ElasticInpc.ElasticOutpc.ElasticInOut
You can find a tutorial with various use cases here.