zoukankan      html  css  js  c++  java
  • 多个动画组合、动画调整顺序

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


    Android中动画分两种方式:


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

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


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


    1. 移动(Translation)
        
        主要代码[java]
    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(); 

    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轴);

       [java]
    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(); 

    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)

    主要代码
    [java]
    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(); 

    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)
    主要代码

    [java]
    nimatorSet 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(); 

    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轴)


    [java]
    set.play(anim).before(anim2); 
            set.play(anim3).before(anim4) ; 

    set.play(anim).before(anim2);
      set.play(anim3).before(anim4) ;这样写X和Y会同时旋转


     4. 缩放 (scale)

    主要代码

    [java]
    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(); 

    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();


    讲解:anim 从原来大小开始(X轴)

                anim2 缩放到原来的1/2(X轴)
                anim3从原来大小开始(Y轴)

                anim4 缩放到原来的1/2(Y轴)

                anim5从原来的1/2开始放大(X轴)

                anim6放大到原来的大小(X轴)

                anim7从原来的1/2开始放大(Y轴)

                anim8放大到原来的大小(Y轴)

    请注明出处,此文档来自“善思善学”。
  • 相关阅读:
    [翻译] M13ProgressSuite
    控制器转场动画详解
    [翻译] SIAlertView
    隐藏导航栏之后支持手势退回上一个控制器
    UIView的无损截图
    [翻译] UIColor-uiGradientsAdditions
    简化通知中心的使用
    Java Web应用的开发环境配置
    StartUML的基础的使用,用例图,序列图
    SQLyog图形化l数据库的操作和学习
  • 原文地址:https://www.cnblogs.com/gtgl/p/3907222.html
Copyright © 2011-2022 走看看