用途:Anime.js 是框架无关的 JavaScript 动画引擎,适用于 DOM 元素、CSS 属性、SVG 属性与 JavaScript 对象的动画,可在 React、Vue 或原生 JS 中使用。
主要能力:通过 anime() 创建动画,targets 支持 CSS 选择器、DOM 元素、元素数组或 JS 对象;可动画化 CSS 属性、独立 transform(如 translateX、rotate、scale)、SVG 属性(d 路径变形、strokeDashoffset 描边绘制)及对象数值。anime.timeline() 支持相对定位的时间轴编排(如 '-=500'、'+=200')。anime.stagger() 提供交错延迟,支持 grid、from(center/first/last/索引/坐标)与 axis。内置 spring、steps、cubicBezier 缓动,支持 keyframes、direction、loop 及 play/pause/restart/reverse/seek 播放控制。anime.path() 可实现路径跟随。
使用方式:安装后 import anime from 'animejs',调用 anime({ targets, ... }) 即可;时间轴用 anime.timeline().add(...) 链式添加。React 中可在 useEffect 内创建动画并在清理函数中 pause()。
适用场景:时间轴序列动画、多元素交错入场、SVG 变形与线条绘制、关键帧动画、滚动触发动画(autoplay: false 配合 seek)。
限制与注意:宽度等属性需带单位(如 '200px');不能直接动画 transform 字符串,应使用独立 transform 属性;大量元素(如 1000+)或无限循环建议改用 CSS 动画;组件卸载时需暂停动画。资料未提供具体收费、价格与平台信息。