Using Kiwi.Tweens is a very useful and effective way of animating properties in a Kiwi.JS game. It can be used for more than just animating sprite’s positions. It can tween any numerical property or method from one to another.
You can download this example here.
In this tutorial we will go over how to setup and start using the Kiwi.Tween object.
To tween you need to create a tween object and pass the object that you want to animate values of. This can be seen below.
|
1 |
this.tweenX = this.game.tweens.create( this.slider ); |
You then want to make the tween object go ‘to’ a point that is specified. With the ‘to’ method of the Tween class.
|
1 |
this.tweenX.to( { x: this.mouse.x }, 1000, Kiwi.Animations.Tweens.Easing.Sinusoidal.Out, true ); |
The first property that you want to pass is an Object Literal. Inside of the Object Literal you will want to add the properties or methods that you will want to tween of the object that you have passed earlier. In the example we are just changing the x value of the this.slider sprite.
The second parameter is the time you want the tween to take from start to finish. This is in milliseconds.
The next parameter is the type of Tween you want to perform. The most natural Tween in my opinion is Sinusoidal Tween, this is why I have chosen it.
The last parameter is a Boolean. Set this Boolean to true if you want the tween to start as soon as it has been created. If set to false you will manually have to call the start() method of the Tween class to start the tween. This would look like this:
|
1 |
this.tweenX.start(); |
Recent Comments