动画教程（四）

交互动画，移动物体

鼠标
一次点击事件，可以分为两个部分，鼠标键按下时的事件及鼠标弹上来的事件。即：按下，拖拽，释放。

投掷
点击一个对象时开始对它进行拖拽，再沿某个方向移动一段距离，松开鼠标后，物体将获得这个速度向量，沿着拖拽方向继续移动。
旧的位置＋速度向量＝新的位置
所以，速度向量＝新的位置－旧的位置。即，具体到每帧，结果即为速度向量。

使用缓动运动(Easing)，如同让影片滑动到目标并停止

使用弹性运动(Springing)，会产生向前或向后的反弹，最终停止在目标点位。

需要一个目标点；
确定到目标点的距离；
成比例地将影片移动到目标点——距离越远，移动速度越快。

缓动运动(easing)与弹性运动(springing)的不同之处在于移动的比例。

缓动运动时，速度与距离成正比，离目标越远，物体运动速度越快。当物体与目标点非常非常接近时，就几乎不动了。

弹性运动时，加速度与距离成正比。如果物体与目标离得很远，再用上加速度，会使移动速度非常快。当物体接近目

标时，加速度会减小，但依然存在！物体会飞过目标点，随后再由反向加速度将它拉回来。最终，用摩擦力使其静止。

简单缓动
将物体移到别处时，希望物体能在几帧内慢慢移动到某点。它的速度向量与目标点的距离是成比例的。
可以使用缓动使物体归位，那样会显得很自然。
实现策略：
1、确定一个数字作为运动比例系数，这是一个小于1的分数。（系数越接近1，运动速度就会越快；系数过小会使物体无法达到目标）
2、确定目标点。
3、计算物体与目标点的距离。
4、用距离乘以比例系数，得出速度向量。
5、将速度向量加到当前物体坐标上。
6、重复3到5，直到接近终点。


何时停止缓动
当物体最终到达目标点时，代码仍然会执行，这样会浪费CPU。所以就要判断物体是否到达终点。
Xeno悖论：物体要从 A 点到达 B 点，它首先要移动到两点间一半的距离。然后物体再从该点出发，到达与 B 点距离一半的距离。然后再折半。每次只移动离目标一半的距离，但永远无法准确地达到目标。
但是实际中，问题就在于一次最少能移动多少个像素。所以物体并非无限的接近目标，但是它确实永远无法准确的到达目标点。这样一来，缓动代码就永远不会停止。
所以我们要解决的是，哪里才是物体最接近的目标位置。这需要确定到目标点的距离是否小于某个范围。如果物体与目标点的距离相差在一个像素以内，就可以说它已经到达了目标点，即可停止缓动了。
如果将拖拽与缓动相结合，要在放开小球时，将缓动代码重新启用。


鼠标跟随
将目标点坐标更换为鼠标坐标


缓动不仅限于运动
将缓动用在alpha属性上，开始设置为0，目标设置为1。使用缓动可以实现影片淡入效果。颠倒过来可以实现淡出效果。
旋转。
颜色条。设置好 red,green,blue 的初始值，使用缓动单独表现每一色彩元素的值，然后将它们再组合成 24 位色彩值。



高级缓动
可以在缓动的同时增加加速度，可以控制缓动的效果。
例如，在开始时比较缓慢，然后渐渐开始加速，最后在接近目标
时再将速度慢下来。或者希望在一段时间或若干帧内完成缓动效果。