Android属性动画基础篇

1、什么是属性动画

• 简单来说就是通过改变对象属性而形成的动画效果。

2、为什么使用属性动画

我们知道，在属性动画之前，Android 提供了视图动画（view Animation），而视图动画又分为帧动画（Frame Animation）和补间动画（Tween Animation）。帧动画就像我们看的影片一样，是一系列图片连贯起来播放形成的动画；补间动画是在针对 view 的一些操作，比如：平移、透明度、旋转、缩放。既然有了视图动画，我们为什么还要使用属性动画？原因很简单，因为它牛逼啊。为什么说它牛逼，因为它突破了视图动画的种种局限性。下面我们来看看视图动画都有哪些局限性？

• 视图动画的作用对象是 view。也就是说，我们只能对view对象做动画。
• 视图动画效果只有上面说到的平移、透明度、旋转、缩放效果。
• 视图动画只有视觉效果，无法改变对象的属性。

首先，视图动画只对 view 对象起作用，比如 Button。虽然我们平时能看到的都是界面都是 view 组成的，但是背后可能需要改变的是非 view 对象的属性。比如一个圆的圆心坐标对象。然后，视图动画的效果有限，如果我们想实现复杂的效果，可能就无能为力了。比如，我们想让一个对象的颜色由红色渐渐变为黄色，这中间是一个动画过程，视图动画是帮我们实现不了的。最后，视图动画只有视觉效果，无法改变对象属性，这会使我们在开发中出现很多麻烦。比如，我们移动了一个按钮，按钮位置的移动只是视觉上的，实际上按钮还在原来的位置，这个时候我们点它移动后的位置，点击事件是不生效的。上面的种种局限性导致了属性动画的诞生。Android 在3.0之后提供了属性动画。

3、属性动画内容

• 基本用法：ViewPropertyAnimator、ValueAnimator、ObjectAnimator等核心类用法。
• 高级用法：插值器和估值器

4、基本用法

4.1、ViewPropertyAnimator

ViewPropertyAnimator 是属性动画中专门针对 view 的类，使用起来也很简单，一行代码基本可以搞定。因为简单，所以，我们从它开始。现在我们简单写个demo：布局很简单，一个图片一个按钮，点击按钮，图片执行动画。

代码更简单，我们依次执行了平移、旋转、缩小、透明度，每个动画一行搞定：

@OnClick(R.id.button)
public void onViewClicked() {
    button.setText("ViewPropertyAnimator平移");
    switch (count) {
        case 0:
            image.animate().translationX(300).setDuration(1000);
            button.setText("ViewPropertyAnimator旋转");
            break;
        case 1:
            image.animate().rotation(180);
            button.setText("ViewPropertyAnimator缩小");
            break;
        case 2:
            image.animate().scaleX(0.5f).scaleY(0.5f);
            button.setText("ViewPropertyAnimator透明度");
            break;
        case 3:
            image.animate().alpha(0.5f);
            break;
        default:

            break;
    }
    count++;
}

20180211153304.gif

可以看出我们先用 image.animate()方法获取 ViewPropertyAnimator 对象，然后执行具体的动画方法。我们看看 ViewPropertyAnimator 类都提供了哪些方法，分别又对应 view 中的哪些方法：

ViewPropertyAnimator.jpg

可以看到，每个动画 ViewPropertyAnimator 都提供了两个方法，其中一个都带有 -By 后缀。这两个方法有什么区别呢？
带有-By后缀的都是增加的意思，比如说：translationX（100）是把 translationX 的值渐变为100，而 translationXBy（100）是把 translationX 的值渐渐增加100。这样就容易理解了。另外我们可以使用setListener()方法设置监听动画的开始、结束、重复、取消操作；也可以通过setUpdateListener（）方法获取动画过程中的每个对象。这点和后面要说的 ObjectAnimator 和 ValueAnimator 不太一样。当我们只是对view对象做一些简单的动画的时候，我们可以选择 ViewPropertyAnimator 类。

4.2、ValuetAnimator

valueAnimator 可以说是动画机制的核心类，后面的 ObjectAnimator 也是它的子类。属性动画是改变一个属性值，从一个初始值变化到一个结果值。ValueAnimator 控制了这个过程，而且根据整个过程的时间比例，不同的时间点赋给对象不同的属性值。ValueAnimator 主要有三个方法：

• ofInt(int... values)
• ofFloat(float... values)
• ofObject(TypeEvaluator evaluator, Object... values)

用法也简单：

ValueAnimator animator = ValueAnimator.ofInt(0,10);
animator.setDuration(300);
animator.start();
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            Log.d("tag","ValueAnimator value：" + animation.getAnimatedValue());
        }
    });

