animejs

Anime.js

轻量级 JavaScript 动画库，为网页动画提供强大的时间轴和交错动画功能。

概览

Anime.js（读作“Anime JS”）是一款多功能动画引擎，可处理 DOM 元素、CSS 属性、SVG 属性和 JavaScript 对象。与专为 React 设计的库不同，Anime.js 可与原生 JavaScript 及任何框架配合使用。

适用场景：

• 需要精准编排的基于时间轴的动画序列
• 多个元素的交错动画
• SVG 路径变形和绘制动画
• 基于百分比时间的关键帧动画
• 与框架无关的动画（适用于 React、Vue 和原生 JS）
• 复杂缓动函数（弹簧、阶梯、三次贝塞尔）

核心功能：

• 支持相对定位的时间轴序列
• 强大的交错动画工具（网格、从中心开始、缓动）
• SVG 变形和路径动画
• 内置弹簧物理缓动
• 灵活定时的关键帧支持
• 体积小（gzip 压缩后约 9 KB）

核心概念

基本动画

anime() 函数可创建动画：

import anime from 'animejs'

anime({
  targets: '.element',
  translateX: 250,
  rotate: '1turn',
  duration: 800,
  easing: 'easeInOutQuad'
})

目标

指定动画目标的多种方式：

// CSS selector
anime({ targets: '.box' })

// DOM elements
anime({ targets: document.querySelectorAll('.box') })

// Array of elements
anime({ targets: [el1, el2, el3] })

// JavaScript object
const obj = { x: 0 }
anime({ targets: obj, x: 100 })

可动画属性

CSS 属性：

anime({
  targets: '.element',
  translateX: 250,
  scale: 2,
  opacity: 0.5,
  backgroundColor: '#FFF'
})

CSS 变换（单项）：

anime({
  targets: '.element',
  translateX: 250,   // Individual transform
  rotate: '1turn',   // Not 'transform: rotate()'
  scale: 2
})

SVG 属性：

anime({
  targets: 'path',
  d: 'M10 80 Q 77.5 10, 145 80', // Path morphing
  fill: '#FF0000',
  strokeDashoffset: [anime.setDashoffset, 0] // Line drawing
})

JavaScript 对象：

const obj = { value: 0 }
anime({
  targets: obj,
  value: 100,
  round: 1,
  update: () => console.log(obj.value)
})

时间轴

创建可精确控制的复杂序列：

const timeline = anime.timeline({
  duration: 750,
  easing: 'easeOutExpo'
})

timeline
  .add({
    targets: '.box1',
    translateX: 250
  })
  .add({
    targets: '.box2',
    translateX: 250
  }, '-=500') // Start 500ms before previous animation ends
  .add({
    targets: '.box3',
    translateX: 250
  }, '+=200') // Start 200ms after previous animation ends

常见模式

1. 交错动画（依次显现）

anime({
  targets: '.stagger-element',
  translateY: [100, 0],
  opacity: [0, 1],
  delay: anime.stagger(100), // Increase delay by 100ms
  easing: 'easeOutQuad',
  duration: 600
})

2. 从中心开始交错

anime({
  targets: '.grid-item',
  scale: [0, 1],
  delay: anime.stagger(50, {
    grid: [14, 5],
    from: 'center', // Also: 'first', 'last', index, [x, y]
    axis: 'x'       // Also: 'y', null
  }),
  easing: 'easeOutQuad'
})

3. SVG 线条绘制

anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutQuad',
  duration: 2000,
  delay: (el, i) => i * 250
})

4. SVG 变形

anime({
  targets: '#morphing-path',
  d: [
    { value: 'M10 80 Q 77.5 10, 145 80' }, // Start shape
    { value: 'M10 80 Q 77.5 150, 145 80' }  // End shape
  ],
  duration: 2000,
  easing: 'easeInOutQuad',
  loop: true,
  direction: 'alternate'
})

5. 时间轴序列

const tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
})

tl.add({
  targets: '.title',
  translateY: [-50, 0],
  opacity: [0, 1]
})
.add({
  targets: '.subtitle',
  translateY: [-30, 0],
  opacity: [0, 1]
}, '-=500')
.add({
  targets: '.button',
  scale: [0, 1],
  opacity: [0, 1]
}, '-=300')

6. 关键帧动画

anime({
  targets: '.element',
  keyframes: [
    { translateX: 100 },
    { translateY: 100 },
    { translateX: 0 },
    { translateY: 0 }
  ],
  duration: 4000,
  easing: 'easeInOutQuad',
  loop: true
})

7. 滚动触发动画

const animation = anime({
  targets: '.scroll-element',
  translateY: [100, 0],
  opacity: [0, 1],
  easing: 'easeOutQuad',
  autoplay: false
})

window.addEventListener('scroll', () => {
  const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight)
  animation.seek(animation.duration * scrollPercent)
})

集成模式

与 React 配合使用

import { useEffect, useRef } from 'react'
import anime from 'animejs'

