基于JS实现Android,iOS一个手势动画效果


Posted in Javascript onApril 27, 2016

废话不多说了,先给大家展示下效果图:

基于JS实现Android,iOS一个手势动画效果

这是iOS下的效果,android下完全一致。通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果,还支持声音效果。

下面是主要的代码

//index.ui.js
var do_Animator1 = mm("do_Animator");
do_Animator1.append(500, {
y: -1334,
curve:"Linear"
});
var do_Animator2 = mm("do_Animator");
do_Animator2.append(500, {
y: 0,
curve:"Linear"
});
do_Page.on("NextPagemoveing", function(){
currentView=json_define[currentIndex].view;
currentIndex++;
if (currentIndex>=json_define.length) currentIndex=0;
nextView=json_define[currentIndex].view;
for(var i=0;i<json_define.length;++i){
if (json_define[i].view != currentView && json_define[i].view != nextView){
json_define[i].view.visible=false;
}
else{
json_define[i].view.visible=true;
}
}
currentView.fire("closingBottom", "NextPagemove");
});
do_Page.on("NextPagemove", function(){
nextView.fire("initMoving", "NextPagemoved");
});
do_Page.on("NextPagemoved", function(){
currentView.y= 0;
nextView.y= 1332;
do_ALayout_main.y=0;
do_ALayout_main.redraw();
do_ALayout_main.animate(do_Animator1, function(){
nextView.fire("opening");
});
});
do_Page.on("PrePagemoveing", function(){
currentView=json_define[currentIndex].view;
currentIndex--;
if (currentIndex<0) currentIndex=json_define.length -1;
nextView=json_define[currentIndex].view;
currentView.fire("closingHead", "PrePagemove");
});
do_Page.on("PrePagemove", function(){
nextView.fire("initMoving", "PrePagemoved"); 
});
do_Page.on("PrePagemoved", function(){
for(var i=0;i<json_define.length;++i){
if (json_define[i].view != currentView && json_define[i].view != nextView){
json_define[i].view.visible=false;
}
else{
json_define[i].view.visible=true;
}
}
currentView.y= 1332;
nextView.y= 0;
do_ALayout_main.y=-1334;
do_ALayout_main.redraw();
do_ALayout_main.animate(do_Animator2, function(){
nextView.fire("opening");
});
});
Javascript 相关文章推荐
JavaScript对象学习经验整理
Oct 12 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
vue导出html、word和pdf的实现代码
Jul 31 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
requireJS使用指南
Apr 27 #Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 #Javascript
浏览器兼容的JS写法总结
Apr 27 #Javascript
Vue.js基础知识汇总
Apr 27 #Javascript
JS onkeypress兼容性写法详解
Apr 27 #Javascript
使用vue.js开发时一些注意事项
Apr 27 #Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 #Javascript
You might like
轻松修复Discuz!数据库
2008/05/03 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
Python实现控制台输入密码的方法
2015/05/29 Python
Python 数据结构之旋转链表
2017/02/25 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Django中FilePathField字段的用法
2020/05/21 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
static关键字的用法
2013/10/07 面试题
什么是View State?
2013/01/27 面试题
师范生实习自我鉴定
2013/11/01 职场文书
文明市民先进事迹
2014/05/15 职场文书
要账委托书范本
2014/09/15 职场文书
客房服务员岗位职责
2015/02/09 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
班主任工作总结范文
2015/08/13 职场文书