首页 > 其他 > 详细

sencha touch2 动画问题

时间:2014-02-28 10:40:52      阅读:310      评论:0      收藏:0      [点我收藏+]

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

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

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

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

bubuko.com,布布扣
/**
     * 重载跳转方法
     */
    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);
            }
        }})
    }
bubuko.com,布布扣

 

大致逻辑:

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

 

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

bubuko.com,布布扣
Ext.Viewport.remove(Ext.Viewport.getActiveItem(),true)
bubuko.com,布布扣

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

sencha touch2 动画问题,布布扣,bubuko.com

sencha touch2 动画问题

原文:http://www.cnblogs.com/Brose/p/sencha_back_button.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!