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']基本上，当用户切换卡片时，它会在;中为 tabpanel 的布局设置一个新的随机动画。

通过添加方向参数的处理随意贡献

[更新] 手柄方向

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