在Sencha Touch 2中設置動畫尺寸

Question

我試圖對dataview的高度進行動畫設置，但它目前只是在面板周圍滑動面板，而不是保持原位並更改其高度。的代碼如下：

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

例如，高度= 200，newHeight = 100將導致數據視圖立即丟棄，使得它的頂部是在200像素的視口的下方，然後動畫回的頂部視。

我怎樣才能讓它改變高度？謝謝。

Answer 1

嘗試使用Ext.Animator.run代替：

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

而一個完整的例子中：

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

既然不能添加註釋，我得把這個作爲一個單獨的答案。我只是想補充一下rdougan說的話，並展示如何抓住動畫結束事件。在上述情況下，我發現它是必需的，因爲在顯示動畫之後，Sencha Touch的component.getTop/Left/Height/Width（）函數會返回不正確的值。

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

我留下一些記錄，以便你能看到的只是我的意思。這個例子是針對ST 2.1 RC2編寫的。

Answer 3

這裏是你可以用它來完成這個

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's hidden and to isn't 0 
    if (target.getHidden() == true && to != 0) { target.show(); } 

    // Run the animation 
    Ext.Animator.run(anime); 
} 

您可以監聽目標元素上的「動畫」事件

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