Anime.js 动画库教程 - 轻量级JavaScript动画引擎，支持时间轴与SVG动画

animejs by freshtechbro/claudedesignskills

77 周安装量

11 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/freshtechbro/claudedesignskills --skill animejs

前端优化 JavaScript 框架动画

🇨🇳中文介绍

Anime.js

轻量级 JavaScript 动画库，具备强大的时间轴和交错功能，适用于网页动画。

概述

Anime.js（发音为 "Anime JS"）是一个多功能的动画引擎，可与 DOM 元素、CSS 属性、SVG 属性和 JavaScript 对象配合使用。与特定于 React 的库不同，Anime.js 可与原生 JavaScript 和任何框架一起使用。

何时使用此技能：

具有精确编排的基于时间轴的动画序列
跨多个元素的交错动画
SVG 路径变形和绘制动画
基于百分比计时的关键帧动画
与框架无关的动画（适用于 React、Vue、原生 JS）
复杂的缓动函数（弹簧、步进、三次贝塞尔曲线）

核心功能：

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

核心概念

基础动画

anime() 函数用于创建动画：

import anime from 'animejs'

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

目标对象

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

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

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

anime({
  targets: '.stagger-element',
  translateY: [100, 0],
  opacity: [0, 1],
  delay: anime.stagger(100), // 延迟增加 100 毫秒
  easing: 'easeOutQuad',
  duration: 600
})

2. 从中心开始交错

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

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

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

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')

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

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

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,             // 或迭代次数
  easing: 'easeInOutQuad'
})

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

animation.play()
animation.pause()
animation.restart()
animation.reverse()
animation.seek(500) // 跳转到 500 毫秒

使用变换和不透明度

// ✅ 良好：GPU 加速
anime({
  targets: '.element',
  translateX: 250,
  opacity: 0.5
})

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

批量处理相似动画

// ✅ 对多个目标使用单个动画
anime({
  targets: '.multiple-elements',
  translateX: 250
})

// ❌ 避免：多个独立的动画
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 // 手动控制
})

1. 忘记单位类型

// ❌ 错误：没有单位
anime({ targets: '.element', width: 200 })

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

2. 直接使用 CSS transform 属性

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

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

3. 未处理动画清理

// ❌ 错误：卸载后动画继续运行
useEffect(() => {
  anime({ targets: ref.current, translateX: 250 })
}, [])

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

4. 动画化过多元素

// ❌ 避免：动画化 1000+ 个元素
anime({ targets: '.many-items', translateX: 250 }) // 1000+ 个元素

// ✅ 更好：对大型集合使用 CSS 动画
// 或者通过虚拟化减少元素数量

5. 时间轴计时错误

// ❌ 错误：缺少偏移运算符
.add({ targets: '.el2' }, '500') // 被视为绝对时间

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

6. 过度使用循环

// ❌ 避免：无限循环消耗电池
anime({
  targets: '.element',
  rotate: '1turn',
  loop: true,
  duration: 1000
})

// ✅ 更好：对无限循环使用 CSS 动画
@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。

🇺🇸English

Anime.js

Lightweight JavaScript animation library with powerful timeline and stagger capabilities for web animations.

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)

Core Concepts

Basic Animation

The anime() function creates animations:

import anime from 'animejs'

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

Targets

Multiple ways to specify animation targets:

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

Animatable Properties

CSS Properties:

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

CSS Transforms (Individual):

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

SVG Attributes:

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

JavaScript Objects:

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

Timeline

Create complex sequences with precise control:

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

Common Patterns

1. Stagger Animation (Sequential Reveal)

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

2. Stagger from Center

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 Line Drawing

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

4. SVG Morphing

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. Timeline Sequence

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

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

7. Scroll-Triggered Animation

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

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

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

Path Following Animation

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

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

Steps Easing

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

Custom Bezier

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

Direction and Loop

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

Playback Control

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

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

Performance Optimization

Use Transform and Opacity

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

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

Batch Similar Animations

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

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

Use `will-change` for Complex Animations

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

Disable autoplay for Scroll Animations

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

Common Pitfalls

1. Forgetting Unit Types

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

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

2. Using CSS transform Property Directly

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

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

3. Not Handling Animation Cleanup

// ❌ 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. Animating Too Many Elements

// ❌ 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. Incorrect Timeline Timing

// ❌ 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. Overusing Loop

// ❌ 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); }
}

Resources

Scripts

animation_generator.py - Generate Anime.js animation boilerplate (8 types)
timeline_builder.py - Build complex timeline sequences

References

api_reference.md - Complete Anime.js API documentation
stagger_guide.md - Stagger utilities and patterns
timeline_guide.md - Timeline sequencing deep dive

Assets

starter_animejs/ - Vanilla JS + Vite template with examples
examples/ - Real-world patterns (SVG morphing, stagger grids, timelines)

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.

Weekly Installs

Repository

freshtechbro/cl…gnskills

GitHub Stars

First Seen

Feb 27, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode76

claude-code74

github-copilot74

codex74

amp74

cline74

React视图过渡API使用指南：实现原生浏览器动画与状态管理

5,700 周安装

Anime.js 动画库教程 - 轻量级JavaScript动画引擎，支持时间轴与SVG动画

🇨🇳中文介绍

Anime.js

概述

核心概念

基础动画

目标对象

相关 Skills

可动画属性

时间轴

常见模式

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

2. 从中心开始交错

3. SVG 线条绘制

4. SVG 变形

5. 时间轴序列

6. 关键帧动画

7. 滚动触发动画

集成模式

与 React 集成

与 Vue 集成

路径跟随动画

高级技巧

弹簧缓动

步进缓动

自定义贝塞尔曲线

方向和循环

播放控制

性能优化

使用变换和不透明度

批量处理相似动画

对复杂动画使用 will-change

对滚动动画禁用自动播放

常见陷阱

1. 忘记单位类型

2. 直接使用 CSS transform 属性

3. 未处理动画清理

4. 动画化过多元素

5. 时间轴计时错误

6. 过度使用循环

资源

脚本

参考

资源文件

相关技能

🇺🇸English

Anime.js

Overview

Core Concepts

Basic Animation

Targets

Animatable Properties

Timeline

Common Patterns

1. Stagger Animation (Sequential Reveal)

2. Stagger from Center

3. SVG Line Drawing

4. SVG Morphing

5. Timeline Sequence

6. Keyframe Animation

7. Scroll-Triggered Animation

Integration Patterns

With React

With Vue

Path Following Animation

Advanced Techniques

Spring Easing

Steps Easing

Custom Bezier

Direction and Loop

Playback Control

Performance Optimization

Use Transform and Opacity

Batch Similar Animations

Use will-change for Complex Animations

Disable autoplay for Scroll Animations

Common Pitfalls

1. Forgetting Unit Types

2. Using CSS transform Property Directly

3. Not Handling Animation Cleanup

对复杂动画使用 `will-change`

Use `will-change` for Complex Animations