Back to Details

animejs

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Anime.js

Anime.js

Lightweight JavaScript animation library with powerful timeline and stagger capabilities for web animations.
一款轻量级JavaScript动画库，具备强大的时间轴和交错动画能力，适用于Web动画开发。

Overview

概述

Anime.js (pronounced "Anime JS") is a versatile animation engine that works with DOM elements, CSS properties, SVG attributes, and JavaScript objects. Unlike React-specific libraries, Anime.js works with vanilla JavaScript and any framework.
When to use this skill:
  • Timeline-based animation sequences with precise choreography
  • Staggered animations across multiple elements
  • SVG path morphing and drawing animations
  • Keyframe animations with percentage-based timing
  • Framework-agnostic animation (works with React, Vue, vanilla JS)
  • Complex easing functions (spring, steps, cubic-bezier)
Core features:
  • Timeline sequencing with relative positioning
  • Powerful stagger utilities (grid, from center, easing)
  • SVG morphing and path animations
  • Built-in spring physics easing
  • Keyframe support with flexible timing
  • Small bundle size (~9KB gzipped)
Anime.js（发音为"Anime JS"）是一款多功能动画引擎，可作用于DOM元素、CSS属性、SVG属性和JavaScript对象。与仅支持React的库不同，Anime.js可配合原生JavaScript及任意框架使用。
何时使用该技能：
  • 具备精确编排的基于时间轴的动画序列
  • 多元素的交错动画
  • SVG路径变形与绘制动画
  • 基于百分比计时的关键帧动画
  • 与框架无关的动画（支持React、Vue、原生JS）
  • 复杂缓动函数（弹簧、步骤、三次贝塞尔曲线）
核心特性：
  • 支持相对定位的时间轴排序
  • 强大的交错动画工具（网格、从中心扩散、缓动）
  • SVG变形与路径动画
  • 内置弹簧物理缓动效果
  • 支持灵活计时的关键帧功能
  • 小巧的包体积（约9KB压缩后）

Core Concepts

核心概念

Basic Animation

基础动画

The 
anime()
function creates animations:
javascript
import anime from 'animejs'

anime({
  targets: '.element',
  translateX: 250,
  rotate: '1turn',
  duration: 800,
  easing: 'easeInOutQuad'
})
anime()
函数用于创建动画：
javascript
import anime from 'animejs'

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

Targets

目标对象

Multiple ways to specify animation targets:
javascript
// 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 })
指定动画目标的多种方式：
javascript
// CSS选择器
anime({ targets: '.box' })

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

// 元素数组
anime({ targets: [el1, el2, el3] })

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

Animatable Properties

可动画属性

CSS Properties:
javascript
anime({
  targets: '.element',
  translateX: 250,
  scale: 2,
  opacity: 0.5,
  backgroundColor: '#FFF'
})
CSS Transforms (Individual):
javascript
anime({
  targets: '.element',
  translateX: 250,   // Individual transform
  rotate: '1turn',   // Not 'transform: rotate()'
  scale: 2
})
SVG Attributes:
javascript
anime({
  targets: 'path',
  d: 'M10 80 Q 77.5 10, 145 80', // Path morphing
  fill: '#FF0000',
  strokeDashoffset: [anime.setDashoffset, 0] // Line drawing
})
JavaScript Objects:
javascript
const obj = { value: 0 }
anime({
  targets: obj,
  value: 100,
  round: 1,
  update: () => console.log(obj.value)
})
CSS属性：
javascript
anime({
  targets: '.element',
  translateX: 250,
  scale: 2,
  opacity: 0.5,
  backgroundColor: '#FFF'
})
独立CSS变换属性：
javascript
anime({
  targets: '.element',
  translateX: 250,   // 独立变换属性
  rotate: '1turn',   // 不使用'transform: rotate()'
  scale: 2
})
SVG属性：
javascript
anime({
  targets: 'path',
  d: 'M10 80 Q 77.5 10, 145 80', // 路径变形
  fill: '#FF0000',
  strokeDashoffset: [anime.setDashoffset, 0] // 路径绘制动画
})
JavaScript对象：
javascript
const obj = { value: 0 }
anime({
  targets: obj,
  value: 100,
  round: 1,
  update: () => console.log(obj.value)
})

Timeline

时间轴

Create complex sequences with precise control:
javascript
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
创建具备精确控制的复杂序列：
javascript
const timeline = anime.timeline({
  duration: 750,
  easing: 'easeOutExpo'
})

