万有引力特效？我用canvas就能实现了

点击上方“程序员黑叔”，选择“置顶或者星标”

你的关注意义重大！

先看最终效果^[2]：

先说明一下，此效果启发于第二本参考书。

中心红色球是太阳，水蓝色小球是地球。可以看出地球的运行轨道是椭圆，验证了开普勒三定律的第一条。在近日点运行速度比较快，远日点比较慢，符合常识。

你猜测我写这个效果用了多长时间？

不到半个小时吧，其实掌握原理后实现起来还是比较快的。

原理相对来说还是简单的，前提是要使用向量工具。

1. 用向量来思考问题

本系列的前几篇文章，都是使用 x、y 轴分量来计算小球的物理矢量。

fx = f * Math.cos(angle)
fy = f * Math.sin(angle)
ax = fx / ball.m
ay = fy / ball.m
vx += ax
vy += ay
ball.x += vx
ball.y += vy

上述代码中，f 是力，m 是质量，a 是加速度，v 是速度。而带后缀的是相应矢量的分量，比如 fx 是力矢量 f 的横轴分量。

上述运算，本质上还是使用小学的加减法，没有真正用到矢量或者说向量。

假设我们向量 p 表示小球当前位置，向量 v 表示当前速度，那么下一帧的小球的位置为下图中的粉色向量。不用再分别计算 x 轴和 y 轴的分量。

为了表示向量这一数据类型，我们简单地封装一个 Vector 类：

class Vector {constructor(x, y) {this.x = xthis.y = y}scale(n) {this.x *= nthis.y *= nreturn this}mag() {return Math.sqrt(this.x * this.x + this.y * this.y);}normalize() {var m = this.mag()if (m != 0 && m != 1) {this.scale(1 / m)}return this}add(other) {this.x += other.xthis.y += other.yreturn this}sub(other) {this.x -= other.xthis.y -= other.yreturn this}static add(one, other) {return new Vector(one.x + other.x, one.y + other.y)}static sub(one, other) {return new Vector(one.x - other.x, one.y - other.y)}static dist(one, other) {var dx = one.x - other.xvar dy = one.y - other.yreturn Math.sqrt(dx * dx + dy * dy)}
}

这些向量操作都很简单，比如 add 表示当前向量加上一个新向量，mag 用来求取向量大小，scale 用来放缩向量的大小，normalize 用于计算单位向量等等。虽然底层仍是 x、y 分量用于计算。但是我们思维的最小单位是向量，维度高级一些。

比如之前的代码用向量的形式表示：

a = f.scale(1 / ball.m)
v.add(a)
ball.p.add(v)

有了向量工具，处理万有引力公式起来就很 easy 了。

2. 动画原理

这部分，我们来大体看下开篇动画的原理，看看是否真的简单。

地球人都知道牛顿的万有引力定律这一伟大发现：

任意两个质点有通过连心线方向上的力相互吸引。该引力大小与它们质量的乘积成正比与它们距离的平方成反比，与两物体的化学组成和其间介质种类无关。

其中 G 是万有引力常数，动画里我们简化为 1 就行。

把公式写成代码：

var dist = Vector.dist(sun.p, earth.p)
var f = sun.m * earth.m / (dist * dist)

而这个 f 目前仍是标量，只有大小，没有方向。地球受到的万有引力，方向应该是朝向太阳的，因此完整代码是：

function gravity (sun, earth) {var dist = Vector.dist(sun.p, earth.p)var f = sun.m * earth.m / (dist * dist)var vec = Vector.sub(sun.p, earth.p)return vec.normalize().scale(f)
}

之所以封装成函数是因为地日之间的万有引力是时刻发生变化的。其中向量 vec 方向是朝向太阳的，对其取单位向量，并放缩大小为 f。这样，最终返回的结果是引力向量。

因此地球的运动核心代码很容易写出来：

var g = gravity(sun, earth)
var a = g.scale(1 / earth.m)
v.add(a)
earth.p.add(v)

