基于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 函数式编程
Aug 16 Javascript
js 操作css实现代码
Jun 11 Javascript
jquery 图片轮换效果
Jul 29 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
Element-ui upload上传文件限制的解决方法
Jan 22 Javascript
一起深入理解js中的事件对象
Feb 06 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP的宝库目录--PEAR
2006/10/09 PHP
source.php查看源文件
2006/12/09 PHP
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
python线程池的实现实例
2013/11/18 Python
Python ftp上传文件
2016/02/13 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python求最大连续子数组的和
2018/07/07 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
《分一分》教学反思
2014/04/13 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
教师党员个人总结
2015/02/10 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
毕业欢送会致辞
2015/07/29 职场文书
Python OpenCV实现图形检测示例详解
2022/04/08 Python