Introducing React ReExt – Sencha Ext JS Components in React! LEARN MORE

Creating Beautiful Drawings Using Sencha Ext JS – Part 2

December 16, 2015 114 Views
Show

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
});

Open in a fiddle

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
});

Open in a fiddle

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
    }
});

Open in a fiddle

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'
}

Open in a fiddle

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:

Open in a fiddle

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.

Show
Start building with Ext JS today

Build 10x web apps faster with 140+ pre-build components and tools.

Latest Content
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s…

JavaScript Design Patterns: A Hands-On Guide with Real-world Examples
JavaScript Design Patterns: A Hands-On Guide with Real-world Examples

As a web developer, you know how popular JavaScript is in the web app development…

Virtual JS Days 2024のハイライト
Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript…

See More