android手势控制动画,轻松实现Android,iOS的一个手势动画效果

先来看效果

c63892772e727bc9fe7575b536b63035.gif

这是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[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[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");

});

});

完全的项目代码参考:https://github.com/do-project/code4do/tree/master/demoECode

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值