Android中的动画二之使用进阶

上一篇文章，大概介绍了一下View Animation以及Property Animation的使用。这一篇，在简单使用的基础之上，进行一点高级的技巧。

TypeEvaluator

当我们使用ValueAnimator或者ObjectAnimator时，会有一个ofObject()方法和setEvaluator()。在这个方法中是有一个TypeEvaluator参数的。。那么这个TypeEvaluator的作用到底是什么呢？我们在使用ValueAnimator.ofFloat()时是会向其中传入开始值以及结束值的。然后系统就会帮助我们平滑计算出整个过程的数值。

我们可以看一下系统中的实现，系统中其实实现了几个TypeEvaluator。当我们使用ofFloat()时调用的默认是FloatEvaluator。使用ofInt()默认的是IntEvaluator。使用ofArgb()默认的是ArgbEvaluator。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * This evaluator can be used to perform type interpolation between float values.
 */
public class FloatEvaluator implements TypeEvaluator<Number> {
    /**
     * This function returns the result of linearly interpolating the start and end values, with
     * fraction representing the proportion between the start and end values. The
     * calculation is a simple parametric calculation: result = x0 + t * (v1 - v0),
     * where x0 is startValue, x1 is endValue,and t is fraction.
     *
     * @param fraction   The fraction from the starting to the ending values
     * @param startValue The start value; should be of type float or Float
     * @param endValue   The end value; should be of type float or Float
     * @return A linear interpolation between the start and end values, given the fraction parameter.
     */
    public Float evaluate(float fraction, Number startValue, Number endValue) {
        //开始值
        float startFloat = startValue.floatValue();
        //开始值 + 当前进度 *（结束值 - 开始值）
        return startFloat + fraction * (endValue.floatValue() - startFloat);
    }
}

可以看到FloatEvaluator实现了TypeEvaluator，并且TypeEvaluator其中只有一个方法evaluate(float fraction, Number startValue, Number endValue)。这个方法中有三个值，后两个分别是我们在ofFloat(startValue,endValue)传进来的。而第一个值fraction呢？它其实是一个当前动画执行进度的这么一个参数。所以，上面evaluator方法就很明白了。就是fraction在动画执行过程中是变化的执行进度，假如现在开始值是0，结束值是100，动画执行了50%。那么此时返回的值就应该是0 + 0.5 * （100 - 0）= 50。所以，TypeEvaluator就是执行如何从初始值 过渡到 结束值 的逻辑。那么，这个变化的fraction从哪里来呢？这就要用到Interpolator了。我们后面介绍。

知道了原理，我们就可以打造自己的TypeEvaluator了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class Point {
    // x 坐标
    private float x;
    // y 坐标
    private float y;
    public Point(float x, float y) {
        this.x = x;
        this.y = y;
    }
    public float getX() {
        return x;
    }
    public float getY() {
        return y;
    }
}

这里先新建一个Point类，记录View的x坐标以及y坐标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class PointEvaluator implements TypeEvaluator {
    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {
        //得到开始值
        Point startPoint = (Point) startValue;
        //得到结束值
        Point endPoint = (Point) endValue;
        //动画运行中的 x 坐标
        float x = startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX());
        //动画执行过程中的 y 坐标
        float y = startPoint.getY() + fraction * (endPoint.getY() - startPoint.getY());
        //封装成Point对象
        Point point = new Point(x, y);
        return point;
    }
}

自己定义了一个PointEvaluator，在其中计算了在动画执行过程中View的坐标值，并封装为Point对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//开始点坐标
Point startPoint = new Point(getWidth() / 2, RADIUS);
//结束点坐标
Point endPoint = new Point(getWidth() / 2, getHeight() - RADIUS);
//使用自定义的PointEvaluator
ValueAnimator animator = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
//注册监听器
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        //不断的取到点的值，其中包含 x 以及 y 坐标
        currentPoint = (Point) animation.getAnimatedValue();
        //刷新视图，不断回调onDraw()方法
        invalidate();
    }
});

这里使用ofObject()方法，传入自定义的TypeEvaluator，开始点，结束点。之后在监听器中不断的取值，这个值就是我们在自定义TypeEvaluator中计算出来的x,y值。然后，得到Point对象中，就含有x,y值。

接下来就是取出Point中的x,y值，然后不断的在onDraw()方法中绘制，就出现了一个圆自上而下运动。

