每日前端宝藏库 | anime.js⏳✨
🎯 “用代码写动画，像写诗一样流畅。” —— anime.js 用户集体认证 ✨
🎯 一句话介绍
anime.js 是一个 超轻量（仅 18KB） 的 JavaScript 动画引擎 🚀，支持 CSS、SVG、DOM、JS 对象动画，API 简洁如诗，让你轻松实现丝滑、复杂、高性能的动画效果！💫🌈
🎵 它不只动起来，它还会呼吸。🌬️💖
🤔 为什么你需要它？
| 传统方案 ❌ | anime.js ✅ |
|---|---|
| CSS 动画难控制流程 🤯 | JavaScript 控制，可暂停、反向、进度调节 ▶️⏸️⏪ |
| GSAP 太重（虽然更强）📦 | 仅 18KB，轻量项目首选 🛶 |
| requestAnimationFrame 手写太累 😩 | 声明式 API，写起来像在讲故事 📖 |
| SVG 动画复杂难搞 🌀 | 原生支持 SVG 路径动画 🐍 |
🚀 快速上手：3 步起飞！
Step 1️⃣：安装它！
npm install animejs
# 或 yarn
yarn add animejs
💡 也支持 CDN 快速引入：
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
Step 2️⃣：引入并启动！
import anime from 'animejs/lib/anime.es.js';
Step 3️⃣：第一个动画！✨
anime({targets: '.box', // 🎯 目标元素translateX: 250, // ➡️ 横向移动rotate: '1turn', // 🌀 旋转一圈backgroundColor: '#FFF066', // 🎨 背景色变化borderRadius: 8,duration: 1500, // ⏱️ 持续时间easing: 'easeInOutExpo' // 📈 缓动函数，丝般顺滑
});
🎉 效果：一个盒子平滑移动 + 旋转 + 变色，一气呵成！
💻 在线测试沙盒 🧪
👉 快来动手试试动画的魔力吧！✨
// ✏️ 复制到浏览器控制台或在线环境运行
const animation = anime({targets: '.demo-box',scale: [1, 1.5, 1], // 📏 缩放：1 → 1.5 → 1rotate: '1turn',backgroundColor: '#FF5722',borderRadius: ['0%', '50%'], // 📐 圆角变化duration: 2000,easing: 'spring(1, 80, 10, 0)', // 🌿 弹性缓动，超好玩！loop: true, // 🔁 无限循环direction: 'alternate' // ↔️ 来回播放
});
🔗 在线测试推荐：
- StackBlitz - anime.js 沙盒
🎨 核心特性一览 🌟
| 特性 | 说明 | 示例 |
|---|---|---|
| 多目标支持 | 选择器、数组、DOM 列表 | targets: '.item' |
| 路径动画 | SVG 路径追踪 🐛 | targets: 'path' |
| 弹性缓动 | spring() 函数，超真实物理感 🌿 | |
| 关键帧动画 | 多阶段动画流程 🎞️ | keyframes: [...] |
| 控制方法 | pause() play() reverse() seek() ⏯️ | |
| JS 对象动画 | 不仅是 DOM，数据也能动！📈 | targets: { val: 0 } |
🧩 实用动画示例 🎬
1️⃣ 文字打字机效果 ✍️
anime.timeline().add({targets: '.text',opacity: [0, 1],translateY: [40, 0],easing: 'easeOutExpo',duration: 1200}).add({targets: '.text',letterSpacing: ['0.1em', '0em'],delay: 500,duration: 800});
2️⃣ SVG 路径绘制 🐍
anime({targets: 'svg path',strokeDashoffset: [anime.setDashoffset, 0],duration: 2000,easing: 'easeInOutSine'
});
✅ 效果：像“手绘”一样画出 SVG 图标！🎨
📊 适用场景 🎯
- 🎯 按钮悬停动效 🔘
- 📱 页面加载动画 🌀
- 🖼️ SVG 图标动效 🐍
- 🎮 交互式游戏 UI 🎮
- 📊 数据可视化动画 📈
🏁 总结：anime.js 是你的“动画诗篇”！📜💖
| 评分 | 内容 |
|---|---|
| 🚀 易用性 | ⭐⭐⭐⭐⭐ |
| 🎨 功能丰富度 | ⭐⭐⭐⭐☆ |
| 📦 体积 | ⭐⭐⭐⭐☆ |
| 🖼️ 视觉表现力 | ⭐⭐⭐⭐⭐ |
| 💡 推荐指数 | 🔥🔥🔥🔥🔥 |
✅ 一句话推荐：
如果你想让页面“活”起来，anime.js就是那支魔法画笔！🖌️✨
轻量、强大、优雅，动画从此上瘾。😎