timeline
  .add({
    targets: '.box1',
    translateX: 250
  })
  .add({
    targets: '.box2',
    translateX: 250
  }, '-=500') // 在前一个动画结束前500ms开始
  .add({
    targets: '.box3',
    translateX: 250
  }, '+=200') // 在前一个动画结束后200ms开始

Common Patterns

常见模式

1. Stagger Animation (Sequential Reveal)

1. 交错动画（顺序显示）

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

2. Stagger from Center

2. 从中心扩散的交错动画

javascript
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'
})
javascript
anime({
  targets: '.grid-item',
  scale: [0, 1],
  delay: anime.stagger(50, {
    grid: [14, 5],
    from: 'center', // 可选值：'first'、'last'、索引、[x, y]
    axis: 'x'       // 可选值：'y'、null
  }),
  easing: 'easeOutQuad'
})

3. SVG Line Drawing

3. SVG路径绘制动画

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

4. SVG Morphing

4. SVG变形动画

javascript
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'
})
javascript
anime({
  targets: '#morphing-path',
  d: [
    { value: 'M10 80 Q 77.5 10, 145 80' }, // 起始形状
    { value: 'M10 80 Q 77.5 150, 145 80' }  // 结束形状
  ],
  duration: 2000,
  easing: 'easeInOutQuad',
  loop: true,
  direction: 'alternate'
})

5. Timeline Sequence

5. 时间轴序列

javascript
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')
javascript
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. Keyframe Animation

6. 关键帧动画

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

7. Scroll-Triggered Animation

7. 滚动触发动画

javascript
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)
})
javascript
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)
})

Integration Patterns

集成模式

With React

与React集成

javascript
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>
}
javascript
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>
}

With Vue

与Vue集成

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

Path Following Animation

路径跟随动画

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

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

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

Advanced Techniques

高级技巧

Spring Easing

弹簧缓动

javascript
anime({
  targets: '.element',
  translateX: 250,
  easing: 'spring(1, 80, 10, 0)', // mass, stiffness, damping, velocity
  duration: 2000
})
javascript
anime({
  targets: '.element',
  translateX: 250,
  easing: 'spring(1, 80, 10, 0)', // 质量, 刚度, 阻尼, 初速度
  duration: 2000
})

Steps Easing

步骤缓动

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

Custom Bezier

自定义贝塞尔曲线

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

Direction and Loop

动画方向与循环

javascript
anime({
  targets: '.element',
  translateX: 250,
  direction: 'alternate', // 'normal', 'reverse', 'alternate'
  loop: true,             // or number of iterations
  easing: 'easeInOutQuad'
})
javascript
anime({
  targets: '.element',
  translateX: 250,
  direction: 'alternate', // 可选值：'normal'、'reverse'、'alternate'
  loop: true,             // 也可设置循环次数
  easing: 'easeInOutQuad'
})

Playback Control

播放控制

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

animation.play()
animation.pause()
animation.restart()
animation.reverse()
animation.seek(500) // Seek to 500ms
javascript
const animation = anime({
  targets: '.element',
  translateX: 250,
  autoplay: false
})

animation.play()
animation.pause()
animation.restart()
animation.reverse()
animation.seek(500) // 跳转到500ms位置

Performance Optimization

性能优化

Use Transform and Opacity

使用变换与透明度属性

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

// ❌ Avoid: Triggers layout
anime({
  targets: '.element',
  left: '250px',
  width: '500px'
})
javascript
// ✅ 推荐：GPU加速
anime({
  targets: '.element',
  translateX: 250,
  opacity: 0.5
})

// ❌ 避免：触发重排
anime({
  targets: '.element',
  left: '250px',
  width: '500px'
})

Batch Similar Animations

批量相似动画

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

// ❌ Avoid: Multiple separate animations
elements.forEach(el => {
  anime({ targets: el, translateX: 250 })
})
javascript
// ✅ 为多个目标创建单个动画
anime({
  targets: '.multiple-elements',
  translateX: 250
})

// ❌ 避免：创建多个独立动画
elements.forEach(el => {
  anime({ targets: el, translateX: 250 })
})

Use 
will-change
for Complex Animations

为复杂动画使用
will-change

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

Disable autoplay for Scroll Animations

滚动动画禁用自动播放

javascript
const animation = anime({
  targets: '.element',
  translateX: 250,
  autoplay: false // Control manually
})
javascript
const animation = anime({
  targets: '.element',
  translateX: 250,
  autoplay: false // 手动控制播放
})

Common Pitfalls

常见陷阱

1. Forgetting Unit Types

1. 忘记添加单位

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

