基于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 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
canvas绘制的直线动画
Jan 23 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
如何手写简易的 Vue Router
Oct 10 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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 魔术函数使用说明
2010/05/14 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
JS隐藏参数post传值实例
2013/04/18 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
python使用pymysql实现操作mysql
2016/09/13 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
python实现快递价格查询系统
2020/03/03 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
Django nginx配置实现过程详解
2020/09/10 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
电脑租赁公司创业计划书
2014/01/08 职场文书
出国英文推荐信
2014/05/10 职场文书
教师节寄语2015
2015/03/23 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL
css3 选择器
2022/05/11 HTML / CSS