基于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中bind函数的作用实例介绍

    javascript中bind函数的作用实例介绍

    bind()的方法在ie,6,7,8中不适用,需要扩展通过扩展Function prototype可以实现此方法,下面为大家介绍下javascript中bind函数的作用
    2014-09-09
  • 基于JS模仿windows文件按名称排序效果

    基于JS模仿windows文件按名称排序效果

    这篇文章主要介绍了基于JS实现模仿windows文件按名称排序的相关资料,主要是对数字的处理操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript两个变量交换值的实现方法

    JavaScript两个变量交换值的实现方法

    本文主要介绍了JavaScript两个变量交换值(不使用临时变量)的实现方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • Bootstrap实现可折叠分组侧边导航菜单

    Bootstrap实现可折叠分组侧边导航菜单

    这篇文章主要介绍了Bootstrap实现可折叠分组侧边导航菜单的相关资料,需要的朋友可以参考下
    2018-03-03
  • js图片处理示例代码

    js图片处理示例代码

    这篇文章主要介绍了js图片处理过程中的一个示例,需要的朋友可以参考下
    2014-05-05
  • Websocket 向指定用户发消息的方法

    Websocket 向指定用户发消息的方法

    这篇文章主要介绍了Websocket 向指定用户发消息的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JS+CSS实现超漂亮的动态翻书效果(思路详解)

    JS+CSS实现超漂亮的动态翻书效果(思路详解)

    我们平常冲浪时是不是看过一些学校高级的录取通知书,翻开通知书就能看见里面的内容,呈现出逼真的3D效果,本文带领大家基于JS+CSS实现超漂亮的动态翻书效果,需要的朋友可以参考下
    2023-05-05
  • JS中onpropertychange和onchange事件区别小结

    JS中onpropertychange和onchange事件区别小结

    当一个HTML元素的属性用js改变的时候,都能通过onpropertychange来捕获。例如一个文本text对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。
    2010-07-07
  • JS网络游戏-(模拟城市webgame)提供的一些例子下载

    JS网络游戏-(模拟城市webgame)提供的一些例子下载

    JS网络游戏-(模拟城市webgame)提供的一些例子下载...
    2007-10-10
  • js常用代码段整理

    js常用代码段整理

    以下是平时收集的几个常用代码段,大多数是从网上搜集而来。也均为未找到是谁谁原创,是否允许转载等要求, 所以如果看到的朋友发现其中有些代码是自己写的,还请原谅在下转帖出来
    2011-11-11

最新评论