[关闭]
@coder-pig 2015-11-17T20:17:19.000000Z 字数 11206 阅读 1685

Android基础入门教程——8.4.3 Android动画合集之属性动画-初见

Android基础入门教程

本节引言：

本节给带来的是Android动画中的第三种动画——属性动画(Property Animation)，
记得在上一节Android基础入门教程——8.4.2 Android动画合集之补间动画为Fragment
设置过渡动画的时候，说过，App包和V4包下的Fragment调用setCustomAnimations()对应的
动画类型是不一样的，v4包下的是Animation，而app包下的是Animator；
Animation一般动画就是我们前面学的帧动画和补间动画！Animator则是本节要讲的属性动画！
关于属性动画，大牛郭大叔已经写了三篇非常好的总结文，写得非常赞，就没必要重复造轮子了，
不过这里还是过一遍，大部分内容参考的下面三篇文章：
Android属性动画完全解析(上)，初识属性动画的基本用法
Android属性动画完全解析(中)，ValueAnimator和ObjectAnimator的高级用法
Android属性动画完全解析(下)，Interpolator和ViewPropertyAnimator的用法
写的非常好，或者说你可以直接跳过本文去看上面的三篇文章~
当然，你愿意看我叨叨逼的话，也很欢迎，好了，开始本节内容吧~

1.属性动画概念叨叨逼

不BB，直接上图，就是这么暴力~

2.ValueAnimator简单使用

使用流程：

  • 1.调用ValueAnimator的ofInt()，ofFloat()或ofObject()静态方法创建ValueAnimator实例
  • 2.调用实例的setXxx方法设置动画持续时间，插值方式，重复次数等
  • 3.调用实例的addUpdateListener添加AnimatorUpdateListener监听器，在该监听器中
    可以获得ValueAnimator计算出来的值，你可以值应用到指定对象上~
  • 4.调用实例的start()方法开启动画！
    另外我们可以看到ofInt和ofFloat都有个这样的参数：float/int... values代表可以多个值！

使用示例：

代码实现：

布局文件：activity_main.xml，非常简单，四个按钮，一个ImageView

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:id="@+id/ly_root"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical">
  7.     <Button
  8.         android:id="@+id/btn_one"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:text="动画1" />
  13.     <Button
  14.         android:id="@+id/btn_two"
  15.         android:layout_width="wrap_content"
  16.         android:layout_height="wrap_content"
  17.         android:text="动画2" />
  19.     <Button
  20.         android:id="@+id/btn_three"
  21.         android:layout_width="wrap_content"
  22.         android:layout_height="wrap_content"
  23.         android:text="动画3" />
  25.     <Button
  26.         android:id="@+id/btn_four"
  27.         android:layout_width="wrap_content"
  28.         android:layout_height="wrap_content"
  29.         android:text="动画4" />
  31.     <ImageView
  32.         android:id="@+id/img_babi"
  33.         android:layout_width="wrap_content"
  34.         android:layout_height="wrap_content"
  35.         android:layout_gravity="center"
  36.         android:background="@mipmap/img_babi" />
  38. </LinearLayout>

