Android动画学习Demo(3) 沿着贝塞尔曲线移动的Property Animation

Property Animation中最重要，最基础的一个类就是ValueAnimator了。Property Animation利用ValueAnimator来跟踪记录对象属性已经变化了多长时间及当前这个时间点的值。

而在ValueAnimator中，又封装了两个类：

1）TimeInterpolator，也称插值器，是来计算当前动画运动的一个跟时间有关系的比例因子。

2）TypeEvaluator，这个就是利用TimeInterpolator计算出来的因子来算出当前动画运行到的位置。

这样讲太抽象了，我们还是先用自然语言来描述一下整个动画的过程吧。

动画的原理，其实就是一帧帧的画面顺着时间顺序,在我们眼中形成视觉残留的效果。所以在动画中，时间的概念是很重要的，只有时间的变化，才能形成动画效果。

0）动画准备开始，我们在这里设置了一个动画的时长（duration），如果不设置的话，动画的时长就是300毫秒，每个画面显示的时间是10ms。同时也设置了某个属性值在这个时间段中变化的起始值start和结束值end，意思就是说，在duration时间中，属性值要从start 变化到 end。

1）动画开始了，过了 t 时间，ValueAnimator会根据 t / duration 算出一个时间消逝的比例因子（elapsed fraction），意思就是说，现在时间到 t了，我们假设总的时间的duration就是3t吧，那就是现在已经过了1/3时间了，那这个属性值也应该要变化到1/3了。

2）动画继续，现在到了2t了，那么现在动画时间已经过了2/3了，那么这个属性值是不是已经变化到2/3了呢。

3）现在到了3t了，动画结束了，属性值就已经从start变成end值了。

那么现在问题来了，如果都是这样算的话，那动画不就一直是很匀速的了吗？是的，如果用的是LinearInterpolator的话。

TimeInterpolator

TimeInterpolator就是用来改变我们这个动画速度的这样一个类了。为什么叫插值器呢？我理解就是，本来动画踩着时间点，一步一步走的挺好的，它硬生生在中间的插了些值进去，或者抽了一些值出去，让整条路变得不好走了，前面变然变上坡了，走起来就慢了，本来过去 t 时间之后，动画的画面也应该在1/3的位置了，但是路不好走，它就走不到1/3，而可能只走了1/4了，而后面是下坡，一激动，步伐就快了许多，又赶上去了，但是不管中间的路怎么变化，时间点一到，一定是刚刚好落在最终的位置上的。 Android中提供的Interpolator主要有九个： 1）AccelerateDecelerateInterpolator：先加速再减速。
2）AccelerateInterpolator：一直加速。
3）AnticipateInterpolator：先往后一下，再嗖的一声一往无前。
4）AnticipateOvershootInterpolator：先往后一下，再一直往前超过终点，再往回收一下。
5）BounceInterpolator：最后像个小球弹几下。
6）CycleInterpolator：重复几次，感觉就是环形进度条那种，具体我还没试过。
7）DecelerateInterpolator：一直减速。
8）LinearInterpolator：线性，这个就是我们上面讲到的很均匀的了。
9）OvershootInterpolator：到了终点之后，超过一点，再往回走。有个参数可以定义，超过的力度。 
这些Interpolator都是实现了TimeInterpolator接口的类，它们只需要实现一个方法：getInterpolation (float input)，将这个input根据自己的需求重新计算这个比例 
第一步：当到了某时间t之后，ValueAnimator会算出某个比例 fraction = t / duration，而Interpolator会接收这个比例fraction，再调用其getInterpolation方法将这个比例因子重新计算一下，返回一个新的比例因子，比如LinearInterpolator实现的方法就是什么都不变，如下：

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

而 AccelerateDecelerateInterpolator 则会利用余弦函数的对称性变化计算这个比例因子，如下：

public float getInterpolation(float input) {
    return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
}

如上所述，通过第一步 Interpolator 的插值，我们会得到一个比例因子，接下来就是要用到我们的TypeEvaluator了。 

TypeEvaluator

第二步：TypeEvaluator会接受第一步中算出来的比例因子，然后算出当前的属性的值，将其返回给ValuaAnimator，由ValueAnimator去设置对应属性的值。 比如，我自己写了一个BezierTypeEvaluator，根据时间的变化来让一个按钮沿着贝塞尔曲线移动，如下：

class BezierEvaluator implements TypeEvaluator{

		@Override
		public PointF evaluate(float fraction, PointF startValue,
				PointF endValue) {
			final float t = fraction;
			float oneMinusT = 1.0f - t;
			PointF point = new PointF();
			
			PointF point0 = (PointF)startValue;
			
			PointF point1 = new PointF();
			point1.set(width, 0);
			
			PointF point2 = new PointF();
			point2.set(0, height);
			
			PointF point3 = (PointF)endValue;
			
			point.x = oneMinusT * oneMinusT * oneMinusT * (point0.x) 
					+ 3 * oneMinusT * oneMinusT * t * (point1.x)
					+ 3 * oneMinusT * t * t * (point2.x)
					+ t * t * t * (point3.x);
			
			point.y = oneMinusT * oneMinusT * oneMinusT * (point0.y) 
					+ 3 * oneMinusT * oneMinusT * t * (point1.y)
					+ 3 * oneMinusT * t * t * (point2.y)
					+ t * t * t * (point3.y);			
			return point;
		}	
	}

自定义TypeEvaluator，我们必须实现其evaluate方法，目的就是计算出目前的对象对应属性的值，而它会接收三个参数，一个是上文中通过interpolator算出的比例，还有我们在创建动画时设置的起始值和结束值。 

ValueAnimator.AnimatorUpdateListener

既然我们已经算出了在 t 时刻，对象的某个属性的值，那么我们要把这个值重新设置到对象中，才能够起作用啊。所以ValueAnimator也提供了一个内部的Listener接口，其只有一个方法，就是获取TypeEvaluator计算出来的值，并设置给对应的属性，比如我们Demo中的代码：

valueAnimator.addUpdateListener(new AnimatorUpdateListener() {			
			@Override
			public void onAnimationUpdate(ValueAnimator animation) {
				PointF pointF = (PointF)animation.getAnimatedValue();
				button.setX(pointF.x);
				button.setY(pointF.y);
			}
		});

我们在这里改变Button的X坐标和Y坐标，从而改变其具体的位置。至于validate，然后引起重新绘制的过程，对于这些基本的属性，ValueAnimator已经帮我们实现了。 下面，我们看看效果图，然后再总结一下ValueAnimator的实现机制。