Animated Dimensions in Sencha Touch 2

Question

I am trying to animate the height of the dataview, but currently it just moves the panel around the viewport, instead of holding it in place and changing its height. The code is as follows:

Ext.Anim.run(el, 'slide', { from: { height: height }, to: { height: newHeight }, out: false, direction: 'up', easing: 'ease-out', duration: 1000 }); 

For example, height = 200, newHeight = 100 will immediately drop the dataview, so the vertex will be 200 pixels below the viewport and then animated back to the top of the viewport.

How can I get it to change the height? Thanks.

Answer 1

Try using Ext.Animator.run :

 Ext.Animator.run({ element: dataview.element, duration: 500, easing: 'ease-in', preserveEndState: true, from: { height: dataview.element.getHeight() }, to: { height: 100 } }); 

And in the full example:

 Ext.application({ name: 'Sencha', launch: function() { var dataview = Ext.create('Ext.DataView', { fullscreen: true, style: 'background:red', store: { fields: ['text'], data: [ { text: 'one' }, { text: 'two' }, { text: 'three' } ] }, itemTpl: '{text}' }); Ext.Viewport.add({ xtype: 'button', docked: 'top', handler: function() { Ext.Animator.run({ element: dataview.element, duration: 500, easing: 'ease-in', preserveEndState: true, to: { height: 100 }, from: { height: dataview.element.getHeight() } }); } }); } }); 

Answer 2

Since I cannot add comments, I will have to put this as a separate answer. I just wanted to add what rdougan said and show how you can catch the animation end event. In this situation, I consider it necessary, because the Sencha Touch component.getTop / Left / Height / Width () functions return incorrect values ​​after an animation, for example, shown.

 dataview.setHeight(dataview.element.getHeight()); // you may or may not need this console.log('height before\t', dataview.getHeight()); var a = new Ext.fx.Animation({ element: dataview.element, duration: 500, easing: 'ease-in', preserveEndState: true, from: { height: dataview.element.getHeight() }, to: { height: 100 } }); a.on('animationend', function (animation, element, isInterrupted) { console.log('height before\t', dataview.getHeight()); dataview.setHeight(dataview.element.getHeight()); console.log('height set\t', dataview.getHeight()); }); Ext.Animator.run(a); 

I stayed in some magazines, so you can see what I mean. This example was written against ST 2.1 RC2.

Answer 3

Here you can use a clean utility to accomplish this.

 function animatron (target, prop, duration, to, from, easing) { // return if no target or prop if (target == null || prop == null) { return; } // defaults if (duration == null) { duration = 250; } if (to == null) { to = 0; } if (from == null) { from = target.getHeight(); } if (easing == null) { easing = 'ease-out'; } // to property var t = {}; t[prop] = to; // from property var f = {}; f[prop] = from; // Animation Options var opts = { duration: duration, easing: easing, element: target.element, from: f, preserveEndState: true, to: t }; // Animation Object var anime = new Ext.fx.Animation(opts); // On animationend Event anime.on('animationend', function (animation, element, isInterrupted) { // Hide the target if the to is 0 if (to == 0 && (prop == 'height' || prop == 'width')) { if (!isInterrupted) { target.hide(); } } // Update property if width or height if (prop == 'height') { target.setHeight(to); } if (prop == 'width') { target.setWidth(to); } // Dispatch 'animated' event to target target.fireEvent('animated', animation, element, to, from, isInterrupted); }); // Show the target if it hidden and to isn't 0 if (target.getHidden() == true && to != 0) { target.show(); } // Run the animation Ext.Animator.run(anime); } 

You can listen to the "animated" event in the target element.

 animatron(dataview, 'height', 500, 0); dataview.addListener('animated', function (animation, element, to, from, isInterrupted) { console.log('animation ended'); console.log('interrupted: '+ isInterrupted); });