Android动画系列之属性动画

上一篇总结了 Android 帧动画和补间动画的相关知识，这篇文章总结一下属性动画先相关知识，属性动画相较帧动画和补间动画更强大，帧动画和补间动画只能应用于 View 及其子类，而属性动画可以修改任何对象的属性值，属性值可在指定的一段时间内自动改变，根据对象属性值的变化进而实现更复杂的动画。

1. 属性动画的常用设置

2. ValueAnimator

3. ObjectAnimator

4. 关键帧

5. 插值器和估值器

Gif 有点儿卡顿，谁有好 Gif 录制工具安利一个。

属性动画的常用设置

下面是属性动画的常用设置，具体如下：

1//设置属性动画持续时间
2animator.setDuration(2000);
3//设置属性插值器
4animator.setInterpolator(new AccelerateInterpolator());
5//设置属性动画重复播放模式
6animator.setRepeatMode(ValueAnimator.REVERSE);
7//设置属性动画重复播放次数
8animator.setRepeatCount(0);
9//设置属性动画延时播放的时间
10animator.setStartDelay(0);
11//设置属性动画估值器，用于控制最终属性值(API22)
12animator.setCurrentFraction(0.5f);
13//设置当前播放时间，其值在Duration范围之内
14animator.setCurrentPlayTime(1000);
15//设置属性动画估值器，用于控制最终属性值
16animator.setEvaluator(new IntEvaluator());
17//设置属性动画监听
18animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
19    @Override
20    public void onAnimationUpdate(ValueAnimator animation) {
21        Log.i(TAG, animation.getAnimatedValue() + "");
22        //
23    }
24});
25//...

ValueAnimator

ValueAnimator 提供了一个简单的计时引擎，用于执行动画时根据设置的时长以及其他属相完成动画值的计算，然后就可以将动画值设置到合适的目标对象上，使用的插值器默认时 AccelerateDecelerateInterpolator，表示动画开始和结束时较慢，中间加速完成动画，下面是源码中默认的插值器，具体如下：

1// The time interpolator to be used if none is set on the animation
2private static final TimeInterpolator sDefaultInterpolator =
3        new AccelerateDecelerateInterpolator();

在 ValueAnimator 中已经内部处理了一些估值器 IntEvaluator 和 FloatEvaluator，也就是说如果使用的时 ofInt 和 ofFloat 方法作为动画的属性值，那么 ValueAnimator 会自动处理 int 和 float 值的变化，在源码中找了一下，这部分内容在 PropertyValuesHolder 这个类中，具体如下：

1void init() {
2    if (mEvaluator == null) {
3        // We already handle int and float automatically, but not their Object
4        // equivalents
5        mEvaluator = (mValueType == Integer.class) ? sIntEvaluator :
6                (mValueType == Float.class) ? sFloatEvaluator :
7                null;
8    }
9    if (mEvaluator != null) {
10        // KeyframeSet knows how to evaluate the common types - only give it a custom
11        // evaluator if one has been set on this class
12        mKeyframes.setEvaluator(mEvaluator);
13    }
14}

ValueAnimator 可以使用代码创建，也可以使用 xml 创建，下面以平移动画为例说明 ValueAnimator 的使用方式，其他如缩放、旋转等使用方式类似。

• 使用代码创建

1private void translation(){
2    ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 100);
3    valueAnimator.setDuration(2000);
4    valueAnimator.setInterpolator(new AccelerateInterpolator());
5    valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
6    valueAnimator.setRepeatCount(0);
7    valueAnimator.setStartDelay(0);
8//    valueAnimator.setCurrentFraction(0.5f);
9//    valueAnimator.setCurrentPlayTime(1000);
10    valueAnimator.setEvaluator(new IntEvaluator());
11
12    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
13        @Override
14        public void onAnimationUpdate(ValueAnimator animation) {
15            Log.i(TAG, animation.getAnimatedValue() + "");
16            int x = (int) animation.getAnimatedValue();
17            ivImage.setTranslationX(x);
18            ivImage.setTranslationY(x);
19        }
20    });
21
22    valueAnimator.start();
23}

• 使用xml创建

在 res/animator 文件夹下创建 test_animator.xml 文件，文件内容如下：

1<?xml version="1.0" encoding="utf-8"?>
2<animator xmlns:android="http://schemas.android.com/apk/res/android"
3    android:valueFrom="0"
4    android:valueTo="100"
5    android:valueType="intType"
6
7    android:duration="2000"
8    android:startOffset ="0"
9    android:repeatMode = "reverse"
10    android:repeatCount = "0"
11    android:interpolator = "@android:anim/accelerate_interpolator">
12</animator>

然后在 Activity 中获取 ValueAnimator，设置目标对象，启动动画即可，具体如下：