接着到MainActivity.java，
首先需要一个修改View位置的方法，这里调用moveView()设置左边和上边的起始坐标以及宽高！
接着定义了四个动画，分别是：直线移动，缩放，旋转加透明，以及圆形旋转！
然后通过按钮触发对应的动画~

  1. public class MainActivity extends AppCompatActivity implements View.OnClickListener {
  3.     private Button btn_one;
  4.     private Button btn_two;
  5.     private Button btn_three;
  6.     private Button btn_four;
  7.     private LinearLayout ly_root;
  8.     private ImageView img_babi;
  9.     private int width;
  10.     private int height;
  12.     @Override
  13.     public void onCreate(Bundle savedInstanceState) {
  14.         super.onCreate(savedInstanceState);
  15.         setContentView(R.layout.activity_main);
  16.         bindViews();
  17.     }
  19.     private void bindViews() {
  20.         ly_root = (LinearLayout) findViewById(R.id.ly_root);
  21.         btn_one = (Button) findViewById(R.id.btn_one);
  22.         btn_two = (Button) findViewById(R.id.btn_two);
  23.         btn_three = (Button) findViewById(R.id.btn_three);
  24.         btn_four = (Button) findViewById(R.id.btn_four);
  25.         img_babi = (ImageView) findViewById(R.id.img_babi);
  27.         btn_one.setOnClickListener(this);
  28.         btn_two.setOnClickListener(this);
  29.         btn_three.setOnClickListener(this);
  30.         btn_four.setOnClickListener(this);
  31.         img_babi.setOnClickListener(this);
  32.     }
  34.     @Override
  35.     public void onClick(View v) {
  36.         switch (v.getId()) {
  37.             case R.id.btn_one:
  38.                 lineAnimator();
  39.                 break;
  40.             case R.id.btn_two:
  41.                 scaleAnimator();
  42.                 break;
  43.             case R.id.btn_three:
  44.                 raAnimator();
  45.                 break;
  46.             case R.id.btn_four:
  47.                 circleAnimator();
  48.                 break;
  49.             case R.id.img_babi:
  50.                 Toast.makeText(MainActivity.this, "不愧是coder-pig~", Toast.LENGTH_SHORT).show();
  51.                 break;
  52.         }
  53.     }
  56.     //定义一个修改ImageView位置的方法
  57.     private void moveView(View view, int rawX, int rawY) {
  58.         int left = rawX - img_babi.getWidth() / 2;
  59.         int top = rawY - img_babi.getHeight();
  60.         int width = left + view.getWidth();
  61.         int height = top + view.getHeight();
  62.         view.layout(left, top, width, height);
  63.     }
  66.     //定义属性动画的方法：
  68.     //按轨迹方程来运动
  69.     private void lineAnimator() {
  70.         width = ly_root.getWidth();
  71.         height = ly_root.getHeight();
  72.         ValueAnimator xValue = ValueAnimator.ofInt(height,0,height / 4,height / 2,height / 4 * 3 ,height);
  73.         xValue.setDuration(3000L);
  74.         xValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  75.             @Override
  76.             public void onAnimationUpdate(ValueAnimator animation) {
  77.                 // 轨迹方程 x = width / 2
  78.                 int y = (Integer) animation.getAnimatedValue();
  79.                 int x = width / 2;
  80.                 moveView(img_babi, x, y);
  81.             }
  82.         });
  83.         xValue.setInterpolator(new LinearInterpolator());
  84.         xValue.start();
  85.     }
  87.     //缩放效果
  88.     private void scaleAnimator(){
  90.         //这里故意用两个是想让大家体会下组合动画怎么用而已~
  91.         final float scale = 0.5f;
  92.         AnimatorSet scaleSet = new AnimatorSet();
  93.         ValueAnimator valueAnimatorSmall = ValueAnimator.ofFloat(1.0f, scale);
  94.         valueAnimatorSmall.setDuration(500);
  96.         ValueAnimator valueAnimatorLarge = ValueAnimator.ofFloat(scale, 1.0f);
  97.         valueAnimatorLarge.setDuration(500);
  99.         valueAnimatorSmall.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  100.             @Override
  101.             public void onAnimationUpdate(ValueAnimator animation) {
  102.                 float scale = (Float) animation.getAnimatedValue();
  103.                 img_babi.setScaleX(scale);
  104.                 img_babi.setScaleY(scale);
  105.             }
  106.         });
  107.         valueAnimatorLarge.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  108.             @Override
  109.             public void onAnimationUpdate(ValueAnimator animation) {
  110.                 float scale = (Float) animation.getAnimatedValue();
  111.                 img_babi.setScaleX(scale);
  112.                 img_babi.setScaleY(scale);
  113.             }
  114.         });
  116.         scaleSet.play(valueAnimatorLarge).after(valueAnimatorSmall);
  117.         scaleSet.start();
  119.         //其实可以一个就搞定的
  120. //        ValueAnimator vValue = ValueAnimator.ofFloat(1.0f, 0.6f, 1.2f, 1.0f, 0.6f, 1.2f, 1.0f);
  121. //        vValue.setDuration(1000L);
  122. //        vValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  123. //            @Override
  124. //            public void onAnimationUpdate(ValueAnimator animation) {
  125. //                float scale = (Float) animation.getAnimatedValue();
  126. //                img_babi.setScaleX(scale);
  127. //                img_babi.setScaleY(scale);
  128. //            }
  129. //        });
  130. //        vValue.setInterpolator(new LinearInterpolator());
  131. //        vValue.start();
  132.     }
  135.     //旋转的同时透明度变化
  136.     private void raAnimator(){
  137.         ValueAnimator rValue = ValueAnimator.ofInt(0, 360);
  138.         rValue.setDuration(1000L);
  139.         rValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  140.             @Override
  141.             public void onAnimationUpdate(ValueAnimator animation) {
  142.                 int rotateValue = (Integer) animation.getAnimatedValue();
  143.                 img_babi.setRotation(rotateValue);
  144.                 float fractionValue = animation.getAnimatedFraction();
  145.                 img_babi.setAlpha(fractionValue);
  146.             }
  147.         });
  148.         rValue.setInterpolator(new DecelerateInterpolator());
  149.         rValue.start();
  150.     }
  152.     //圆形旋转
  153.     protected void circleAnimator() {
  154.         width = ly_root.getWidth();
  155.         height = ly_root.getHeight();
  156.         final int R = width / 4;
  157.         ValueAnimator tValue = ValueAnimator.ofFloat(0,
  158.                 (float) (2.0f * Math.PI));
  159.         tValue.setDuration(1000);
  160.         tValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  161.             @Override
  162.             public void onAnimationUpdate(ValueAnimator animation) {
  163.                 // 圆的参数方程 x = R * sin(t) y = R * cos(t)
  164.                 float t = (Float) animation.getAnimatedValue();
  165.                 int x = (int) (R * Math.sin(t) + width / 2);
  166.                 int y = (int) (R * Math.cos(t) + height / 2);
  167.                 moveView(img_babi, x, y);
  168.             }
  169.         });
  170.         tValue.setInterpolator(new DecelerateInterpolator());
  171.         tValue.start();
  172.     }
  173. }

