属性动画中Interpolator原理

属性动画中Interpolator的使用

Android中可以通过setInterpolator()给一个属性动画设置一个补间器，定义一个动画改变的速率，可以让一个动画做非线性的动作，比如加速或者减速，Android提供了很多功能不同的Interpolator共开发者使用，它们都是继承自TimeInterpolator,如图:

如下代码让progressBar的进度从0变化到100，并且是先加速后减速。

       valueAnimator = ValueAnimator.ofInt(0,100);
        valueAnimator.setDuration(2000);
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int p = (int) animation.getAnimatedValue();
                progressBar.setProgress(p);
            }
        });
        valueAnimator.start();

Interpolator的内部实现

先看看TimeInterpolator的源码，内部只有一个getInterpolation()方法，方法接收一个input参数，这个参数是从0到1变化的，0代表是动画开始，1代表的是变化结束，中间的值随着动画运行在0到1之间变化,实现具体的interpolator只要实现getInterpolation()方法，根据需要自己通过input参数去计算出interpolator就可以了。算出了这个值是怎么使用的呢，就得引出另外一个概念TypeEvaluator

/**
 * 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);
}

TypeEvaluator介绍

TypeEvaluator用来计算动画如何从初始值过渡到结束值，代码很简单，只有一个计算方法，这个方法接收三个参数，fraction，从动画开始到结束的分数，另外两个是动画开始的值和结束的值，使用这三个参数可以计算出某个时刻动画当前的值

public interface TypeEvaluator<T> {

    /**
     * This function returns the result of linearly interpolating the start and end values, with
     * <code>fraction</code> representing the proportion between the start and end values. The
     * calculation is a simple parametric calculation: <code>result = x0 + t * (x1 - x0)</code>,
     * where <code>x0</code> is <code>startValue</code>, <code>x1</code> is <code>endValue</code>,
     * and <code>t</code> is <code>fraction</code>.
     *
     * @param fraction   The fraction from the starting to the ending values
     * @param startValue The start value.
     * @param endValue   The end value.
     * @return A linear interpolation between the start and end values, given the
     *         <code>fraction</code> parameter.
     */
    public T evaluate(float fraction, T startValue, T endValue);

}

系统的ofInt 和ofFloat动画变化对应TypeEvaluator的实现类IntEvaluator和FloatEvaluator看看IntEvaluator的实现，动画结束值减去开始值算出差值，再乘以当前的动画执行分数fraction，再加上开始值就得到了当前的动画的值，我们可以通过实现TypeEvaluator去定制自己的Evaluator，然后就可以ofObject去使用啦

public class IntEvaluator implements TypeEvaluator<Integer> {

    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
        int startInt = startValue;
        return (int)(startInt + fraction * (endValue - startInt));
    }
}

Interpolator和TypeEvaluator的关系

TypeEvaluator计算当前动画值所传入的fraction的值就是通过Interpolator的getInterpolator计算出来的，最简单的一种及时线性的变化，比如系统的LinearInterpolator直接将input返回，这样fraction匀速的从0变到1，那么动画的值也就从起始值匀速的变化到结束值。

public class LinearInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {

    public float getInterpolation(float input) {
        return input;
    }

}

再来看看AccelerateDecelerateInterpolator代码

public class AccelerateDecelerateInterpolator implements Interpolator, NativeInterpolatorFactory {  
    public float getInterpolation(float input) {  
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;  
    }  

}  

AccelerateDecelerateInterpolator实现动画先加速后减速，可以看到他的算法，input从0到1，(input + 1) * Math.PI)从π到2π，cos(π~2π)变化根据三角函数是从-1 ~ 1，再除以2加上0.5刚好是0-1区间内变化，不同的是中间的变化是先加速在减速，这样就实现了动画先加速再减速的变化啦