Game Development Reference
In-Depth Information
Animating with TweenJS
One final time, take a moment to imagine how you would animate your butterfly using only the
Canvas
API. I'll spare
you the code you'd need to accomplish this, but as a quick reference, you would most likely do something similar to
the following.
1.
Draw your butterfly image.
2.
Create a timer that would execute until a desired increment is reached.
3.
At each interval, clear your butterfly graphics.
4.
Redraw your butterfly with a new, slightly incremented y value.
5.
Check if the number of ticks or desired butterfly y position is reached.
6.
Clear your timer.
As you can imagine, with several game graphics and animations, the actual code for this can quickly become
convoluted. You're not even accounting for the extra calculations it would take to simultaneously handle duration
and distance, easing formulas, and what you want to do after your animation is finished.
It should be no surprise that TweenJS makes this animation process a lot simpler. You can accomplish the
previous example, and much more, within a single line of code. Using the same butterfly, let's take a quick look at
how you would handle this using TweenJS.
createjs.Tween.get(butterfly).to({y:butterfly.y + 20},1000);
That's all there is to animating graphics with TweenJS. Let's break this up a bit. First, you access the static class
Tween
and call its
get
method. This method takes one parameter, its
target,
which is the object you want to animate.
Next, you call the
to
method on the returned target and pass it an object of properties you want to tween. Lastly,
in this method you set the desired duration of the animation using milliseconds. In this case, you want the animation
to take exactly one second.
It's really as simple as that. You can optionally pass even more properties to tween by simply adding on to the
object. Say you wanted to do a similar animation but also have the butterfly fade out.
createjs.Tween.get(butterfly).to({y:butterfly.y + 20,alpha:0},1000);
■
the above code example demonstrates the practice of combining methods know as
chaining.
Many techniques
used in the CreateJS suite utilize this functionality. it's a handy technique for creating shorter, more concise code.
Note
Easing
One of the coolest things about tweening engines is the built-in equations for handling several animation types, such
as easing in and out, bouncing, curving, and more. To give your animation a more natural feel, a typical animation is
an ease-out effect. This gradually slows down your animation speed as the tween progresses. The easing equations
used in TweenJS were developed by the well-known programmer Robert Penner. These equations are used in many of
the tweening engines today and in a wide variety of languages.
Let's add some easing to your butterfly, which is now the third argument in your
to
method:
createjs.Tween.get(butterfly).to({y:butterfly.y + 20},1000,createjs.Ease.QuadOut);
