简介
canvasanimator 是一款基于 Canvas 的动画库，它不依赖于其他库，可以自由地在项目中使用。@jworkshop/canvasanimator 是 canvasanimator 的一个 npm 包，使用起来非常方便。
安装
使用 npm 安装：
npm install @jworkshop/canvasanimator
或者使用 yarn 安装：
yarn add @jworkshop/canvasanimator
使用示例
假设我们有一个 Canvas 元素和一个按钮，我们想要在点击按钮时绘制一个圆圈动画。
首先，我们需要创建一个 CanvasAnimator 的实例并传入 Canvas 的上下文：
import CanvasAnimator from '@jworkshop/canvasanimator';
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const animator = new CanvasAnimator(ctx);然后，我们定义一个圆的绘制函数：
function drawCircle(progress) {
ctx.beginPath();
ctx.arc(100, 100, 50 * progress, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
}其中 progress 表示动画的进度，它是从 0 到 1 的一个数字。
接着，我们定义一个事件处理函数，当按钮被点击时，开始动画：
-- -------------------- ---- -------
----- ------ - ---------------------------------
-------------------------------- -- -- -
---------------
--------- -----
--------------- -----------------
------- -----------
---
---其中 duration 表示动画的时长，timingFunction 表示动画的缓动函数，render 表示动画的绘制函数。
最后，我们运行代码，点击按钮即可看到圆圈动画了。
深入理解
除了上面介绍的简单用法外，canvasanimator 还有很多高级用法。下面我们来深入理解一下它的原理和常用属性。
requestAnimationFrame
canvasanimator 使用了 requestAnimationFrame 函数来实现动画，它的优点是效率高且可以避免帧率不稳定的问题。在使用时，我们需要传入一个回调函数，这个函数会在下一帧绘制前被调用：
function animate() {
// 绘制画面
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);在这个例子中，我们定义了一个 animate 函数来绘制画面，并在函数中再次调用 requestAnimationFrame(animate) 来告诉浏览器，我们想在下一帧绘制前再次运行这个函数。
CanvasAnimator
CanvasAnimator 是 canvasanimator 的核心类，它提供了许多实用的属性和方法来管理动画。
我们可以通过 new CanvasAnimator(ctx) 来创建一个实例，其中 ctx 表示 Canvas 的上下文。在创建实例后，我们可以调用它的 play 方法来开始动画：
animator.play({
duration: 1000,
timingFunction: 'easeInOutQuart',
render: drawCircle,
});play 方法接受一个选项对象作为参数，其中 duration 表示动画的时长，timingFunction 表示动画的缓动函数，render 表示动画的绘制函数。
动画结束后，play 方法会返回一个 Promise 对象，我们可以在 Promise 中继续执行接下来的操作：
animator.play({
duration: 1000,
timingFunction: 'easeInOutQuart',
render: drawCircle,
}).then(() => {
// 动画结束后继续执行其他操作
});当然，我们也可以使用 async/await 来优雅地处理 Promise：
-- -------------------- ---- -------
----- -------- -------------- -
----- ---------------
--------- -----
--------------- -----------------
------- -----------
---
-- -------------
-
---------------缓动函数
canvasanimator 内置了很多常用的缓动函数，这些函数可以让动画更加自然流畅。缓动函数接受一个进度值 progress 作为参数，返回经过缓动处理后的值。
以 easeInOutQuart 缓动函数为例，它的实现如下：
function easeInOutQuart(progress) {
if ((progress /= 0.5) < 1) {
return 0.5 * progress ** 4;
} else {
return -0.5 * ((progress -= 2) * progress ** 3 - 2);
}
}我们可以使用这个函数来管理动画的进度值，并在绘制函数中使用它来获得缓动后的进度值：
function drawCircle(progress) {
const easedProgress = easeInOutQuart(progress);
ctx.beginPath();
ctx.arc(100, 100, 50 * easedProgress, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
}绘制函数
绘制函数负责在 Canvas 上绘制动画的每一帧，它的参数是动画的进度值。在绘制函数中，我们可以使用 clearRect 方法来清除画面，然后绘制新的图形。
画面清除
在绘制动画时，我们需要先清除原来的画面。可以使用 clearRect 方法来清除画布的指定区域：
ctx.clearRect(x, y, width, height);
其中 x、y、width 和 height 分别表示清除区域的左上角坐标和宽高。
总结
canvasanimator 是一款功能强大的基于 Canvas 的动画库，它使用简单，同时又提供了许多高级用法。掌握它的原理和常用属性，可以让我们更加灵活地运用动画，为网页增添更多的趣味和动感。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e244391