function AnimatedComponent() {
  const ref = useRef(null)

  useEffect(() => {
    const animation = anime({
      targets: ref.current,
      translateX: 250,
      duration: 800,
      easing: 'easeInOutQuad'
    })

    return () => animation.pause()
  }, [])

  return <div ref={ref}>Animated</div>
}

与 Vue 配合使用

export default {
  mounted() {
    anime({
      targets: this.$el,
      translateX: 250,
      duration: 800
    })
  }
}

路径跟随动画

const path = anime.path('#motion-path')

anime({
  targets: '.element',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
})

高级技巧

弹簧缓动

anime({
  targets: '.element',
  translateX: 250,
  easing: 'spring(1, 80, 10, 0)', // mass, stiffness, damping, velocity
  duration: 2000
})

阶梯缓动

anime({
  targets: '.element',
  translateX: 250,
  easing: 'steps(5)',
  duration: 1000
})

自定义贝塞尔曲线

anime({
  targets: '.element',
  translateX: 250,
  easing: 'cubicBezier(.5, .05, .1, .3)',
  duration: 1000
})

方向和循环

anime({
  targets: '.element',
  translateX: 250,
  direction: 'alternate', // 'normal', 'reverse', 'alternate'
  loop: true,             // or number of iterations
  easing: 'easeInOutQuad'
})

播放控制

const animation = anime({
  targets: '.element',
  translateX: 250,
  autoplay: false
})

animation.play()
animation.pause()
animation.restart()
animation.reverse()
animation.seek(500) // Seek to 500ms

性能优化

使用 Transform 和 Opacity

// ✅ Good: GPU-accelerated
anime({
  targets: '.element',
  translateX: 250,
  opacity: 0.5
})

// ❌ Avoid: Triggers layout
anime({
  targets: '.element',
  left: '250px',
  width: '500px'
})

批量处理相似动画

// ✅ Single animation for multiple targets
anime({
  targets: '.multiple-elements',
  translateX: 250
})

// ❌ Avoid: Multiple separate animations
elements.forEach(el => {
  anime({ targets: el, translateX: 250 })
})

为复杂动画使用 will-change

.animated-element {
  will-change: transform, opacity;
}

滚动动画禁用自动播放

const animation = anime({
  targets: '.element',
  translateX: 250,
  autoplay: false // Control manually
})

常见问题

1. 忘记单位类型

// ❌ Wrong: No unit
anime({ targets: '.element', width: 200 })

// ✅ Correct: Include unit
anime({ targets: '.element', width: '200px' })

2. 直接使用 CSS transform 属性

// ❌ Wrong: Can't animate transform string
anime({ targets: '.element', transform: 'translateX(250px)' })

// ✅ Correct: Individual transform properties
anime({ targets: '.element', translateX: 250 })

3. 未处理动画清理

// ❌ Wrong: Animation continues after unmount
useEffect(() => {
  anime({ targets: ref.current, translateX: 250 })
}, [])

// ✅ Correct: Pause on cleanup
useEffect(() => {
  const anim = anime({ targets: ref.current, translateX: 250 })
  return () => anim.pause()
}, [])

4. 为过多元素添加动画

// ❌ Avoid: Animating 1000+ elements
anime({ targets: '.many-items', translateX: 250 }) // 1000+ elements

// ✅ Better: Use CSS animations for large sets
// Or reduce element count with virtualization

5. 时间轴定时不正确

// ❌ Wrong: Missing offset operator
.add({ targets: '.el2' }, '500') // Treated as absolute time

// ✅ Correct: Use relative operators
.add({ targets: '.el2' }, '-=500') // Relative to previous
.add({ targets: '.el3' }, '+=200') // Relative to previous

6. 过度使用循环

// ❌ Avoid: Infinite loops drain battery
anime({
  targets: '.element',
  rotate: '1turn',
  loop: true,
  duration: 1000
})

// ✅ Better: Use CSS animations for infinite loops
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

资源

脚本

• animation_generator.py - 生成 Anime.js 动画样板代码（8 种类型）
• timeline_builder.py - 构建复杂的时间轴序列

参考资料

• api_reference.md - 完整的 Anime.js API 文档
• stagger_guide.md - 交错动画工具和模式
• timeline_guide.md - 时间轴序列深入指南

资源文件

• starter_animejs/ - 带示例的原生 JS + Vite 模板
• examples/ - 实际应用模式（SVG 变形、交错网格、时间轴）

相关技能

• gsap-scrolltrigger - 更强大的时间轴功能和滚动集成
• motion-framer - 专为 React 设计的声明式动画
• react-spring-physics - 基于物理的弹簧动画
• lightweight-3d-effects - 简单的 3D 效果（Zdog、Vanta.js）

Anime.js 与 GSAP 对比：SVG 密集型动画、较简单的项目，或注重包体积时，使用 Anime.js。复杂的滚动驱动体验、高级时间轴和专业级控制则使用 GSAP。

Anime.js 与 Framer Motion 对比：框架无关的项目，或在 React 之外开发时，使用 Anime.js。需要专为 React 设计、支持手势集成的声明式动画时，使用 Framer Motion。