如何在sencha touch 2中更改Tab面板上的隨機動畫？

Question

我還是新來的sencha touch 2，目前我被困在如何設置不同的動畫每個

時間用戶切換標籤面板。任何人都可以給我一些提示如何做到這一點？

非常感謝您提前。

Answer 1

這裏有一個很大的提示：

Ext.define("App.view.Main", { 
    extend: 'Ext.tab.Panel', 

    config: { 
    fullscreen: true, 
    layout: { 
     animation: 'slide' 
    }, 
    tabBarPosition: 'bottom', 
    items:[{ 
     xtype:'panel', 
     iconCls: 'home', 
     title:'Tab 1', 
     html:'Tab1' 
    },{ 
     xtype:'panel', 
     iconCls: 'user', 
     title:'Tab 2', 
     html:'Tab2' 
    },{ 
     xtype:'panel', 
     iconCls: 'info', 
     title:'Tab 3', 
     html:'Tab3' 
    }], 
    listeners:{ 
     activeitemchange:function(){ 
     this.getLayout().setAnimation(['slide','fade','cover','reveal','pop', 'flip'][Math.floor(Math.random()*6)]); 
     } 
    } 
    } 
}); 

基本上，當用戶切換卡，它會設置了一個tabpanel的佈局之中在['slide','fade','cover','reveal','pop', 'flip']的那些新的隨機動畫;

隨意加入的方向參數

[更新]手柄方向

listeners:{ 
    activeitemchange:function(){ 
    var anim_with_direction = ['slide','cover','reveal'], 
     anim_without_direciton = ['fade','pop', 'flip'], 
     anims = anim_with_direction.concat(anim_without_direciton), 
     anim, 
     type = anims[0], 
     direction; 
    if(anim_with_direction.indexOf(type) != -1){ 
     direction = ['left','right','up','down'][Math.floor(Math.random()*4)]; 
     anim = {type:type,direction:direction}; 
    }else{ 
     anim = {type:type}; 
    } 
    this.getLayout().setAnimation(anim); 
    } 
}