// ✅ Correct: Include unit
anime({ targets: '.element', width: '200px' })
javascript
// ❌ 错误：缺少单位
anime({ targets: '.element', width: 200 })

// ✅ 正确：添加单位
anime({ targets: '.element', width: '200px' })

2. Using CSS transform Property Directly

2. 直接使用CSS transform属性

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

// ✅ Correct: Individual transform properties
anime({ targets: '.element', translateX: 250 })
javascript
// ❌ 错误：无法动画transform字符串
anime({ targets: '.element', transform: 'translateX(250px)' })

// ✅ 正确：使用独立变换属性
anime({ targets: '.element', translateX: 250 })

3. Not Handling Animation Cleanup

3. 未处理动画清理

javascript
// ❌ 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()
}, [])
javascript
// ❌ 错误：组件卸载后动画仍在运行
useEffect(() => {
  anime({ targets: ref.current, translateX: 250 })
}, [])

// ✅ 正确：清理时暂停动画
useEffect(() => {
  const anim = anime({ targets: ref.current, translateX: 250 })
  return () => anim.pause()
}, [])

4. Animating Too Many Elements

4. 动画元素过多

javascript
// ❌ 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
javascript
// ❌ 避免：为1000+元素添加动画
anime({ targets: '.many-items', translateX: 250 }) // 1000+元素

// ✅ 更好的方案：为大量元素使用CSS动画
// 或通过虚拟化减少元素数量

5. Incorrect Timeline Timing

5. 时间轴计时错误

javascript
// ❌ 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
javascript
// ❌ 错误：缺少偏移运算符
.add({ targets: '.el2' }, '500') // 被视为绝对时间

// ✅ 正确：使用相对运算符
.add({ targets: '.el2' }, '-=500') // 相对于前一个动画
.add({ targets: '.el3' }, '+=200') // 相对于前一个动画

6. Overusing Loop

6. 过度使用循环

javascript
// ❌ 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); }
}
javascript
// ❌ 避免：无限循环消耗电量
anime({
  targets: '.element',
  rotate: '1turn',
  loop: true,
  duration: 1000
})

// ✅ 更好的方案：为无限循环使用CSS动画
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Resources

资源

Scripts

脚本

  • animation_generator.py
    - Generate Anime.js animation boilerplate (8 types)
  • timeline_builder.py
    - Build complex timeline sequences
  • animation_generator.py
    - 生成Anime.js动画模板（8种类型）
  • timeline_builder.py
    - 构建复杂时间轴序列

References

参考文档

  • api_reference.md
    - Complete Anime.js API documentation
  • stagger_guide.md
    - Stagger utilities and patterns
  • timeline_guide.md
    - Timeline sequencing deep dive
  • api_reference.md
    - 完整的Anime.js API文档
  • stagger_guide.md
    - 交错动画工具与模式指南
  • timeline_guide.md
    - 时间轴序列深度解析

Assets

资源包

  • starter_animejs/
    - Vanilla JS + Vite template with examples
  • examples/
    - Real-world patterns (SVG morphing, stagger grids, timelines)
  • starter_animejs/
    - 包含示例的原生JS + Vite模板
  • examples/
    - 真实场景示例（SVG变形、交错网格、时间轴）

Related Skills

相关技能

  • gsap-scrolltrigger - More powerful timeline features and scroll integration
  • motion-framer - React-specific declarative animations
  • react-spring-physics - Physics-based spring animations
  • lightweight-3d-effects - Simple 3D effects (Zdog, Vanta.js)
Anime.js vs GSAP: Use Anime.js for SVG-heavy animations, simpler projects, or when bundle size matters. Use GSAP for complex scroll-driven experiences, advanced timelines, and professional-grade control.
Anime.js vs Framer Motion: Use Anime.js for framework-agnostic projects or when working outside React. Use Framer Motion for React-specific declarative animations with gesture integration.
  • gsap-scrolltrigger - 具备更强大的时间轴功能和滚动集成
  • motion-framer - React专属的声明式动画库
  • react-spring-physics - 基于物理的弹簧动画库
  • lightweight-3d-effects - 简单3D效果（Zdog、Vanta.js）
Anime.js vs GSAP：在SVG密集型动画、简单项目或对包体积有要求时，选择Anime.js。在复杂滚动驱动体验、高级时间轴和专业级控制场景下，选择GSAP。
Anime.js vs Framer Motion：在跨框架项目或非React环境中，选择Anime.js。在React专属项目中，需要声明式动画与手势集成时，选择Framer Motion。