基于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自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
js实现照片墙功能实例
Feb 05 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
canvas知识总结
Jan 25 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
简单了解常用的JavaScript 库
Jul 16 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
php中将数组存到文件里的实现代码
2012/01/19 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python本地与全局命名空间用法实例
2015/06/16 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
社区服务活动总结
2014/05/07 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android