基于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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
js 字符串操作函数
Jul 25 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
微信小程序8种数据通信的方式小结
Feb 03 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结束标签的使用细节探讨及联想
2013/03/04 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
在centos7中分布式部署pyspider
2017/05/03 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
超实用的 30 段 Python 案例
2019/10/10 Python
python生成器用法实例详解
2019/11/22 Python
Python class的继承方法代码实例
2020/02/14 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
实习期自我鉴定
2013/10/11 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
暑假打工感想
2015/08/07 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle