为什么做这个事 #

今天去面试，工作是开发一个3D内容的编辑器，面试官问了我一个问题

做一个动画使一个元素从一个位置移动到另一个位置，移动的过程的速度是可配置的。怎么实现这种配置

我的回答是用一个曲线模拟速度，曲线有JS代码计算。曲线上有拐点，可以控制各个段落的斜率。

回到家后，我想到chrome在调试css的transition时，chrome会提供跟我们一个界面来调贝塞尔曲线，它就跟面试官问的问题中的那个东西。所以我就想着做一个这东西出来，进行开源。也是作为练习。而且我还打算做一个开源编辑器，没准以后也会用到。

开始做 #

贝塞尔曲线应该有一个计算公式，我将公式转换成JS代码就可以了。于是查了 维基百科。

知道了多项式公式：

其中有个括号n,i，不知道是什么，查了一下，它是「组合」：

有了这两个公式，代码就不困难了。

写好代码后把计算这部分做成了一个npm包，发布到了npm仓库，代码放在了github¹

npm install @wangshushuo/bezierjs

绘制canvas #

canvas的api我不熟，多亏了MDN的 canvas文档，需要用到画圆、写字、画线条、填充颜色等API。

下面是做出来的效果，代码在Github²

做出来以后决定很有成就感，收获了这些：

• 了解到了如何计算贝塞尔曲线和组合
• 熟悉了一波canvas的api
• 第一次发布了npm包
• 第一次在代码中使用了TypeScript的枚举