用途:该技能用于在编写 anime.js v4 动画时给出正确语法与 API 用法。v4 与 v3 差异较大,采用模块化设计(完整约 10KB,仅 WAAPI 约 3KB)。
安装与导入:npm install animejs;ESM CDN 可用 import { animate } from 'https://cdn.jsdelivr.net/npm/animejs/+esm'。v4 使用命名导出而非默认 anime 对象,可按需导入 animate、stagger、createTimeline、utils 等,也支持 animejs/animation、animejs/timeline、animejs/draggable、animejs/events、animejs/utils、animejs/waapi 等子路径以减小体积。
主要能力:animate(targets, parameters) 支持 CSS、变换、CSS 变量、SVG 与 HTML 属性、JS 对象属性;值可为数字、带单位、相对值、[from,to]、{from,to} 及函数式取值;支持逐属性关键帧、播放设置(duration、delay、loop、alternate、reversed、autoplay、playbackRate、frameRate)、回调与 Promise。缓动使用 ease(非 easing),名称省略 ease 前缀,支持 cubicBezier、createSpring、steps 与自定义函数。stagger 支持 start、from、reversed、区间与 grid。createTimeline 支持相对/绝对时间、标签与 call。另有 onScroll 滚动联动、svg 工具(createDrawable、morphTo、createMotionPath)、createDraggable、createAnimatable、splitText、createLayout、waapi 包装与 utils 工具,并提供 React 的 createScope 集成。
限制与注意:ease 取代 easing;loop:1 表示重复一次;无默认 anime 对象;direction 被 alternate/reversed 取代;弹簧改用 createSpring;SVG 辅助函数移至 svg 命名空间;play() 始终向前,继续原方向用 resume()。更详细的 API 签名与示例见其 references/api-reference.md 与 references/examples.md。