您的位置:首页 > 移动开发 > Android开发

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

2016-04-27 00:00 531 查看
先来看效果



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

完全的项目代码参考:https://github.com/do-project/code4do/tree/master/demoECode
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: