android animator 动画

转载

mob604756e92c53 2013-03-28 20:05:00

文章标签 缩放下载地址 javascript 用例代码实现 文章分类 JavaScript 前端开发

animator 动画

动画的作用是让UI有动感，看上去时尚。

Android中动画分两种方式：

一种方式是补间动画Tween Animation，就是说你定义一个开始和结束，中间的部分由程序运算得到。

另一种叫逐帧动画Frame Animation，就是说一帧一帧的连起来播放就变成了动画。

动画可以实现的效果：

1. 移动(Translation)

2. 透明度(alpha)

3. 旋转（rotate）

4. 缩放 (scale)

现在分别用例子来讲解：以下的实现都是用代码实现的(ObjectAnimator)

1. 移动(Translation)

主要代码

AnimatorSet set = new AnimatorSet() ;            
    ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "translationX", -500f, 0f);
    anim.setDuration(2000);
    ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "translationX", 0f, -500f);
    anim3.setDuration(2000);
    ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "translationY", 0f, -500f);
    anim2.setDuration(2000);
    ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "translationY", -500f, 0f);
    anim4.setDuration(2000);


    AnimatorSet set3 = new AnimatorSet();
    set3.play(anim4).before(anim3) ;
    AnimatorSet set2 = new AnimatorSet();
    set2.play(anim2).before(set3) ;
    set.play(anim).before(set2);
    set.start();

讲解：anim 是从-500f 位置移动到当前位置（X轴）；

anim3是从当前位置移动到-500f的位置（X轴）；

anim2是从当前位置移动-500f的位置(Y轴)；

anim 4是从-500f 位置移动到当前位置（Y轴）；

AnimatorSet set3 = new AnimatorSet();
    set3.play(anim4).before(anim3) ;
    AnimatorSet set2 = new AnimatorSet();
    set2.play(anim2).before(set3) ;
    set.play(anim).before(set2);
    set.start();

这样做的目的是为了，让目标view移动一个来回，从哪里出发，最后回到出发的位置。

2. 透明度(alpha)

主要代码

AnimatorSet set = new AnimatorSet() ;
    ObjectAnimator anim = ObjectAnimator.ofFloat(phone, "alpha", 1f, 0f);
    anim.setDuration(2000);
    ObjectAnimator anim2 = ObjectAnimator.ofFloat(phone, "alpha", 0f, 1f);
    anim2.setDuration(2000);
    set.play(anim).before(anim2) ;
    set.start();

讲解： anim 从可见到不可见；

anim 从不可见到可见；

3. 旋转（rotate）

主要代码

AnimatorSet set = new AnimatorSet() ;            
    ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "rotationX", 0f, 180f);
    anim.setDuration(2000);
    ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "rotationX", 180f, 0f);
    anim2.setDuration(2000);
    ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "rotationY", 0f, 180f);
    anim3.setDuration(2000);
    ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "rotationY", 180f, 0f);
    anim4.setDuration(2000);

    set.play(anim).before(anim2);
    set.play(anim3).before(anim4) ;
    set.start();

讲解：anim 从0度转180度(X轴)

anim2从180度转0度(X轴)

anim3从0度转180度(Y轴)

anim4从180度转0度(Y轴)

set.play(anim).before(anim2);
    set.play(anim3).before(anim4) ;

这样写X和Y会同时旋转

4. 缩放 (scale)

主要代码

AnimatorSet set = new AnimatorSet() ;            
    ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "scaleX", 1f);
    anim.setDuration(1000);
    ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "scaleX", 0.5f);
    anim2.setDuration(1000);
    ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "scaleY", 1f);
    anim3.setDuration(1000);
    ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "scaleY", 0.5f);
    anim4.setDuration(1000);

    ObjectAnimator anim5 = ObjectAnimator .ofFloat(phone, "scaleX", 0.5f);
    anim5.setDuration(1000);
    ObjectAnimator anim6 = ObjectAnimator .ofFloat(phone, "scaleX",  1f);
    anim6.setDuration(1000);
    ObjectAnimator anim7 = ObjectAnimator .ofFloat(phone, "scaleY",0.5f);
    anim7.setDuration(1000);
    ObjectAnimator anim8 = ObjectAnimator .ofFloat(phone, "scaleY",  1f);
    anim8.setDuration(1000);

    AnimatorSet set3 = new AnimatorSet() ; 
    set3.play(anim5).before(anim6);
    AnimatorSet set2 = new AnimatorSet() ;  
    set2.play(anim2).before(set3) ;


    AnimatorSet set4 = new AnimatorSet() ;  
    set4.play(anim7).before(anim8) ;
    AnimatorSet set5 = new AnimatorSet() ;  
    set5.play(anim4).before(set4);

    set.play(anim).before(set2);
    set.play(anim3).before(set5) ;
    set.start();