Anime.js

Anime.js 简介

Anime.js 是一个快速、多用途且轻量的 JavaScript 动画引擎，拥有简单而强大的 API。它可以对 CSS 属性、SVG、DOM 属性和 JavaScript 对象进行动画处理，适用于各种网页交互场景。

核心特性

• 多目标支持：可同时动画化 CSS 属性、SVG 路径、DOM 属性及普通 JS 对象。
• 时间线控制：通过 createTimeline 精确编排多个动画的先后顺序。
• 交错动画：使用 stagger 轻松实现元素依次延迟的动画效果。
• 缓动函数：内置丰富的缓动曲线，也支持自定义贝塞尔曲线。
• 轻量高效：体积小巧，性能优异，适合移动端和桌面端。

快速上手

Anime.js V4 采用 ES 模块导入方式：

import { animate, stagger } from 'animejs';

animate('.square', {
  x: 320,
  rotate: { from: -180 },
  duration: 1250,
  delay: stagger(65, { from: 'center' }),
  ease: 'inOutQuint',
  loop: true,
  alternate: true
});

上述代码会让所有 .square 元素从中心开始交错延迟，执行水平移动和旋转动画，并循环往复。

适用场景

• 网页交互动画：按钮悬停、页面过渡、加载动画等。
• 数据可视化：图表元素的动态呈现。
• SVG 动画：路径绘制、形状变换等。
• JavaScript 对象动画：对任意数值属性进行补间动画。

版本与迁移

当前最新版本为 V4，与 V3 存在 API 不兼容变更。官方提供了详细的迁移指南，帮助开发者从 V3 平滑升级。

社区与支持

Anime.js 是开源项目（MIT 许可证），由 Julian Garnier 创建并维护。项目拥有活跃的社区和丰富的文档示例，同时接受 GitHub Sponsors 赞助以保持可持续发展。