核心原理就是这些，剩下就是实现了。

3. 实现

太阳和地球采用的都是小球模型：

class Ball{constructor() {this.p = new Vector(0, 0)this.m = 0this.radius = 20this.color = 'white'}draw(context) {context.save()context.translate(this.p.x, this.p.y)context.beginPath()context.arc(0, 0, this.radius, 0, 2 * Math.PI)context.fillStyle = this.colorcontext.fill()context.restore()}
}

这段代码不是本系列第一次出现了，唯一不同的是原先的 this.x 和 this.y 改用向量 this.p 替换了。

初始化太阳和地球：

var sun = new Ball()
sun.radius = 30
sun.color = 'red'
sun.p = new Vector(canvas.width / 2, canvas.height / 2)
sun.m = 1000var earth = new Ball()
earth.radius = 3
earth.color = 'aqua'
earth.p = new Vector(canvas.width / 2 + 100, canvas.height / 2 + 80)
earth.m = 1

其中太阳和地球的质量比是 1000: 1。地球的位置比较随便选取了一个位置。

接下来就是原理的核心代码，其中我们假设太阳不动的。

;(function drawFrame() {window.requestAnimationFrame(drawFrame)context.clearRect(0, 0, canvas.width, canvas.height)var g = gravity(sun, earth)var a = g.scale(1 / earth.m)v.add(a)earth.p.add(v)earth.draw(context)sun.draw(context)
})()

这里有一个至关重要的点，是地球需要有个初始速度 v 。

不同大小和方向的速度，地球的运行轨道会有所不同。假如初始速度为 0 向量的话，根据万有引力，地球将会撞向太阳：

当然这里地球撞上太阳后，没有销毁，但是地球迅速远离太阳。因为速度比较快，万有引力再也拉不回来了。这其实就是三体小说中的“引力弹弓”。

我们让太阳尺寸小点，速度选择为：

var v = new Vector(-0.3, 1)

引力弹弓效果将更好些：

假如速度选择为：

var v = new Vector(-0.8, 1).scale(2.2)

小球将会走圆形轨道：

你可以随便调节参数，尝试其他情形，看看效果。

点击查看最终效果和完整代码^[3]。

感谢你看到这里，希望有所帮助。

本文完。

下面的内容是关于本系列的介绍。

2019年末，本人立了个flag，2020年要研究透canvas动画技术。

（图中二维码是我的唯一微信号，如有掘友想加的，麻烦备注下掘金哈。）

在这个系列，我想写一些常见动画知识，本文是第 5 篇，篇幅可能会长短不一。更多的请查看我的个人主页，或者《系列目录》^[4]。

因为篇幅问题，根据以往的经验，赞数不会太多，毕竟大家都喜欢给那种短时间看不完的文章点赞。嗯，我好像也是这样。^_^

其实写文章，主要还是给自己看的，算是自我进步的一个见证吧。抱着这种心态也许能好些。

另外关于canvas技术，我目前完整看完了3本书。算是过了基础一关。

1.《HTML5 Canvas核心技术》^[5]

2.《HTML5+JavaScript动画基础》^[6]

3.《WebGL编程指南》^[7]

本系列一些文章可能会参考里面的知识体系，对于一些属于领域共识知识，如有局部雷同，只能说：“自己凭本事学来的，怎能算抄袭。。。”。

开玩笑了，想法来源能提一句还是要提一句的。特别喜欢《精英日课》文章里的一段话：

至于文章内容，canvas的API，本系列可能不会准备逐条介绍了，还请初学的童鞋见谅哈。MDN都有的，挺详细的。同时，文章中遇到的还是会简单提下。主要核心是阐述一些技巧和原理层面的知识个人理解吧。另外也打算分析一些codepen上炫酷动画的实现原理，如果有时间可能会分析几个动画引擎，当然都是2D的。

最后

感谢阅读，欢迎分享给身边的朋友，
记得关注噢，黑叔带你飞！

亲，点这涨工资