欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。
前面的章节我们讲到了小球的摩擦力，抛物线曲线运动以及相就的公式的应用。那么今天我们来说下另外两种运动形式。
缓冲运动之前我们的速度有匀速运动和匀加速运动，他们的速度恒定为一个值或者不断的累加。今天要说的这个缓冲运动就是要让小球的速度越来越小最终停下来。
看示例：
如上图，这种缓冲效果应该是我们在实际开发过程中用到的最多的了.不管是css3还是jquery都是比较容易实现，但是好像我们是否只是停留在会用的基础上呢？
那么接下来我将为大家揭秘这种缓冲动画的原理。
缓冲运动的条件小球有一个起始点和一个目标点，从起始点减速运动到目标点Target.那么问题来了，如何让速度越来越小呢？下来划重点了。
我们之前的章节有讲到，路程(s) = 速度(v) * 时间(t);也就是说单位时间内，路程越小，速度越小，即小球的速度和距离成正比。
我们知道，小球从起始向目标点运动，距离越来越小，因此，我们可以从他们的距离来找出他们的速度之间的关系。
核心代码：
var target = { x:width / 4 * 3, y:height/4*3 }; //缓冲系数 var easeing = 0.05; ball.vx = (target.x - ball.x) * easeing; ball.vy = (target.y - ball.y) * easeing; ball.x = ball.vx; ball.y = ball.vy; ball.render(context);
我们将目标点和起始点的坐标差分别*缓冲系数，计算出小球在水平和垂直方向的速度，然后应用到小球自身效果就完成了。距离越来越小，相应的速度也会越来越小。
完整的代码：
索取代码可以私信我
其实只有这么一坨代码，明白了原理，代码都是浮云。
同样的思路，完全可以无缝移植到Dom动画中来。有兴趣的可以试一下哦。
接下来我们来说一个稍微复杂一点的动画，我把它称之为弹跳动画。如下图，感觉要比传统的缓冲动画要更有意思一点。
弹跳运动
看到这种像弹簧一样的效果，我们用css3和jquery依然可以很容易的实现它，那么我又要来揭秘这种运动的原理了。
分析：我们的小球依然有一个始起点和一个目标点Target。这里我只做了一水平方向的运动，垂直方向原理一样。
和缓冲运动一样，弹跳运动也有一个弹跳系数，我把它设置为
var easeing = 0.15;//这个系数可根据自己的喜好来做相应的调整。
设置起始点：var ball = new Ball({x:100,y:100})
设置目标点：var target = {x: width / 2};//为屏幕正中间
接下来我们计算水平方向的加速度
var ax = (target.x - ball.x ) * easeing;
到了这一步，我们可以分析ax的取值应该是：[100 ~ (100 (target.x-100) * 2) ]
这时候小球会一直来回的弹跳，并不会停下来。
那么怎么让小球停下来呢，那么，很容易想到，我们又要用户前面用到的摩擦力了。
定义摩擦力系数：var k = .9;
最终我们来计算速度。
核心代码：
var ax = (target.x - ball.x ) * easeing;//加速度 ball.vx = ax ; ball.vx *= k; ball.x = ball.vx;
下面是完整的代码：
仔细分析我的代码，其实不难发现最终小球还是不会停止，它的速度不会为0，那么这时候我们就需要判断一下，将小球的坐标最终落在目标点上。
终止条件和前面的章节中讲到的反弹停止是一样的。
- 小球的速度足够小
- 小球距离目标点足够近。
以上就是今天的全部分享。有收获的请点赞，不喜欢的解散。。。
未完待续。。。
