欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。
前面我们说到了小球的弹跳运动，通过一个方向的加速度和摩擦力去影响小球的动画，其目标点也是一个固定不变的，似乎有些单调。
那么我们今天继续小球的弹跳运动的深入，先来看下面的示例：
相信以上的类似动画大家应该看见过很多，这样的动画很容易被大家所接受，原因很简单，因为它完全符合我们现实生活中的物理现象。
接下来我带着大家来分析一下这种动画的制作过程。
分析
- 小球是和我们的鼠标进行交互的，因此我们在兼听画布元素的鼠标移动事件，并获取鼠标相对于画布的坐标。
- 把鼠标转换后的坐标作为小球的运动目标点Target
- 定义弹跳系数，摩擦系数和重力。
- 分别计算X轴和Y轴的加速度。
- 分别将小球的速度*摩擦系数，这样才能便小球速度不断变小，最终停下来。
- 从上面的gif图可以看出，小球中心点和鼠标有一定的距离，这个距离我们就以重力去表示了。
- 最后去绘制小球和鼠标两点的连线。
核心代码：
//鼠标起始位置。
var mouse = {x:0,y:0};
//兼听画布的鼠标移动事件，并计算出鼠标相对于画布的坐标。
canvas.onmousemove = function(e){
mouse.x = e.pageX - canvas.offsetLeft;
mouse.y = e.pageY - canvas.offsetTop;
}
//定义弹动系数，摩擦系数，重力常量
var easeing = 0.15,k = .9,g = 15;
//两个方向的加速度的计算方法（和昨天一样）
var ax = (mouse.x - ball.x ) * easeing;
var ay = (mouse.y - ball.y ) * easeing;
//将加速度附加到小球的速度上
ball.vx += ax ;
ball.vy +=ay;
//给小球加上摩擦力的影响。
ball.vx *= k;
ball.vy *= k;
//将小球的最终速度作用在小球的xy属性上。
ball.x += ball.vx;
ball.y += ball.vy;
//由于小球和鼠标有重力的影响，所以我们给y轴的速度一个重力的作用。
ball.vy += g;
最终全部代码：
其实看代码数量并不多，大家刚开始可能是被鼠标晃晕了头，其实可以这样想，鼠标操作是一个循环的操作，假如鼠标就动一下，把这个过程的动画实现了，其它的就好办了。
总结：
- 其实不难发现，任何看看似复杂的动画，细心的去分析，拆解找到其中的原理，我们也可制作我们自己想要的动画。
- 任何项目的开发，动画的交互造成不能天马行空，一定要符合物理现象，只有这样才能被用户所接受。
- 物理学中的重力、摩擦力、加速度在图形学中被广泛应用。多尝试、理解方可熟能生巧。
以上就是今天的分享的内容，喜欢的点赞关注，不喜欢的解散。。。
这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中。。。
未完待续。。。