animation - sencha touch 2 でタブパネルを変更する際にランダムなアニメーションを設定するには?

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

基本的に、ユーザーがカードを切り替えると、タブパネルのレイアウトに新しいランダム アニメーションが設定され['slide','fade','cover','reveal','pop', 'flip']ます。

方向パラメータの処理を追加して、自由に貢献してください

【UPDATE】ハンドルの向き

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