欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。

前面的章节我们讲到了小球的摩擦力，抛物线曲线运动以及相就的公式的应用。那么今天我们来说下另外两种运动形式。

缓冲运动

之前我们的速度有匀速运动和匀加速运动，他们的速度恒定为一个值或者不断的累加。今天要说的这个缓冲运动就是要让小球的速度越来越小最终停下来。

看示例：

如上图，这种缓冲效果应该是我们在实际开发过程中用到的最多的了.不管是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，那么这时候我们就需要判断一下，将小球的坐标最终落在目标点上。

终止条件和前面的章节中讲到的反弹停止是一样的。

小球的速度足够小小球距离目标点足够近。

以上就是今天的全部分享。有收获的请点赞，不喜欢的解散。。。

未完待续。。。