1
2
3
float x = currentPoint.getX();
float y = currentPoint.getY();
canvas.drawCircle(x, y, RADIUS, mPaint);

Animation.gif

现在，让我们来做一些修改，然小球在下落过程中不断变换颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//应用系统的 ArgbEvaluator  开始值：0xffffff00 ，黄色  结束值：0xff00ff00 ， 绿色
ValueAnimator colorAnimator = ValueAnimator.ofObject(new ArgbEvaluator(), 0xffffff00, 0xff00ff00);
//设置监听器
colorAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        //不断得到过度的颜色值
        paintColor = (int) animation.getAnimatedValue();
        //刷新视图，不断调用onDraw()方法
        invalidate();
    }
});
//动画时长
colorAnimator.setDuration(5000);
//开始动画
colorAnimator.start();

上面的实现是应用了系统提供的ArgbEvaluator()，这个方法是系统帮助我们处理颜色过渡的，只要我们提供颜色的开始值以及结束值。之后在动画监听中得到颜色过渡中的值，并且设置给画笔就可以了：

1
mPaint.setColor(paintColor);

当然，也可以这样：

1
2
3
4
5
6
7
8
9
10
ValueAnimator colorAnimator = ValueAnimator.ofArgb(0xffffff00, 0xff00ff00);
colorAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        paintColor = (int) animation.getAnimatedValue();
        invalidate();
    }
});
colorAnimator.setDuration(5000);
colorAnimator.start();

看一下，两者的实现：

ofObject:

1
2
3
4
5
6
public static ValueAnimator ofObject(TypeEvaluator evaluator, Object... values) {
      ValueAnimator anim = new ValueAnimator();
      anim.setObjectValues(values);
      anim.setEvaluator(evaluator);
      return anim;
  }

ofArgb:

1
2
3
4
5
6
public static ValueAnimator ofArgb(int... values) {
       ValueAnimator anim = new ValueAnimator();
       anim.setIntValues(values);
       anim.setEvaluator(ArgbEvaluator.getInstance());
       return anim;
   }

看一下，其实实现相同的。

以上都是利用ValueAnimator实现的，那么ObjectAnimator可以吗？

上篇说过ObjectAnimator是通过调用属性的setter和getter方法改变属性的值，实现动画效果的。所以，我们需要自己写一个setter以及getter方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
private int color;
public int getColor() {
    return color;
}
public void setColor(int color) {
    this.color = color;
    //设置画笔颜色
    mPaint.setColor(color);
    //刷新视图，不断回调onDraw()方法
    invalidate();
}

这里，我们使用int值表现画笔的颜色，并在setter方法中将其设置给画笔。最后，通过 invalidate()，不断调用onDraw()方法，实现颜色过渡的动画效果。

接下来，就是如何调用color了，如何对给定的颜色进行过渡了。所以，这里还要请出TypeEvaluator了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class ColorEvaluator implements TypeEvaluator {
    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {
   
        int startInt = (Integer) startValue;
        int startA = (startInt >> 24) & xff;
        int startR = (startInt >> 16) & xff;
        int startG = (startInt >> 8) & xff;
        int startB = startInt & xff;
        int endInt = (Integer) endValue;
        int endA = (endInt >> 24) & xff;
        int endR = (endInt >> 16) & xff;
        int endG = (endInt >> 8) & xff;
        int endB = endInt & xff;
        return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
                (int)((startR + (int)(fraction * (endR - startR))) << 16) |
                (int)((startG + (int)(fraction * (endG - startG))) << 8) |
                (int)((startB + (int)(fraction * (endB - startB))));
    }
}

这里我们就借鉴一下系统的ArgbEvaluator的实现方法。

ArgbEvaluator：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
 * This evaluator can be used to perform type interpolation between integer
 * values that represent ARGB colors.
 */
