基于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 cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
js原型链原理看图说明
2012/07/07 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
深入理解js promise chain
2016/05/05 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
js动态生成表格(节点操作)
2021/01/12 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
介绍一下#error预处理
2015/09/25 面试题
介绍一下linux的文件权限
2014/07/20 面试题
初中生物教学反思
2014/01/10 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
办理收楼委托书范本
2014/10/09 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
2015年试用期工作总结
2014/12/12 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
基于redis+lua进行限流的方法
2022/07/23 Redis