一、KUTE.js 的特点
- 高性能：KUTE.js 是基于
requestAnimationFrame实现的，因此能够确保动画在浏览器中高效运行。 - 轻量级：该库体积小，仅有几 KB，适合用于性能敏感的项目。
- 多种动画支持：支持 CSS、SVG、Canvas 和 HTML 元素的动画，使其非常灵活。
- 丰富的缓动函数：提供多种内置缓动函数，支持用户自定义缓动。
- 简单易用的 API：用户可以通过简单的 API 创建和管理动画。
二、安装 KUTE.js
1. 使用 npm 安装
在项目目录中打开终端，运行以下命令：
npm install kute.js
2. 使用 CDN 引入
在 HTML 文件的 <head> 标签中添加以下代码：
<script src="https://cdn.jsdelivr.net/npm/kute.js"></script>
三、基本用法
KUTE.js 的基本使用分为以下几个步骤：
1. 选择元素
使用常规的选择器选择要应用动画的元素，例如：
const box = document.querySelector('.box');
2. 创建动画
使用 KUTE.fromTo() 方法创建动画。这种方式允许你定义动画的起始和结束状态。
语法：
KUTE.fromTo(element, from, to, options).start();
参数说明：
- element：要应用动画的 DOM 元素。
- from：起始状态的属性值对象。
- to：结束状态的属性值对象。
- options：可选参数，用于配置动画效果。
示例：
KUTE.fromTo(box, { opacity: 0, scale: 0 }, { opacity: 1, scale: 1 }, { duration: 2000 }).start();
在这个示例中，box 元素将从透明和缩放为 0 的状态逐渐变为完全可见并缩放到 1。
3. 启动动画
只需调用 .start() 方法即可启动动画。可以在创建动画时直接调用，或者将其分开。
四、动画属性
KUTE.js 支持多种 CSS 和 SVG 动画属性，以下是一些常用的属性：
-
CSS 属性：
opacity：透明度。transform：包括translate、scale和rotate。backgroundColor：背景颜色。width、height、margin、padding等。
-
SVG 属性：
stroke：边框颜色。fill：填充颜色。strokeWidth：边框宽度。d：SVG 路径的定义。
五、动画选项
KUTE.js 提供了丰富的选项来定制动画效果。以下是一些常用选项：
- duration：动画持续时间，单位为毫秒。
- easing：缓动函数，用于控制动画的速度变化。
- repeat：动画重复次数（
Infinity表示无限重复）。 - delay：延迟开始动画的时间（毫秒）。
- onComplete：动画完成后的回调函数。
示例：
KUTE.fromTo(box, { opacity: 0 }, { opacity: 1 }, {
duration: 1500,
easing: KUTE.Easing.EaseInOutQuad,
repeat: 2
}).start();
在这个示例中，动画将持续 1.5 秒，使用缓动函数 EaseInOutQuad，并重复两次。
六、事件回调
KUTE.js 支持多个事件回调，可以在动画的不同阶段执行特定的代码。以下是几个常用的回调函数：
- onStart：在动画开始时触发。
- onComplete：在动画完成时触发。
- onUpdate：在每一帧更新时触发。
示例：
KUTE.fromTo(box, { opacity: 0 }, { opacity: 1 }, {
duration: 2000,
onStart: () => console.log('动画开始！'),
onComplete: () => console.log('动画完成！')
}).start();
七、复杂动画示例
KUTE.js 支持同时对多个属性进行动画，下面是一个复杂的动画示例：
const box = document.querySelector('.box');
KUTE.to(box, {
translateX: 200,
translateY: 100,
rotate: 360,
backgroundColor: '#ff0000'
}, {
duration: 3000,
easing: KUTE.Easing.EaseInOutBounce,
onComplete: () => console.log('复杂动画完成！')
}).start();
在这个示例中，box 元素将在 3 秒内平移 200 像素到右侧，100 像素到下方，并完成一个 360 度的旋转，最后背景颜色变为红色。
八、组合动画
你还可以通过链式调用将多个动画组合在一起，形成更复杂的效果。例如：
const box = document.querySelector('.box');
const tween1 = KUTE.fromTo(box, { opacity: 0 }, { opacity: 1 }, { duration: 2000 });
const tween2 = KUTE.to(box, { translateY: 100 }, { duration: 1000 });
tween1.start().then(() => {
tween2.start();
});
在这个示例中，首先执行 tween1，在其完成后执行 tween2。
九、实际应用场景
KUTE.js 可以用于多种场景，例如：
- 网页加载动画：在页面加载完成之前，显示加载动画。
- 按钮点击效果：为按钮添加点击效果，增强用户交互体验。
- 图表动态展示：在数据变化时，使用动画展示数据的变化过程。
- 元素出现/消失效果：在用户滚动或触发事件时，使用动画效果显示或隐藏元素。