1private void translation(){
2    ValueAnimator animator = (ValueAnimator) AnimatorInflater.loadAnimator(this,R.animator.test_animator);
3    animator.setTarget(ivImage);
4    animator.start();
5    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
6        @Override
7        public void onAnimationUpdate(ValueAnimator animation) {
8            Log.i(TAG, animation.getAnimatedValue() + "");
9            int x = (int) animation.getAnimatedValue();
10            ivImage.setTranslationX(x);
11            ivImage.setTranslationY(x);
12        }
13    });
14}

• 测试效果

这里使用 ValueAnimator 来实现平移动画，测试效果如下：

ValueAnimator

ObjectAnimator

ObjectAnimator 是 ValueAnimator 的子类，可在目标对象上支持动画属性的设置，在其构造方法中通过参数指定目标对象以及所对应动画属性的名称，然后会相应的执行对应的动画属性的 setter 方法来最终完成动画的执行，也就是说属性动画 ObjectAnimator 最终调用目标对象的 setter 方法完成目标对象属性值的变化，然后相应的改变目标对象的属性，从而实现目标对象的动画效果，下面以透明度变化来介绍 ObjectAnimator 的基本使用，代码参考如下：

1private void alpha(){
2    ObjectAnimator animator = ObjectAnimator.ofFloat(ivImage,"alpha",1f,0,1f);
3    animator.setDuration(3000);
4    //其他属性动画设置
5    //...
6    animator.start();
7}

下面是测试效果，如下图所示：

属性动画-透明度

至于平移、旋转、缩放动画实现方式基本如上，这里不再赘述，其对应的 setter 方法对应关系如下：

ObjectAnimator 提供了很多的 ofXxx() 方法来方面设置属性动画，如下图所示：

属性动画-ofXxx()

可根据不同的动画需求使用 ObjectValueAnimator 不同 ofXxx() 方法来实现相应的动画。

关键帧

这里简单说一下关键帧的使用，顾名思义关键帧就是在某个固定时刻上定义具体的属性值，为定义的将按照估值器返回的值返回属性值，属性动画中的关键帧使用方式如下：

1/**
2 * 关键帧的使用
3 */
4private void keyFrame(){
5    Keyframe keyframe1 = Keyframe.ofFloat(0,0);
6    Keyframe keyframe2 = Keyframe.ofFloat(0.25f,300);
7    //每个KeyFrame可设置自己的插值器
8    keyframe2.setInterpolator(new AccelerateInterpolator());
9    Keyframe keyframe3 = Keyframe.ofFloat(0.75f,100);
10    Keyframe keyframe4 = Keyframe.ofFloat(1,400);
11    PropertyValuesHolder holder = PropertyValuesHolder.ofKeyframe("translationX",keyframe1,keyframe2,keyframe3,keyframe4);
12    ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(ivImage,holder);
13    animator.setDuration(3000);
14    animator.start();
15}

看一下添加关键帧之后对普通平移动画的改变，实现测试效果如下：

keyFragme.gif

插值器和估值器

• 插值器(TimeInterpolator) 表示的是整个动画期间动画的变化规律，如加速、减速等。

Android 内置许多插值器，这些插值器基本涵盖了实际开发中的大部分情况，具体如下：

插值器

如果内置的插值器不满足需求，也可以自定义插值器。

• 估值器(TypeEvaluator)表示的是在整个动画期间各时刻属性值的具体变化。

这里自定义一个估值器来实现一个 View 沿正弦曲线运动，自定义估值器如下：

1/**
2 * 自定义估值器
3 * Point封装了坐标x和y
4 */
5public class SineTypeValue implements TypeEvaluator<Point> {
6    @Override
7    public Point evaluate(float fraction, Point startValue, Point endValue) {
8        //y = sinA
9        float distance = fraction * (endValue.getX() - startValue.getX());
10        float x = startValue.getX() + distance;
11        float y = startValue.getY() + (float) Math.sin(distance / 100 * Math.PI) * 100;
12        Point point = new Point();
13        point.setX(x);
14        point.setY(y);
15        return point;
16    }
17}

然后给动画设置该估值器，监听动画属性设置 View 的位置即可实现一个 View 沿正弦曲线运动，使用方式如下：

1/**
2 * 自定义估值器的使用
3 * 正弦运动的估值器
4 */
5private void sina(){
6    Point startPoint = new Point(ivImage.getX(),ivImage.getY());
7    Point endPoint = new Point(ivImage.getX()+500,ivImage.getY());
8    ValueAnimator valueAnimator = ValueAnimator.ofObject(new SineTypeValue(), startPoint, endPoint);
9    valueAnimator.setDuration(5000);
10    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
11        @Override
12        public void onAnimationUpdate(ValueAnimator animation) {
13            Log.i(TAG, animation.getAnimatedValue() + "");
14            Point point = (Point) animation.getAnimatedValue();
15            ivImage.setX(point.getX());
16            ivImage.setY(point.getY());
17        }
18    });
19    valueAnimator.start();
20}

测试效果如下：

自定义估值器

Android 中属性动画的总结就到此结束了，可以添加我的微信jzmanu 互相交流，同时邀请你加入 Android 技术微信交流群。

推荐阅读：