facebook廣告





123

2017年1月28日 星期六

android animator 动画

http://blog.csdn.net/luhuajcdd/article/details/8731425

animator 动画

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

Android中动画分两种方式:

一种方式是补间动画Tween Animation,就是说你定义一个开始和结束,中间的部分由程序运算得到。
另一种叫逐帧动画Frame Animation,就是说一帧一帧的连起来播放就变成了动画。

动画可以实现的效果
 1. 移动(Translation)
 2. 透明度(alpha)
 3. 旋转(rotate)
 4. 缩放 (scale)

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

1. 移动(Translation)
     
    主要代码
[java] view plain copy
  1. AnimatorSet set = new AnimatorSet() ;              
  2.         ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "translationX", -500f, 0f);  
  3.         anim.setDuration(2000);  
  4.         ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "translationX", 0f, -500f);  
  5.         anim3.setDuration(2000);  
  6.         ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "translationY", 0f, -500f);  
  7.         anim2.setDuration(2000);  
  8.         ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "translationY", -500f, 0f);  
  9.         anim4.setDuration(2000);  
  10.           
  11.           
  12.         AnimatorSet set3 = new AnimatorSet();  
  13.         set3.play(anim4).before(anim3) ;  
  14.         AnimatorSet set2 = new AnimatorSet();  
  15.         set2.play(anim2).before(set3) ;  
  16.         set.play(anim).before(set2);  
  17.         set.start();  
讲解:anim 是从-500f 位置移动到当前位置(X轴); 
    anim3是从当前位置移动到-500f的位置(X轴);
    anim2是从当前位置移动-500f的位置(Y轴);
    anim 4是从-500f 位置移动到当前位置(Y轴); 
   
[java] view plain copy
  1. AnimatorSet set3 = new AnimatorSet();  
  2.         set3.play(anim4).before(anim3) ;  
  3.         AnimatorSet set2 = new AnimatorSet();  
  4.         set2.play(anim2).before(set3) ;  
  5.         set.play(anim).before(set2);  
  6.         set.start();  
         这样做的目的是为了,让目标view移动一个来回,从哪里出发, 最后回到出发的位置。  

2. 透明度(alpha)
主要代码
[java] view plain copy
  1. AnimatorSet set = new AnimatorSet() ;  
  2.         ObjectAnimator anim = ObjectAnimator.ofFloat(phone, "alpha", 1f, 0f);  
  3.         anim.setDuration(2000);  
  4.         ObjectAnimator anim2 = ObjectAnimator.ofFloat(phone, "alpha", 0f, 1f);  
  5.         anim2.setDuration(2000);  
  6.         set.play(anim).before(anim2) ;  
  7.         set.start();  

讲解: anim 从可见到不可见;
     anim 从不可见到可见;
 3. 旋转(rotate)
主要代码
[java] view plain copy
  1. AnimatorSet set = new AnimatorSet() ;              
  2.         ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "rotationX", 0f, 180f);  
  3.         anim.setDuration(2000);  
  4.         ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "rotationX", 180f, 0f);  
  5.         anim2.setDuration(2000);  
  6.         ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "rotationY", 0f, 180f);  
  7.         anim3.setDuration(2000);  
  8.         ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "rotationY", 180f, 0f);  
  9.         anim4.setDuration(2000);  
  10.           
  11.         set.play(anim).before(anim2);  
  12.         set.play(anim3).before(anim4) ;  
  13.         set.start();  

讲解:anim 从0度转180度(X轴)
            anim2从180度转0度(X轴)
            anim3从0度转180度(Y轴)
            anim4从180度转0度(Y轴)

[java] view plain copy
  1. set.play(anim).before(anim2);  
  2.         set.play(anim3).before(anim4) ;  
这样写X和Y会同时旋转



 4. 缩放 (scale)
主要代码
[java] view plain copy
  1. AnimatorSet set = new AnimatorSet() ;              
  2.         ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "scaleX", 1f);  
  3.         anim.setDuration(1000);  
  4.         ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "scaleX"0.5f);  
  5.         anim2.setDuration(1000);  
  6.         ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "scaleY", 1f);  
  7.         anim3.setDuration(1000);  
  8.         ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "scaleY"0.5f);  
  9.         anim4.setDuration(1000);  
  10.           
  11.         ObjectAnimator anim5 = ObjectAnimator .ofFloat(phone, "scaleX"0.5f);  
  12.         anim5.setDuration(1000);  
  13.         ObjectAnimator anim6 = ObjectAnimator .ofFloat(phone, "scaleX",  1f);  
  14.         anim6.setDuration(1000);  
  15.         ObjectAnimator anim7 = ObjectAnimator .ofFloat(phone, "scaleY",0.5f);  
  16.         anim7.setDuration(1000);  
  17.         ObjectAnimator anim8 = ObjectAnimator .ofFloat(phone, "scaleY",  1f);  
  18.         anim8.setDuration(1000);  
  19.           
  20.         AnimatorSet set3 = new AnimatorSet() ;   
  21.         set3.play(anim5).before(anim6);  
  22.         AnimatorSet set2 = new AnimatorSet() ;    
  23.         set2.play(anim2).before(set3) ;  
  24.            
  25.           
  26.         AnimatorSet set4 = new AnimatorSet() ;    
  27.         set4.play(anim7).before(anim8) ;  
  28.         AnimatorSet set5 = new AnimatorSet() ;    
  29.         set5.play(anim4).before(set4);  
  30.           
  31.         set.play(anim).before(set2);  
  32.         set.play(anim3).before(set5) ;  
  33.         set.start();  



讲解:anim 从原来大小开始(X轴)
            anim2 缩放到原来的1/2(X轴)
            anim3从原来大小开始(Y轴)
            anim4 缩放到原来的1/2(Y轴)
            anim5从原来的1/2开始放大(X轴)
            anim6放大到原来的大小(X轴)
            anim7从原来的1/2开始放大(Y轴)
            anim8放大到原来的大小(Y轴)

沒有留言:

張貼留言