好的，使用的流程非常简单，先创建ValueAnimator对象，调用ValueAnimator.ofInt/ofFloat
获得，然后设置动画持续时间，addUpdateListener添加AnimatorUpdateListener事件监听，
然后使用参数animation的getAnimatedValue()获得当前的值，然后我们可以拿着这个值
来修改View的一些属性，从而形成所谓的动画效果，接着设置setInterpolator动画渲染模式，
最后调用start()开始动画的播放~
卧槽，直线方程，圆的参数方程，我都开始方了，这不是高数的东西么，
挂科学渣连三角函数都忘了...
例子参考自github：MoveViewValueAnimator

3.ObjectAnimator简单使用

比起ValueAnimator，ObjectAnimator显得更为易用，通过该类我们可以直接
对任意对象的任意属性进行动画操作！没错，是任意对象，而不单单只是View对象，
不断地对对象中的某个属性值进行赋值，然后根据对象属性值的改变再来决定如何展现
出来！比如为TextView设置如下动画：
ObjectAnimator.ofFloat(textview, "alpha", 1f, 0f);
这里就是不断改变alpha的值，从1f - 0f，然后对象根据属性值的变化来刷新界面显示，从而
展现出淡入淡出的效果，而在TextView类中并没有alpha这个属性，ObjectAnimator内部机制是：
寻找传输的属性名对应的get和set方法~，而非找这个属性值！
不信的话你可以到TextView的源码里找找是否有alpha这个属性！
好的，下面我们利用ObjectAnimator来实现四种补间动画的效果吧~

