Using Tweens in Kiwi.JS

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.

In the example below you can see 5 examples of different types of Tweens. Each Sprite is tweening from it’s current x position to the x position of the mouse when clicked, using various methods.

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.

You then want to make the tween object go ‘to’ a point that is specified. With the ‘to’ method of the Tween class.

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:


Share the joy
Comments 1

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">