这三个方法都是静态方法，可以直接调用，传入我们的参数值，注意，这个参数值是一个数组，就是我们可以传入多个对象。这里我们调用ofInt方法，传入0和10，就是值从0到10的变化过程。我们可以通过addUpdateListener()方法获取整个变化过程，打印出变化过程中的值：

ValueLog.jpg

可以看出，这是一个从0到10的变化过程。当然，我们可以传入多个值，这样就是一个依次变化的过程。另外两个方法和这个方法使用类似，其中ofObject(TypeEvaluator evaluator, Object... values)方法用到了估值器，我们放到后面单独总结，这里先说基础用法。

4.3、ObjectAnimator

ValueAnimator是动画机制最核心的类，但却不是我们使用最多的类，和我们打交道最多的是ObjectAniamtor。它是ValueAnimator的子类，但是提供了更丰富的功能。我们可以使用它对任意对象的任意属性进行操作。我们看看它的ofFloat（）方法怎么使用：

    

    


布局文件同上面一样，一个按钮，一个图片，点击按钮，图片执行动画。按钮的点击事件如下：

@OnClick(R.id.button)
public void onViewClicked() {
    switch (count) {
        case 0:
            button.setText("透明度变化");
            ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(image,"alpha",1f,0f,1f);
            objectAnimator.setDuration(3000);
            objectAnimator.start();
            break;
        case 1:
            button.setText("平移");
            ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(image,"translationX",0,500,0);
            objectAnimator2.setDuration(5000);
            objectAnimator2.start();
            break;
    }
    count++;
}

ObjectAnimator类的ofFloat（）方法和 ValueAnimator不一样，第一个参数是我们要操作的对象，第二个参数是对象的属性，后面是一个数组，是这个属性的变化过程。首先，我们让图片的透明度从1到0再到1；然后让图片平移500像素再平移回来：

ObjectAnimator.gif

这里我们做的动画还是view常见的透明度和平移操作。这些动画好像没体现出来属性动画比视图动画的优势，我们自定义一个view，看看ObjectAnimator类对于对象属性的操作。

public class CircleView extends View {
    private float angle;
    private float strokeWidth = 30;
    private RectF rectF = new RectF();
    private float radius = 200;
    private Paint paint;
    
    public float getAngle() {
        return angle;
    }

    public void setAngle(float angle) {
        this.angle = angle;
        invalidate();
    }

    public CircleView(Context context) {
        this(context,null);
    }

    public CircleView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CircleView(Context context, AttributeSet attrs, int       defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float centerX = getWidth() / 2;
        float centerY = getHeight() / 2;
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(strokeWidth);
        canvas.drawCircle(centerX,centerY,200,paint);

        paint.setColor(Color.RED);
        paint.setStrokeCap(Paint.Cap.ROUND);
        rectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
        canvas.drawArc(rectF, 180, angle, false, paint);
    }
}

我们定义了一个类CircleView，这个view先画了一个黑色的圆环，再根据一个属性angle画一个红色的圆弧，我们使用ObjectAnimator动态控制angle值，不断重绘，形成一个动画效果：

@OnClick(R.id.button)
public void changeRadius() {
    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(circleView,"angle",0,270,0);
    objectAnimator.setDuration(5000);
    objectAnimator.start();
    objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            Log.d("tag","ValueAnimator: " + animation.getAnimatedValue());
        }
    });
}

这是我们ObjectAnimator类相关的操作。ofFloat()方法传入了一个CircleView对象，传入angle参数，弧度从0到270再到0度。我们看看效果：

CircleView.gif

我们通过不断修改angle的属性值，形成了一个简单的动画。这里的属性可以传入对象的任意属性，前提是这个属性有get（）方法。因为ObjectAnimator类是通过get（）方法获取到属性并操作的。所以，当我们想通过ObjectAnimator类改变一个属性的时候，我们需要给这个属性提供get（）方法。

使用xml定义动画

属性动画和补间动画一样，也可以通过xml定义动画。使用xml定义动画，比直接写在代码里麻烦一点，但更方便我们重用。首先，我们在res文件夹下建立animator文件夹，我们定义的xml放在这个文件夹下。有三种标签：

• animator
• objectAnimator
• set

参数值我们都能看明白是什么意思，然后我们在代码中调用：

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim_file);  
animator.setTarget(view);  
animator.start();

4.4、AnimatorSet组合动画

组合动画就是几个动画组合起来使用，我们使用AnimatorSet类来实现。系统提供了几个方法控制动画执行顺序：

• after（Animator animator）现有动画在传入动画后执行
• before(Animator animator) 现有动画在传入动画前执行
• with(Animator animator) 两个动画同时执行

这篇文章介绍了属性动画的基础用法，后面我们将说说属性动画的高级用法：插值器和估值器。当我们想实现酷炫细致的动画时，它们会给我们很大的帮助。