Animating components in Sencha Touch 2

I’m working on a big Sencha Touch project that involves a *lot* of interactivity and animations. Since I’d never had the need to implement custom animations in Sencha Touch 2 beyond the typical card layout transition, I thought it would be a good idea to throw together a simple example to see how the Ext.Anim singleton operates. As you can see from the code snippet below, it’s actually rather simple to animate a swap of two components in an hbox configuration!

In this particular use-case, the Ext.Anim class dynamically adds a CSS3  -webkit-transform: translate3d() property to the affected container’s DOM element. When the animation has been completed, the CSS3 is stripped and the components are physically reordered within their parent.


Ext.define('MyApp.view.MyContainer', {
 extend: 'Ext.Container',

 requires: ['Ext.Anim'],

 config: {
  itemId: 'main',
  layout: { type: 'vbox' },
  items: [
   {
    xtype: 'container',
    itemId: 'boxcontainer',
    layout: { type: 'hbox' },
    items: [
     {
      xtype: 'component',
      flex: 1,
      html: 'Container 1',
      itemId: 'box1',
      style: 'background-color: red;',
      styleHtmlContent: true,
      width: '50%'
     },
     {
      xtype: 'component',
      flex: 1,
      html: 'Container2',
      itemId: 'box2',
      style: 'background-color: green;',
      styleHtmlContent: true
     }
   ]
  },
  {
    xtype: 'button',
    margin: '40 5 5 5',
    text: 'Animate',
    handler: function(button, event) {

     // get pointer to box 1 DOM element
     var box1 = button.up('#main').down('#box1').element;

     // get pointer to box 2 DOM element
     var box2 = button.up('#main').down('#box2').element;

     if (!this.rotated)
      this.rotated = true;
     else
      this.rotated = false;

     // animate box 1 - note this is an async operation
     Ext.Anim.run(box1,'slide', {
        direction: 'right',
        reverse: !this.rotated,
        duration: 1000,
        easing: 'ease',
        autoClear: true,
        after: function(el) {
          // swap physical positions after animation
          var parent=button.up('container').down('#boxcontainer');
          parent.insert(0,parent.getInnerItems(1));
        }
     });

     // animate box 2
     Ext.Anim.run(box2,'slide', {
       direction: 'left',
       reverse: !this.rotated,
       duration: 1000,
       easing: 'ease',
       autoClear: true
     });

   } // handler
  } // button
 ] // items
} // config
});

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s