基于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工具 Event封装
Aug 21 Javascript
jquery禁用右键示例
Apr 28 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
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/07/17 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python实现名片管理系统
2018/11/29 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
django序列化serializers过程解析
2019/12/14 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
测绘工程专业个人自我评价
2013/12/01 职场文书
就业协议书怎么填
2014/09/15 职场文书
2014年检验员工作总结
2014/11/19 职场文书
为自己工作观后感
2015/06/11 职场文书
学校学期工作总结
2015/08/13 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python