Tag Archives: animation

Tap and Drag Animation Domination Part 2: Implementing Custom Animations with Ext.Anim

1 Reply


Note: This is part of a three-part series on drag and drop animation in Sencha Touch 2. Click here to read part 1.

Use the Ext.Anim.run() method to execute custom animations from your Sencha Touch apps. Note that Ext.Anim.run() can only operate on DOM elements. Therefore, if you wanted to define a custom fade effect on an Ext.Container component, your code would need to appear similar to the following:


Ext.Viewport.add(
 {
  xtype: 'component',
  html: 'Beam me up, scotty!',
  style: 'background-color: silver; opacity: 0.0',
  height: 200,
  width: 200,
  listeners: {
    show: function(cmp) {

     // define custom fade animation on the component
      Ext.Anim.run(cmp.element, new Ext.Anim({
          autoClear: true,    // clear final animation effect
          easing: 'ease-in',
          duration: 1000,     // transition over 1 sec
          from: {
           'opacity': 0.0     // fade from fully transparent
          },
          to: {
           'opacity' : 1.0    // end effect will be opaque
          },
          after: function(el) {
            // after animation is complete,
            // set the component to be fully opaque
            var cmp =  Ext.getCmp(el.getId());
            cmp.setStyle('background-color: silver; opacity: 1.0');
          }
       }));
     }
   }
}

Note that prior to invoking the Ext.Anim singleton, you must load the class into memory using either the Ext.require() method or the requires config property of a component.

You can put any CSS3 property that is supported by your device into the from/to config blocks. Note, however, that any property that is present in the from config object must also be specified in the to object.

Before you consider implementing all kinds of zany CSS-3 based animations, consider that not all CSS3 animations are performant across all devices. Performance in Desktop Chrome and the iOS Simulator is not indicative of how well your animation will perform on an actual iPhone 5, iPad, or Android device. I strongly urge you to set up a small test harness, as indicated above, to test complex animations on physical devices before dropping them into your app’s codebase.