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