基于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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
解读ES6中class关键字
Nov 20 Javascript
Nest.js 授权验证的方法示例
Feb 22 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
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
房屋改造计划书
2014/01/10 职场文书
教师师德反思材料
2014/02/15 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
校车安全责任书
2014/08/25 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript