Example Use

Example Use

In these examples, we'll assume you have setup a Twillex engine named %myTweenEngine.

Tween along a path

Let's suppose you have an object, %object, at world position 100, 100, and you want to move it to world position 0, 0. You want it to take 1 second (1000 milliseconds) to get there.

%myTweenEngine.to(1000, %object, "position:0 0");

Now you just have to play it.

%t.play();

If you want to play it again, make sure it is as the beginning first. Note that it can't hurt to rewind it even if it has never been played.

%t.rewind();
%t.play();

Now let's play a bit with easing our animations so they speed up and slow down in a more natural and attractive manner. I'm going to try a fast tween that slows down quickly near the end, called quint_out, but you can play with others.

%myTweenEngine.to(1000, %object, "position:0 0", "ease:quint_out");

Tween along a path a certain distance

Now let's suppose you don't know the world position you want to make it to, you just know thath it is 50 world units to the left:

%myTweenEngine.to(1000, %object, "position:-50 0", "relative:true");

Because you did not need to move in y, you could use a "short-cut field" for the position in x:

%myTweenEngine.to(1000, %object, "x:-50", "relative:true");

Tween along a path and also change color

You can tween multiple fields at once as long as they are for the same object and take the same duration to animate. Let's take our %object to position 200, 300, and make sure it is red when it gets there (no matter what its current color).

%myTweenEngine.to(1000, %object, "position:200 300, blendColor:1.0 0 0");

Tween a "button"

This next technique would work on any object, but a button seems appropriate as an example. Let's suppose you want to have a button double in size when the mouse is over it. We'll take one second for it to grow. If you remove the mouse, it will shrink back to its original size. If you remove the mouse before it has completely grown, it will simply reverse directions and go back to its original size. Note that our play commands make this fairly natural.

First, create your Tween and hold it in a variable, we'll use this.buttonTween within the button. Let's also assume our Button is size 5, so we want it to grow to size 10. You could always work this out mathematically if necessary but we'll know to grow to 10 for the sake of simplicity here.

function myButton::onAdd(%this)
{
   %this.buttonTween = Tweener.to(500, %this, "size:10 10");
}

Now we need mouseEnter() and mouseLeave() routines.

function myButton::onMouseEnter(%this)
{
   %this.buttonTween.forward();
   %this.buttonTween.play();
}

function myButton::onMouseLeave(%this)
{
   %this.buttonTween.reverse();
   %this.buttonTween.play();
}

function myButton::onRemove(%this)
{
   %this.buttonTween.delete();
}

A few notes about the above. When the mouse goes over the button, we always set its direction to forward. It can't hurt if this is the first time, and this way we know we'll get the correct direction. The same goes for always putting the tween in reverse when the mouse is removed. Likewise, if the mouse was off the button long enough that it returned to its original size, the tween would be stopped, so we need to make sure and play() it. It can't hurt if it is already playing.

Finally, the button has an onRemove() defined to make sure and delete this Tween when the button is done.

More examples soon!