public class ArgbEvaluator implements TypeEvaluator {
    private static final ArgbEvaluator sInstance = new ArgbEvaluator();
    /**
     * Returns an instance of <code>ArgbEvaluator</code> that may be used in
     * {@link ValueAnimator#setEvaluator(TypeEvaluator)}. The same instance may
     * be used in multiple <code>Animator</code>s because it holds no state.
     * @return An instance of <code>ArgbEvalutor</code>.
     *
     * @hide
     */
    public static ArgbEvaluator getInstance() {
        return sInstance;
    }
    /**
     * This function returns the calculated in-between value for a color
     * given integers that represent the start and end values in the four
     * bytes of the 32-bit int. Each channel is separately linearly interpolated
     * and the resulting calculated values are recombined into the return value.
     *
     * @param fraction The fraction from the starting to the ending values
     * @param startValue A 32-bit int value representing colors in the
     * separate bytes of the parameter
     * @param endValue A 32-bit int value representing colors in the
     * separate bytes of the parameter
     * @return A value that is calculated to be the linearly interpolated
     * result, derived by separating the start and end values into separate
     * color channels and interpolating each one separately, recombining the
     * resulting values in the same way.
     */
    public Object evaluate(float fraction, Object startValue, Object endValue) {
        int startInt = (Integer) startValue;
        int startA = (startInt >> 24) & 0xff;
        int startR = (startInt >> 16) & 0xff;
        int startG = (startInt >> 8) & 0xff;
        int startB = startInt & 0xff;
        int endInt = (Integer) endValue;
        int endA = (endInt >> 24) & 0xff;
        int endR = (endInt >> 16) & 0xff;
        int endG = (endInt >> 8) & 0xff;
        int endB = endInt & 0xff;
        return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
                (int)((startR + (int)(fraction * (endR - startR))) << 16) |
                (int)((startG + (int)(fraction * (endG - startG))) << 8) |
                (int)((startB + (int)(fraction * (endB - startB))));
    }
}

我们来看一下它的颜色过渡的算法：

ARGB.png

看一下上图，经过四次与运算得到了颜色值，两位一个颜色值。开始颜色值和结束颜色值获取方式一致。最后返回 开始颜色值 + 当前进度值 * （结束颜色值 - 开始颜色值） 。这样之后，又左移刚才右移的位数，进行还原。然后，四组有做了或运算。这样一番，就得到了颜色的过渡效果。

分析完了之后，到了使用之时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//开始点坐标
Point startPoint = new Point(getWidth() / 2, RADIUS);
//结束点坐标
Point endPoint = new Point(getWidth() / 2, getHeight() - RADIUS);
//使用自定义的PointEvaluator
ValueAnimator animator = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
//注册监听器
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        //不断的取到点的值，其中包含 x 以及 y 坐标
        currentPoint = (Point) animation.getAnimatedValue();
        //刷新视图，不断回调onDraw()方法
        invalidate();
    }
});
//在ofObject中使用 自己定义的 TypeEvaluator 开始值：0xffffff00 ，黄色  结束值：0xff00ff00 ，绿色
ObjectAnimator colorAnim = ObjectAnimator.ofObject(this, "color", new ColorEvaluator(), 0xffffff00, 0xff00ff00);
//使用AnimatorSet，组合两个动画
AnimatorSet animatorSet = new AnimatorSet();
//两个动画同时执行
animatorSet.play(animator).with(colorAnim);
animatorSet.setDuration(5000);
//开始动画
animatorSet.start();

Interpolator

Interpolator，插值器。与前面的TypeEvaluator，估值器。一起实现了属性动画的各种效果。与TypeEvaluator根据开始值以及结束值进行平滑的过渡不同的是，Interpolator是用来决定值得变化趋势的，即可以先加速后减速，也可以先减速后加速。当我们步设置任何Interpolator时，系统会默认使用AccelerateDecelerateInterpolator的。这个AccelerateDecelerateInterpolator就是一个先加速后减速的效果的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * A time interpolator defines the rate of change of an animation. This allows animations
 * to have non-linear motion, such as acceleration and deceleration.
 */
public interface TimeInterpolator {
    /**
     * Maps a value representing the elapsed fraction of an animation to a value that represents
     * the interpolated fraction. This interpolated value is then multiplied by the change in
     * value of an animation to derive the animated value at the current elapsed animation time.
     *
     * @param input A value between 0 and 1.0 indicating our current point
     *        in the animation where 0 represents the start and 1.0 represents
     *        the end
     * @return The interpolation value. This value can be more than 1.0 for
     *         interpolators which overshoot their targets, or less than 0 for
     *         interpolators that undershoot their targets.
     */
    float getInterpolation(float input);
}

TimeInterpolator 实现了很多的类，AccelerateDecelerateInterpolator也是其中之一。看一下，实现方法中就一个getInterpolation(float input)方法。所以，想要自定义Interpolator 只要处理这一个方法就行了。

