用途:在网页中用 Anime.js v4 创建 JavaScript 动画,包括元素入场、时间线编排、滚动驱动、拖拽交互、SVG 变形与描边、文本拆分和布局动画。
主要能力:animate(targets, params) 动画元素;createTimeline() 编排序列;createAnimatable() 处理可动画数值;createTimer() 做帧循环与倒计时;createDraggable() 实现拖拽;onScroll() 做滚动联动;createScope() 管理作用域、媒体查询与清理;splitText() 拆分字符或词;createLayout() 做 FLIP 布局动画;svg.morphTo()、svg.drawLine() 处理 SVG;waapi.animate() 提供轻量 Web Animations API 封装;eases、spring()、cubicBezier() 提供缓动;utils、stagger() 提供工具与错开;engine 控制全局时钟、fps 与暂停。
使用方式:安装 npm install animejs,或通过 CDN 引入后使用 anime.animate。v4 采用具名导入,如 import { animate, createTimeline, stagger, utils, onScroll, createDraggable, splitText, createScope, createLayout, waapi, svg, eases, cubicBezier, spring, engine } from 'animejs'。
v3 到 v4 迁移要点:anime({ targets }) 改为 animate(targets, params);anime.timeline() 改为 createTimeline();anime.stagger/set/get/remove/random 改为 stagger 或 utils 上的方法;translateX/Y/Z 改为 x/y/z;easing 改为 ease 并去掉 ease 前缀(如 outExpo);direction: 'alternate'/'reverse' 改为 alternate: true / reversed: true;不再有默认导出,需用具名导入;spring 与 cubicBezier 改用对象或数值参数;时间线 .add() 的目标作为第一个参数。
限制与注意:滚动动画需传 autoplay: onScroll({...});React 中应使用 createScope() 并在清理时调用 .revert();避免直接动画 width/height,优先用 scaleX/scaleY 或 x/y。具体参数、回调与完整示例需查阅对应参考文件,资料未提供更细的收费、平台与效果说明。