先看下平面拖拽效果：
还有水平拖放版本：
先说明一下，这个弹簧效果受启发于第二本参考书。
不知道你看到后有没有觉得很复杂，为了完成它，我大约用了一个小时左右。
本文会详细介绍一下实现的具体原理，研究明白后，动画的运动学基础应该也算是过关了吧。
1. 运动学一般原理
首先从运动动画的基本原理说起。
我们知道，根据 requestAnimationFrame 实时更新小球 ball 的坐标就能实现动画。
ball.x += 3
ball.y += 4
每一帧，小球向右移动 3px，向下移动 4px。其中 3 和 4 就是速度的刻画。因此可以把它们分别定义成水平速度和垂直速度。
vx = 3
vy = 4
ball.x += vx
ball.y += vy
上面代码中速度是常量，因而运动是匀速直线运动。如果要加速运动，那么就需要引入加速度：
ax = 0.5
ay = 1
vx += ax
vy += ay
ball.x += vx
ball.y += vy
根据牛二定律，力与加速度成正比。
f = m * a
我们假设小球的质量是单位 1，那么就可以把力的模型引入进来。比如小球的抛射运动很容易实现：
vx = 2.5
vy = -6
gravity = 0.1
vy += gravity
ball.x += vx
ball.y += vy
效果如下：
其中小球类的代码仍是常规的实现：
class Ball{
constructor() {
this.x = 0
this.y = 0
this.radius = 20
}
draw(context) {
context.save()
context.translate(this.x, this.y)
context.fillStyle = 'red'
context.beginPath()
context.arc(0, 0, this.radius, 0, Math.PI * 2)
context.fill()
context.restore()
}
}
说到力，为了模拟真实世界物体的运动，有时我们还要考虑摩擦力。这里我们假设运动物体的速度每一帧后都会衰减。这里使用模型：
friction = 0.99
vx *= friction
vy *= friction
ball.x += vx
ball.y += vy
每一帧速度都打会 0.99 折。0.99 看起来接近 1，但是它是指数衰减的。浏览器一般帧率 60 左右，因此 0.99 的 60 次方降很快降到一个接近 0 的数。
效果如下：
2. 胡克定律
有了一般运动学原理的铺垫后，接下来正式分析开篇动画的原理。
其中小球除了受重力和摩擦力的影响外，还受到了弹簧的力。
高中我们都学过胡克定律：弹簧自身受到的力与弹簧的形变量成正比。
F = k * x
其中 k 是弹簧系数，由弹簧自身决定。x 是弹簧的形变量。
跟据作用力与反作用力相等，小球受到的力为：
f = -k * x
因此水平简谐运动的关键代码：
var x = ball.x -spring.x - initLength
var f = -k * x
vx += f
ball.x += vx
spring.length = ball.x - spring.x
其中 x 是弹簧形变量。f 是小球受到的弹簧力，最后两句代码是更新小球的速度和弹簧的当前长度。
这里没有加入摩擦力，因此它会无限运动下去。效果如下：
为了让小球能运动起来，初始时，把小球拉开了一段距离。这个距离也是弹簧的振幅。
var amplitude = 70
ball.x += amplitude
var vx = 0
其中弹簧主要使用二次贝塞尔曲线 quadraticCurveTo 模拟的。
class Spring{
constructor(length) {
this.x = 0
this.y = 0
this.angle = 0
this.length = length
}
draw(context) {
context.save()
context.translate(this.x, this.y)
context.rotate(this.angle)
context.strokeStyle = 'white'
context.beginPath()
context.moveTo(0, 0)
var n = 16
var h = 25
var d = (this.length - 2 * h) / n
context.lineTo(h, 0)
for (var i = 0; i < n; i++) {
var dir = i % 2 == 0 ? 1 : -1
context.quadraticCurveTo(h + d * ( i + 0.5), 20 * dir, h + d * (i + 1), 0)
}
context.lineTo(this.length, 0)
context.stroke()
context.restore()
}
}
下面分析一下开篇效果实现需要注意的细节。
3. 力的合成与分解
在上面的基础上，加入摩擦力和拖拽的逻辑，很容易实现开篇的第二个效果。这里不再过多解释了。
而第一个效果稍微复杂一点。首先每一帧都要更新弹簧头的位置。
spring.x = mouse.x
spring.y = mouse.y
此时小球收到的弹簧力是：
var dx = ball.x - spring.x
var dy = ball.y - spring.y
var x = Math.sqrt(dx * dx + dy * dy) - initLength
var f = -k * x
为了求出水平和垂直的加速度，此时就需要力的分解了：
根据三角关系有：
var angle = Math.atan2(dy, dx)
var fx = f * Math.cos(angle)
var fy = f * Math.sin(angle)
最后是弹簧力、重力和摩擦力合成逻辑：
vx += fx
vy += fy
vy += gravity
vx *= friction
vy *= friction
ball.x += vx
ball.y += vy
另外注意一点是，在更新小球后位置后，因为小球位置变了，因此还需要计算弹簧的此时的新长度和方向。
感谢你看到这里，希望有所帮助。
本文完。
下面的内容是关于本系列的介绍。
2019年末，本人立了个flag，2020年要研究透canvas动画技术。
（图中二维码是我的唯一微信号，如有掘友想加的，麻烦备注下【掘金】哈。）
在这个系列，我想写一些常见动画知识，本文是第4篇，篇幅可能会长短不一。更多的请查看我的个人主页，或者《系列目录》。
因为篇幅问题，根据以往的经验，赞数不会太多，毕竟大家都喜欢给那种短时间看不完的文章点赞。嗯，我好像也是这样。^_^
其实写文章，主要还是给自己看的，算是自我进步的一个见证吧。抱着这种心态也许能好些。
另外关于canvas技术，我目前完整看完了3本书。算是过了基础一关。
本系列一些文章可能会参考里面的知识体系，对于一些属于领域共识知识，如有局部雷同，只能说：“自己凭本事学来的，怎能算抄袭。。。”。
开玩笑了，想法来源能提一句还是要提一句的。特别喜欢《精英日课》文章里的一段话：
至于文章内容，canvas的API，本系列可能不会准备逐条介绍了，还请初学的童鞋见谅哈。MDN都有的，挺详细的。同时，文章中遇到的还是会简单提下。主要核心是阐述一些技巧和原理层面的知识个人理解吧。另外也打算分析一些codepen上炫酷动画的实现原理，如果有时间可能会分析几个动画引擎，当然都是2D的。
再次感谢你阅读到这里。下一篇文章见。
