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

如何在更改sencha touch 2中的Tab面板上设置随机动画？

1 个答案: