基于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 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
JS+CSS实现过渡特效
Jan 02 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中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
php命令行写shell实例详解
2018/07/19 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript prototype 原型链
2009/03/12 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
JS中的三个循环小结
2017/06/20 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
简单实现python聊天程序
2018/04/01 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
Python实现数值积分方式
2019/11/20 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
优秀教师感人事迹材料
2014/05/04 职场文书
爱护花草树木的标语
2014/06/11 职场文书
2014年统战工作总结
2014/12/09 职场文书
先进党支部事迹材料
2014/12/24 职场文书
php修改word的实例方法
2021/11/17 PHP