How to animate components in Sencha Touch 2

Today, We are going to see How to animate components in Sencha Touch 2 using Ext.Anim Class. In Ext.Anim Class, method run() is used to execute animation on the Sencha Touch Components using the animation properties and types defined inside Ext.anims class.

Let's see the demonstration, We are going to add Slide animation effect to the component element while the component is rendered in the browser. Event Show will be triggered when the component is rendered into the browser.

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component',
    alias: 'widget.mycomponent',

    config: {
        html: 'This is my component',
        itemId: 'mycomponent',
        styleHtmlContent: true,
        listeners: [{
            fn: 'onMycomponentShow',
            event: 'show'
        }]
    },

    onMycomponentShow: function (component, eOpts) {

        Ext.Anim.run(component, 'slide', {
            out: true,
            delay: 0,
            direction: 'up',
            duration: 1000
        });
    }
}); 

Here is the output, when i run the above code in the Google Chrome

By running the above code,  Initially you will get a blank screen and after 1 second, you will see a slide up animation effect followed by 'This is my component' HTML Content.

Important Note: You need to add Ext.Anim as the requires class inside Ext.Application Class.

You can also try with other animation effects like Fade, Cube, Flip etc present inside Ext.Anims Class.

Hope, you enjoyed this Post.