Anime.js v4
检查于 2026-10：animejs 4.5。
npm i animejs
import { animate, createTimeline, stagger, svg, utils, createScope } from 'animejs'
v3 → v4（旧教程使用 v3）
| v3 | v4 |
|---|---|
anime({ targets, ... }) | animate(targets, { ... }) |
easing: 'easeOutQuad' | ease: 'outQuad'（'inOutExpo'、'inOut(3)'……） |
anime.timeline() | createTimeline() |
direction: 'alternate' | alternate: true |
update、complete、begin | onUpdate、onComplete、onBegin |
持续时间和延迟的单位是毫秒（GSAP 使用秒）。
animate
animate('.square', {
x: 320, // translateX 的简写
rotate: { from: -180 },
opacity: [0, 1], // [from, to]
duration: 1250,
delay: stagger(65, { from: 'center' }),
ease: 'inOutQuint',
loop: true,
alternate: true,
})
目标：CSS 选择器、元素或普通对象（animate(obj, { value: 100, onUpdate: () => draw(obj.value) })）。
时间线
const tl = createTimeline({ defaults: { duration: 600, ease: 'outExpo' } })
tl.add('.title', { opacity: [0, 1], y: [40, 0] })
.add('.sub', { opacity: [0, 1] }, '-=300') // 上一个结束前 300 毫秒
.add('.dot', { scale: [0, 1], delay: stagger(80) }, '<<') // 与上一个同时开始
位置：100（绝对毫秒）· '+=100' / '-=100'（相对于上一个结束）· '<'（上一个结束）· '<<'（上一个开始）· '<<+=250' · 'Label'（通过 tl.label('Label') 设置）· stagger(10)。
SVG
animate(svg.createDrawable('.line'), { draw: ['0 0', '0 1'], duration: 2000 }) // 描边绘制，值范围 0–1 “start end”
animate('#shapeA', { d: svg.morphTo('#shapeB'), duration: 800 }) // 将路径 A 形变为 B
animate('.car', { ...svg.createMotionPath('#road'), duration: 4000 }) // 沿路径运动（x、y、rotate）
播放 / 擦洗
autoplay: false，然后 .play()、.pause()、.restart()、.reverse()、.seek(ms)、.complete()、.cancel()、.revert()（撤销所有内联样式）。
React
const root = useRef(null)
useEffect(() => {
const scope = createScope({ root }).add(() => {
animate('.box', { x: 200 }) // 选择器限定在 root 内
})
return () => scope.revert()
}, [])
用于视频
Anime.js 使用自己的时钟运行。在 Remotion 中，构建时暂停动画并按帧 seek——永远不要让它自动播放：
const frame = useCurrentFrame()
const { fps } = useVideoConfig()
const tl = useRef(null)
useLayoutEffect(() => {
tl.current = createTimeline({ autoplay: false }).add('.title', { y: [40, 0], opacity: [0, 1] })
return () => tl.current.revert()
}, [])
useLayoutEffect(() => { tl.current.seek((frame / fps) * 1000) }, [frame, fps])
简单的移动优先使用 Remotion 自带的 interpolate / spring；当 Anime.js 的 SVG 辅助功能（draw、morph、motion path）或 stagger 能节省大量工作时再使用它。