什么是 linearpath?
linearpath 是一个 JavaScript 库，用于创建路径动画效果。它基于 Bezier.js，但是针对路径动画进行了优化，能够实现更加平滑的动画效果。
相比和一般的贝塞尔曲线动画，linearpath 提供了更方便的方式去控制路径的起点、终点和控制点，从而达到更加准确的动画效果。
如何安装 linearpath？
使用 npm 安装:
npm install linearpath
或者在 HTML 文件中引入：
<script src="path/to/linearpath.js"></script>
使用 linearpath 创建路径动画
要使用 linearpath 创建路径动画，需要先定义一个路径。
let path = new linearpath.Path() .moveTo(100, 100) .lineTo(200, 200) .quadraticCurveTo(300, 100, 400, 200);
我们定义了一个由三个点构成的路径。接下来我们就可以创建一个路径动画对象，并指定路径、时长和回调函数。
let anim = new linearpath.Animation(path, 2000, function(point) {
// 这里是回调函数，point 是当前动画的坐标点
element.style.left = point.x + 'px';
element.style.top = point.y + 'px';
});在这个例子中，我们给动画一个时长为2000毫秒。回调函数在动画执行过程中会被反复调用，可以让我们通过 point 参数在每一帧中更新元素位置。
最后，我们只需要调用 anim.play() 方法来启动动画。
anim.play();
一个完整的例子
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------
-------
------
---- -------- ------------------------------------------------------------
------- -------------------------------------
--------
--- ---- - --- -----------------
------------ ----
------------ ----
---------------------- ---- ---- -----
--- ------- - -------------------------------
--- ---- - --- -------------------------- ----- --------------- -
------------------ - ------- - -----
----------------- - ------- - -----
---
------------
---------
-------
-------结论
使用 linearpath，我们可以很方便地创建路径动画，而不需要亲自计算贝塞尔曲线的控制点。因此，非常适用于那些想要快速实现路径动画的前端开发人员。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66918