码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-04-27 08:16:27      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

先来看效果

技术分享

这是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

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

标签:

原文地址:http://www.cnblogs.com/andbut/p/5437405.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!