运行效果图：

代码实现：

布局直接用的上面那个布局，加了个按钮，把ImageView换成了TextView，这里就不贴代码了，
直接上MainActivity.java部分的代码，其实都是大同小异的~

  1. public class MainActivity extends AppCompatActivity implements View.OnClickListener {
  2.     private Button btn_one;
  3.     private Button btn_two;
  4.     private Button btn_three;
  5.     private Button btn_four;
  6.     private Button btn_five;
  7.     private LinearLayout ly_root;
  8.     private TextView tv_pig;
  9.     private int height;
  10.     private ObjectAnimator animator1;
  11.     private ObjectAnimator animator2;
  12.     private ObjectAnimator animator3;
  13.     private ObjectAnimator animator4;
  14.     private AnimatorSet animSet;
  16.     @Override
  17.     protected void onCreate(Bundle savedInstanceState) {
  18.         super.onCreate(savedInstanceState);
  19.         setContentView(R.layout.activity_main);
  20.         bindViews();
  21.         initAnimator();
  22.     }
  24.     private void bindViews() {
  25.         ly_root = (LinearLayout) findViewById(R.id.ly_root);
  26.         btn_one = (Button) findViewById(R.id.btn_one);
  27.         btn_two = (Button) findViewById(R.id.btn_two);
  28.         btn_three = (Button) findViewById(R.id.btn_three);
  29.         btn_four = (Button) findViewById(R.id.btn_four);
  30.         btn_five = (Button) findViewById(R.id.btn_five);
  31.         tv_pig = (TextView) findViewById(R.id.tv_pig);
  33.         height = ly_root.getHeight();
  34.         btn_one.setOnClickListener(this);
  35.         btn_two.setOnClickListener(this);
  36.         btn_three.setOnClickListener(this);
  37.         btn_four.setOnClickListener(this);
  38.         btn_five.setOnClickListener(this);
  39.         tv_pig.setOnClickListener(this);
  40.     }
  42.     //初始化动画
  43.     private void initAnimator() {
  44.         animator1 = ObjectAnimator.ofFloat(tv_pig, "alpha", 1f, 0f, 1f, 0f, 1f);
  45.         animator2 = ObjectAnimator.ofFloat(tv_pig, "rotation", 0f, 360f, 0f);
  46.         animator3 = ObjectAnimator.ofFloat(tv_pig, "scaleX", 2f, 4f, 1f, 0.5f, 1f);
  47.         animator4 = ObjectAnimator.ofFloat(tv_pig, "translationY", height / 8, -100, height / 2);
  48.     }
  50.     @Override
  51.     public void onClick(View v) {
  52.         switch (v.getId()) {
  53.             case R.id.btn_one:
  54.                 animator1.setDuration(3000l);
  55.                 animator1.start();
  56.                 break;
  57.             case R.id.btn_two:
  58.                 animator2.setDuration(3000l);
  59.                 animator2.start();
  60.                 break;
  61.             case R.id.btn_three:
  62.                 animator3.setDuration(3000l);
  63.                 animator3.start();
  64.                 break;
  65.             case R.id.btn_four:
  66.                 animator4.setDuration(3000l);
  67.                 animator4.start();
  68.                 break;
  69.             case R.id.btn_five:
  70.                 //将前面的动画集合到一起~
  71.                 animSet = new AnimatorSet();
  72.                 animSet.play(animator4).with(animator3).with(animator2).after(animator1);
  73.                 animSet.setDuration(5000l);
  74.                 animSet.start();
  75.                 break;
  76.             case R.id.tv_pig:
  77.                 Toast.makeText(MainActivity.this, "不愧是coder-pig~", Toast.LENGTH_SHORT).show();
  78.                 break;
  79.         }
  80.     }
  81. }

