基于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中valueOf与toString区别浅析
Mar 19 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
javascript的函数作用域
Nov 12 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 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
smtp邮件发送一例
2006/10/09 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
javascript常用的方法分享
2015/07/01 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Sanic框架流式传输操作示例
2018/07/18 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
WxPython实现无边框界面
2019/11/18 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
小区门卫工作职责
2013/12/14 职场文书
我的梦想演讲稿
2014/04/30 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
校园运动会广播稿
2014/10/06 职场文书
教师师德承诺书2016
2016/03/25 职场文书
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技