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),//
directionStr=arguments.length==1?"left":"right";//
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)
这里默认动画的方向为用户指定过的方向(上一个动画如果向左,这个动画就向左...............)
sencha touch2 动画问题的更多相关文章
- 【翻译】Sencha Touch2.4 The Layout System 布局
[翻译]The Layout System 布局 In Sencha Touch there are two basic building blocks: componentsand containe ...
- Sencha Touch2 工作笔记
Sencha Touch2 工作笔记 Ext.dataview.List activate( this, newActiveItem, oldActiveItem, eOpts ) Fires whe ...
- Sencha Touch2 -- 11.1:定义具有关联关系的模型
在Sencha Touch2.0中,可以定义不同模型之间的关联关系.例如,在开发博客网站的时候,可以首先定义用户(User)模型,然后为用户定义文章(Article)模型.一个用户可以发表多篇文章,因 ...
- Sencha Touch2 时间轴ListPanel
直接贴代码 timeline.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- Cordova3+sencha touch2.x 环境搭建
1.安装 nodejs 2.安装 cordova: npm install -g cordova 3.创建一个工程: cordova create MyApp com.example.MyApp My ...
- [转]使用Sencha Ext JS 6打造通用应用程序
原文地址:http://www.uedsc.com/using-sencha-ext-js-6-to-build-universal-apps.html 在Sencha和整个Ext JS团队的支持下, ...
- Sencha Cmd是什么
Sencha Cmd的简介 ~~~~~~~~~~~~~~~~~~~~~~~ Sencha cmd 是一个跨平台的命令行工具,它从你应用程序的新创建到部署入产品中的整个生命周期都提供了许多自动化的执行任 ...
- html5外包—长年承接html5外包业务:《Sencha Touch权威指南》下载
<Sencha Touch权威指南>内容简介:如何才能全面而透彻地理解和掌握移动应用开发框架Sencha Touch并开发出令人心动的移动应用?<Sencha Touch权威指南&g ...
- JavaScript开发之路01(初识Sencha Touch框架)
一.SenchaTouch的hello world实例: Ext.application({ name:'myapp', icon:'images/icon.png', glossOnIcon:fal ...
随机推荐
- C盘清理大作战
C盘会随着使用时间慢慢变满(即使你不在C盘装程序),下面就记录几个C盘清理的方法: 1.使用清理软件清理C盘(360卫视,腾讯管家) 2.转移虚拟内存:计算机右键属性——高级管理设置——高级——性能- ...
- Delphi中的四舍五入函数
一.Delphi中的四舍五入法 四舍五入是一种应用非常广泛的近似计算方法,针对不同的应用需求,其有算术舍入法和银行家舍入法两种. 所谓算术舍入法,就是我们通常意义上的四舍五入法.其规则 ...
- 简单的异步任务工具——rq 的使用教程
rq是一个简单的,轻量级的异步任务工具. 如果在网站中用户发起一个用时很久(大于2分钟)的请求,如果用同步的方式,服务器就会返回超时. 这时候就需要用异步请求,用户发起请求后,服务端把作业扔给另一个进 ...
- NSInvocation的使用(转)
转载自:http://www.cnblogs.com/pengyingh/articles/2359199.html http://blog.iosxcode4.com/?p=125 在 iOS中可以 ...
- linux grep、find 命令详解
grep1.作用grep命令可以指定文件中搜索特定的内容,并将含有这些内容的行标准输出.grep全称是Global Regular Expression Print,表示全局正则表达式版本,它的使用权 ...
- 第一个js面向对象的小实验
$.extend({ cal: function (num1,num2,oper,aftercal) { this.n1 = num1; ...
- ios登陆界面
代码较老,仅供参考 主要涉及的功能点有: 1.密码输入框要隐藏输入字符,以黑点代替,有时候会在边上设置一个按钮,让用户选择是否需要密文输入 2.Login时会检查输入框,若输入不合法,弹窗提示用户 3 ...
- 小啃机器学习(1)-----ID3和C4.5决策树
第一部分:简介 ID3和C4.5算法都是被Quinlan提出的,用于分类模型,也被叫做决策树.我们给一组数据,每一行数据都含有相同的结构,包含了一系列的attribute/value对. 其中一个属性 ...
- 设置Cookie
var Site=new Object(); Site.Cookie={ _expires:24*3600*1000, _domain:'.gdxxb.com', set:function(name, ...
- 团体程序设计天梯赛-练习集L2-003. 月饼
L2-003. 月饼 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不 ...