用法也非常简单，上面涉及到的组合动画我们下面讲~

4.组合动画与AnimatorListener

从上面两个例子中我们都体验了一把组合动画，用到了AnimatorSet这个类！
我们调用的play()方法，然后传入第一个开始执行的动画，此时他会返回一个Builder类给我们：

接下来我们可以调用Builder给我们提供的四个方法，来组合其他的动画：

  • after(Animator anim) 将现有动画插入到传入的动画之后执行
  • after(long delay) 将现有动画延迟指定毫秒后执行
  • before(Animator anim) 将现有动画插入到传入的动画之前执行
  • with(Animator anim) 将现有动画和传入的动画同时执行

嗯，很简单，接下来要说下动画事件的监听，上面我们ValueAnimator的监听器是
AnimatorUpdateListener，当值状态发生改变时候会回调onAnimationUpdate方法！
除了这种事件外还有：动画进行状态的监听~ AnimatorListener，我们可以调用addListener方法
添加监听器，然后重写下面四个回调方法：

  • onAnimationStart()：动画开始
  • onAnimationRepeat()：动画重复执行
  • onAnimationEnd()：动画结束
  • onAnimationCancel()：动画取消

没错，加入你真的用AnimatorListener的话，四个方法你都要重写，当然和前面的手势那一节一样，
Android已经给我们提供好一个适配器类：AnimatorListenerAdapter，该类中已经把每个接口
方法都实现好了，所以我们这里只写一个回调方法也可以额！

5.使用XML来编写动画

使用XML来编写动画，画的时间可能比Java代码长一点，但是重用起来就轻松很多！
对应的XML标签分别为：<animator><objectAnimator><set>
相关的属性解释如下：

  • android:ordering：指定动画的播放顺序：sequentially(顺序执行)，together(同时执行)
  • android:duration：动画的持续时间
  • android:propertyName="x"：这里的x，还记得上面的"alpha"吗？加载动画的那个对象里需要
    定义getx和setx的方法，objectAnimator就是通过这里来修改对象里的值的！
  • android:valueFrom="1" ：动画起始的初始值
  • android:valueTo="0" ：动画结束的最终值
  • android:valueType="floatType"：变化值的数据类型

使用例子如下：

①从0到100平滑过渡的动画：

  1. <animator xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:valueFrom="0"  
  3.     android:valueTo="100"  
  4.     android:valueType="intType"/>

②将一个视图的alpha属性从1变成0：

  1. <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:valueFrom="1"  
  3.     android:valueTo="0"  
  4.     android:valueType="floatType"  
  5.     android:propertyName="alpha"/>

③set动画使用演示：

  1. <set android:ordering="sequentially" >
  2.     <set>
  3.         <objectAnimator
  4.             android:duration="500"
  5.             android:propertyName="x"
  6.             android:valueTo="400"
  7.             android:valueType="intType" />
  8.         <objectAnimator
  9.             android:duration="500"
  10.             android:propertyName="y"
  11.             android:valueTo="300"
  12.             android:valueType="intType" />
  13.     </set>
  14.     <objectAnimator
  15.         android:duration="500"
  16.         android:propertyName="alpha"
  17.         android:valueTo="1f" />
  18. </set>

加载我们的动画文件：

  2. AnimatorSet set = (AnimatorSet)AnimatorInflater.loadAnimator(mContext, 
  3.              R.animator.property_animator);  
  4. animator.setTarget(view);  
  5. animator.start();

6.本节示例代码下载：

AnimatorDemo1.zip
AnimatorDemo2.zip

本节小结：

好的，本节给大家捋了一捋安卓中属性动画的基本用法，不知道你get了没，内容还是比较简单
的，而且例子比较有趣，相信大家会喜欢，嗯，就说这么多，谢谢~
感谢郭神的文章~

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注