sencha touch2 动画问题

最近在review一个项目的代码,

发现返回操作比较乱,很多"从哪里来,到哪里去的操作"被写的一塌糊涂;

按照ios系统的进场出场动画(人家的体验还是很好的,必须借鉴)为标准,使用sencha模拟一套动画,

来看看以下是两个函数,作为重载:

/**
     * 重载跳转方法
     */
    gotoFn=function(){
        console.log("进入gotoFn函数.......arguments:")
        console.log(arguments);
        console.log("arguments.length===="+arguments.length)
//        if(arguments.length>1){
//            throw new Error("undefined function....")
//            return false;
//        }

        //@activeItem获取当前活动的Item,@requestItem目标Item,@direction动画方向
        //根据参数的个数来判定是指定Item跳转,还是单一的"返回"操作,
        //如果传入参数,arguments表示参数Array;没有传入参数arguments表示当前事件中的对象Array,所以判断条件,为1,2所示
        var activeItem=Ext.Viewport.getActiveItem(),
                requestItem =arguments.length==1?arguments[0]:(Ext.Viewport.getInnerItems().length - 2),//1
                directionStr=arguments.length==1?"left":"right";//2
        Ext.Viewport.animateActiveItem(requestItem, {type: "slide", direction: directionStr, listeners: {
            animationend: function () {
                Ext.Viewport.remove(activeItem, true);
            }
        }})
    }

 

大致逻辑:

当点击返回按钮时,获取当前活动的Item,然后计算上一个Item的id,最后将上一个Item动画载入的同时,监听动画完毕事件(animationed),将当前活动的Item移除.

 

值得一说的是(其实是我偶然发现的....哈哈).如果"返回操作"单一的将当前的活动Item移除的话,Sencha会默认出一个转场动画.如下代码:

Ext.Viewport.remove(Ext.Viewport.getActiveItem(),true)

这里默认动画的方向为用户指定过的方向(上一个动画如果向左,这个动画就向左...............)

 

转载于:https://www.cnblogs.com/Brose/p/sencha_back_button.html