基于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 相关文章推荐
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
js实现右键菜单功能
Nov 28 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
JS中的多态实例详解
Oct 15 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 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 htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
JS的数组迭代方法
2015/02/05 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
Python内置函数delattr的具体用法
2017/11/23 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
django主动抛出403异常的方法详解
2019/01/04 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
师范生自我鉴定范文
2013/10/05 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
化学教师自荐信范文
2013/12/28 职场文书
中文师范生自荐信
2014/01/30 职场文书
粗加工管理制度
2014/02/04 职场文书
交通事故调解协议书
2014/04/16 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
民事纠纷协议书
2016/03/23 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
python字符串常规操作大全
2021/05/02 Python