下面看一个最简单的线性的Interpolator：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * An interpolator where the rate of change is constant
 */
@HasNativeInterpolator
public class LinearInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {
    public LinearInterpolator() {
    }
    public LinearInterpolator(Context context, AttributeSet attrs) {
    }
    public float getInterpolation(float input) {
        return input;
    }
    /** @hide */
    @Override
    public long createNativeInterpolator() {
        return NativeInterpolatorFactoryHelper.createLinearInterpolator();
    }
}

之所以说其简单，是因为getInterpolation中只是返回了input未做任何处理。所以，其值得变化率是常量，就是一个匀速运动。

再看一下AccelerateDecelerateInterpolator的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
 * An interpolator where the rate of change starts and ends slowly but
 * accelerates through the middle.
 */
@HasNativeInterpolator
public class AccelerateDecelerateInterpolator extends BaseInterpolator
        implements NativeInterpolatorFactory {
    public AccelerateDecelerateInterpolator() {
    }
    @SuppressWarnings({"UnusedDeclaration"})
    public AccelerateDecelerateInterpolator(Context context, AttributeSet attrs) {
    }
    public float getInterpolation(float input) {
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
    }
    /** @hide */
    @Override
    public long createNativeInterpolator() {
        return NativeInterpolatorFactoryHelper.createAccelerateDecelerateInterpolator();
    }
}

可以看到，这个AccelerateDecelerateInterpolator实现的就要复杂了，用到了数学中的余弦函数来模拟先加速再减速的过程。因为input的值是从0到1的。0代表动画开始点，1代表动画结束：

A value between 0 and 1.0 indicating our current point in the animation where 0 represents the start and 1.0 represents the end

所以，整个余弦之内的取值是由 π 到 2 π 的。算出值就是由 -1 到 1。所以整个返回值是由 0 到 1 。但是我们知道余弦函数由 π 到 2 π 斜率是由小到大再到小的，也就是中间的斜率最大，值得变化率也就是最大的。

上面的gif动画，小球直直的掉落，不符合现实生活。但是，系统帮助我们提供了一个BounceInterpolator可以模拟出一个反弹的效果。

现在，我们也来自定义一个Interpolater：

1
2
3
4
5
6
7
8
9
10
11
12
13
public class CurveInterpolater implements TimeInterpolator {
    @Override
    public float getInterpolation(float input) {
        float result;
        if (input <= 0.1) {
            result = input*input;
        } else {
            result = (float) (Math.sqrt(input));
        }
        return result;
    }
}

上面就自定义了一个先增大，再减小的过程。原谅我数学不好╮(╯﹏╰）╭。。。。。。

使用,只要setInterpolator就行了：

1
animatorSet.setInterpolator(new CurveInterpolater());

最后，看一下效果：

可以看到中间速度很快，最后又很慢。

ViewPropertyAnimator

属性动画的功能确实强大，但是如果我们只想改变View进行动画操作。如：进行透明度的更改:

1
2
ObjectAnimator animator=ObjectAnimator.ofFloat(view,"alpha",0,1);
animator.start();

是不是有点麻烦了，所以于在Android 3.1系统当中补充了ViewPropertyAnimator这个机制。可以理解为ViewPropertyAnimator为一种简化的Property Animation。专门为View进行动画操作。

现在，只要这样：

1
view.animate().alpha(0);

而且是每一个方法返回的是自身，所以支持连缀写法，所以只要一句话就完成了N个属性的更改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
view.animate().alpha(0).scaleX(2).scaleY(2).setDuration(3000)
             .setInterpolator(new DecelerateInterpolator())
             .setStartDelay(200)
             .withStartAction(new Runnable() {
                 @Override
                 public void run() {
                     Log.d(TAG, "start");
                 }
             })
             .withEndAction(new Runnable() {
                 @Override
                 public void run() {
                     Log.d(TAG, "end");
                 }
             });

而且，并不需要我们手动调用start()方法，因为在内部已经隐形调用了。当然，你想要写也可以写上start()方法的。

好了，这一篇就到这里。

参考：

赏

谢谢你请我喝咖啡~~~

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

I'm Kevin Jern，<br>一名在校大学生，<br>自由主义、理想主义以及完美主义者<br><br>热爱科技，热爱技术<br/>目前是一名小白Android Developer<br/><br/>竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。<br>回首向来萧瑟处，归去，也无风雨也无晴。