In Part One of this series, we learned about sprites and their attributes, how they differ from configs, and how to change them. All of the changes we made to our examples were applied immediately. In this article, we’ll look at animating our sprites.
Sprite Animations
In the Draw package, we animate sprites using animation modifiers that apply changes to sprite attributes.
The animation modifier of a sprite can be accessed via its getAnimation
accessor method. The two main configs of an animation modifier are duration
and easing
. Let’s use those to animate a sample circle
sprite:
circleSprite.setAnimation({ duration: 1000, easing: 'elasticOut' }); // Now this change to circle radius will animate automatically. circleSprite.setAttributes({ r: 100 });
elasticOut
is a built-in easing function. You can see all of these functions with previews in this Charts Kitchen Sink example.
Additionally, multiple attributes can be animated at once. For example, let’s change our initial three values to the following:
cx: 50, cy: 50, r: 30
Let’s also modify the easing:
easing: 'bounceOut'
Finally, let’s animate both horizontal and vertical centers of the circle:
circleSprite.setAttributes({ cx: 200, cy: 200 });
Notice how both attributes animate in sync, as both attributes use the same easing and animation duration.
But what if we want to have different animation durations for different attributes? We can do this using the customDurations
config of the animation modifier:
circleSprite.setAnimation({ duration: 1000, easing: 'bounceOut', customDurations: { cy: 3000 } });
This will make the vertical center attribute (cy
) animate 3 times more slowly than other sprite attributes (in this case, horizontal center, cx
).
Finally, we can have custom easings assigned to specific attributes as well:
customEasings: { cx: 'easeOut' }
It’s important to note that animation is not limited to the simple number attributes we’ve examined in this guide. You can also animate colors, arrays, and even text!
For example, try animating color and array changes:
Conclusion
As you can see, animating sprites is incredibly easy and flexible. The animation API is powerful enough to create beautiful and realistic animations right out of the box!
Have fun experimenting!
If you’d like to learn about sprite transformations, check out part 3 in this guide. You’ll find part 1 and part 2 of this blog series in the guide as well.
I translated this article into Japanese.
Please look at it.
http://extjs.sunvisor.net/887
この記事を日本語に翻訳しました。
@martini3oz Thank you for taking the time to spread the word!
Thanks Vitaly for this article.
I know this is not the right place however just out of curiosity when is Sencha planning to resume the certification programs. Any clue? Anyone?
I think part 3 doenst exist anymore …
Found it:
http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/draw/creating_images_with_draw_pt3.html
Thanks Voodoo. We updated the links in the article too.