JS Days 2025 is now live – Join 5,000+ devs for the premier virtual JavaScript event. Register Now

Creating Beautiful Drawings Using Sencha Ext JS – Part 2

December 16, 2015 1046 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
});

Sencha Ext JS

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

Sencha Ext JS

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

Sencha Ext JS - Circle Sprite 3

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:

Sencha Ext JS - Circle Sprite 4

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.

Recommended Articles

Guide to Estimating ROI When Switching From DIY Libraries to Full Software Development Platforms Like Ext JS

Teams started with Do It Yourself, or DIY, JavaScript tools like jQuery and Bootstrap. But those fall apart as projects scale. Scattered code, user interface…

Top Frameworks Developers Are Using for Custom Software Development in 2025

We’re seeing it more every year; teams aren’t settling for plug-and-play tools anymore. In healthcare, finance, logistics, and other data-heavy industries, there’s a clear shift.…

Meet Sencha AI Coding Companion: Your AI-Powered Assistant for Faster Ext JS Development

Building modern web applications should be exciting. But too often, developers find themselves buried in documentation, endlessly Googling framework quirks, or stuck solving the same…

Ext JS 7.9 & Rapid Ext JS V1.1 Have Arrived

The Sencha team is excited to announce the latest Ext JS version 7.9 and Rapid Ext JS 1.1 release – designed to accelerate development, enhance…

Top 10 JS Grid Customization Tips for a Better UI Experience

Grids are pretty much everywhere in web apps. Working with financial sheets, product details, or users? Then you’ve probably used a JavaScript grid. It makes…

Why Ext JS Framework is the Go-To Framework for Building Scalable and Data-Intensive Web Apps

Web apps are much more advanced now. They deal with large amounts of data and need to stay fast, even with many users. If you’re…

View More

Trusted by Top Developers: Learn how to enhance your development journey — for free

Get the latest newsletter keeping thousands of developers in the loop.

Loved by developers at