前言
在前端开发中，动画效果是一个重要的展示方式，而曲线动画效果更是一种非常吸引人的设计形式。实现曲线动画效果需要计算贝塞尔曲线，在线性运动中已经非常常见，它可以创造出更为自然、平滑的动画效果。如果你正在寻找一种使用简单的 npm 包，那么 art-anim-bezier-shape 可以为你提供一个快速实现曲线动画效果的解决方案。
安装和使用
在项目中可以通过 npm 包管理器的方式安装：
npm i art-anim-bezier-shape
安装完成后，你可以通过以下方式来使用它：
-- -------------------- ---- -------
------ ------------- ---- ------------------------
-- --------
----- ---- - --- ---------------
------- ------------- -- ----
--------- ----- -- ----
--------- --- ------- -- -
-- - ----------- -------
-- --------
--
---
-- ----
-------------通过以上代码，你可以实现一条缓动曲线上的动画。
API 说明
new ArtAnimBezier(options)
创建 ArtAnimBezier 实例，可以传递以下 options 参数：
easing: 默认值为'linear'，缓动函数名称或自定义缓动函数；duration: 默认值为1000，动画持续时间；points: 曲线关键点位置数组，默认为[[0, 0], [1, 1]]；onUpdate: 每一帧更新时执行的回调函数；onComplete: 动画完成时执行的回调函数。
start()
开始动画。
stop()
停止动画。
getCurrentTime()
获取当前动画时间。
getProgress()
获取当前动画进度。
getPoints()
获取当前曲线所有点。
setPoints(points)
更新曲线关键点位置数组。
示例代码
下面是一个基于 art-anim-bezier-shape 实现的简单曲线动画示例，该示例将一个图片沿着曲线路径运动：
-- -------------------- ---- -------
------ ------------- ---- ------------------------
-- ------
----- --- - -------------------------------
----- ------ - ----------------------------------
----- --- - ------------------------
-- ---------------
----- ------------- - ------ ----- ----- ----- ----- ------
----- ------------- - ----------------
-- --------- ---------------------
----- --------------------- - ----------------------------
-- ----------------------------------
-- -------------------------------
-- ------------------------------
-- -------- ---------- -
-------------------- ---- - ----
--
--- ---- - --------------------
--- ---- - --------------------
--- -------- - --
-------- ------------ -
---------------- -- ------------- ---------------
----------------
------------------------------- ---------------------
------------------
--------------------
--------------------
--------------------
--------------------
------------ - ----
------------- - ----
--
-------------
-
-------------
-- ------
----- ---- - --- ---------------
------- --------------
--------- -----
------- --------------
--------- --- ------- -- -
----- - - -------------------- - ------
----- - - -------------------- - ------
----- ------ - - - - - ------------------- - -- - ---
----- ------ - - - - - ------------------- - -- - ---
---- - -------
---- - -------
-------- - --
--
---
-- ----
-------------
-------- ------ -
----------------------------
-- --------- -- -- -
-------
-
-------------- - ------------
------------- - ------------
-
-------总结
借助于 npm 包 art-anim-bezier-shape，实现曲线动画效果的难度大大降低，同时也可以快速的搭建需要的动画。希望这篇教程能够帮助到你，在学习的过程中能够更好的理解和掌握这个工具的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601181e8991b448de04a