基于JS实现Android,iOS一个手势动画效果

 更新时间:2016年04月27日 09:42:39   作者:AndButcher  
这篇文章主要介绍了基于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和HTML实现一个精美的计算器

    使用JavaScript和HTML实现一个精美的计算器

    计算器是我们日常生活中经常使用的工具之一,可以帮助我们进行简单的数学运算,在本博文中,我将使用JavaScript编写一个漂亮的计算器,并添加加减乘除功能,感兴趣的同学可以自己动手尝试一下
    2023-09-09
  • BootStrapTable服务器分页实例解析

    BootStrapTable服务器分页实例解析

    项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了bootstrapTable的js插件,个人觉得这个框架非常好用,支持服务器端分页,此篇主要写的主要是关于服务器分页,需要的朋友可以参考下
    2016-12-12
  • 一篇文章教你用JavaScript使用流程控制打印九九乘法表

    一篇文章教你用JavaScript使用流程控制打印九九乘法表

    这篇文章主要为大家详细介绍了JavaScript使用流程控制打印九九乘法表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 使用JS 清空File控件的路径值

    使用JS 清空File控件的路径值

    今天Test时发现一个小问题,上传控件完成后,路径还保留,为了清除,需要想一些办法
    2013-07-07
  • 微信小程序五星评分效果实现代码

    微信小程序五星评分效果实现代码

    这篇文章主要介绍了微信小程序五星评分效果实现代码的相关资料,需要的朋友可以参考下
    2017-04-04
  • JavaScript中关于递归与回溯的实例详解

    JavaScript中关于递归与回溯的实例详解

    这篇文章主要将为大家介绍一下JavaScript中递归与回溯的原理及使用,文中通过一些例题进行了详细介绍,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-07-07
  • RequireJS用法简单示例

    RequireJS用法简单示例

    这篇文章主要介绍了RequireJS用法,结合简单实例形式分析了RequireJS项目文件结构、相关操作技巧与注意事项,需要的朋友可以参考下
    2018-08-08
  • JavaScript中常见的七种继承及实现

    JavaScript中常见的七种继承及实现

    JS的继承方式在我们面试的时候经常会被问到,所以深入理解js继承方式以及它们的优缺点是非常有必要的。本文为大家整理了JavaScript中常见的七种继承及实现,需要的可以参考一下
    2023-03-03
  • JS实现的图片预览插件与用法示例【不上传图片】

    JS实现的图片预览插件与用法示例【不上传图片】

    这篇文章主要介绍了JS实现的图片预览插件与用法,基于自定义插件uploadPreview.js实现图片的预览功能,不需要进行图片的上传,非常简便实用,需要的朋友可以参考下
    2016-11-11
  • 利用location.hash实现跨域iframe自适应

    利用location.hash实现跨域iframe自适应

    其他一些类似js跨域操作问题也可以按这个思路去解决,需要的朋友可以测试下。
    2010-05-05

最新评论