Anime.js v4 中文指南：轻量级 JavaScript 动画库安装、核心概念与 API 详解

animejs by bowtiedswan/animejs-skills

112 周安装量

3 GitHub Stars

GitHub

安装命令

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

前端优化 JavaScript 框架动画

🇨🇳中文介绍

Anime.js v4 技能

Anime.js 是一个轻量级的 JavaScript 动画库，拥有简单而强大的 API。它可以处理 CSS 属性、SVG、DOM 属性和 JavaScript 对象。

安装

NPM

npm install animejs

ES 模块导入

import { animate } from 'animejs';

CDN (ES 模块)

import { animate } from 'https://esm.sh/animejs';

CDN (UMD)

<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
<script>
  const { animate } = anime;
</script>

核心概念

Anime.js v4 是模块化的且支持摇树优化。按需导入所需模块：

// 完整导入
import { animate, createTimeline, stagger, createDraggable } from 'animejs';

// 独立模块，用于更小的打包体积
import { animate } from 'animejs/animation';
import { createTimeline } from 'animejs/timeline';
import { createTimer } from 'animejs/timer';

广告位招租

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

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

联系我们

计时器 (`createTimer`)

播放设置 : delay, duration, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate
回调函数 : onBegin, onComplete, onUpdate, onLoop, onPause, then()
方法 : play(), reverse(), pause(), restart(), alternate(), resume(), complete(), reset(), cancel(), revert(), seek(), stretch()
属性 : currentTime, progress, paused, completed 等

目标 : CSS 选择器, DOM 元素, JavaScript 对象, 目标数组
可动画属性 : CSS 属性, CSS 变换, CSS 变量, JS 对象属性, HTML 属性, SVG 属性
补间值类型 : 数值, 单位转换, 相对值 (+=, -=, *=), 颜色, 颜色函数, CSS 变量, 基于函数的值
补间参数 : to, from, delay, duration, ease, composition, modifier
关键帧 : 补间值, 补间参数, 基于持续时间, 基于百分比
播放设置 : delay, duration, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate, playbackEase, persist
回调函数 : onBegin, onComplete, onBeforeUpdate, onUpdate, onRender, onLoop, onPause, then()
方法 : play(), reverse(), pause(), restart(), alternate(), resume(), complete(), cancel(), revert(), reset(), seek(), stretch(), refresh()

时间轴 (`createTimeline`)

添加计时器, 添加动画, 同步 WAAPI 动画, 同步时间轴, 调用函数
时间位置 : 绝对时间 (毫秒), 相对时间 (<, >, +=, -=), 标签
播放设置 : defaults, delay, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate, playbackEase
回调函数 : onBegin, onComplete, onBeforeUpdate, onUpdate, onRender, onLoop, onPause, then()
方法 : add(), set(), sync(), label(), remove(), call(), init(), play(), reset(), reverse(), pause(), restart(), alternate(), resume(), complete(), cancel(), revert(), seek(), stretch(), refresh()

可动画对象 (`createAnimatable`)

设置 : unit, duration, ease, modifier
方法 : 获取器, 设置器, revert()

可拖拽 (`createDraggable`)

轴参数 : x, y, snap, modifier, mapTo
设置 : trigger, container, containerPadding, containerFriction, releaseContainerFriction, releaseMass, releaseStiffness, releaseDamping, velocityMultiplier, minVelocity, maxVelocity, releaseEase, dragSpeed, dragThreshold, scrollThreshold, scrollSpeed, cursor
回调函数 : onGrab, onDrag, onUpdate, onRelease, onSnap, onSettle, onResize, onAfterResize
方法 : disable(), enable(), setX(), setY(), animateInView(), scrollInView(), stop(), reset(), revert(), refresh()

布局 (`createLayout`) - 新增

用法 : 指定根元素, CSS 显示动画, 交错布局, DOM 顺序动画, 进入/退出布局动画, 交换父元素动画, 模态对话框动画
设置 : children, delay, duration, ease, properties
状态 : enterFrom, leaveTo, swapAt
方法 : record(), animate(), update(), revert()
布局 id 属性, 回调函数, 属性, 常见问题

作用域 (`createScope`)

添加构造函数, 注册方法函数
参数 : root, defaults, mediaQueries
方法 : add(), addOnce(), keepTime(), revert(), refresh()

事件 / 滚动 (`onScroll`)

设置 : container, target, debug, axis, repeat
阈值 : 数值, 位置简写, 相对位置值, 最小最大值
同步模式 : 方法名称, 播放进度, 平滑滚动, 缓动滚动
回调函数 : onEnter, onEnterForward, onEnterBackward, onLeave, onLeaveForward, onLeaveBackward, onUpdate, onSyncComplete, onResize
方法 : link(), refresh(), revert()

morphTo() - SVG 形状变形
createDrawable() - SVG 线条绘制动画
createMotionPath() - 运动路径动画

文本工具 (`splitText`)

设置 : lines, words, chars, debug, includeSpaces, accessible
分割参数 : class, wrap, clone
HTML 模板支持
方法 : addEffect(), revert(), refresh()

stagger() - 支持网格的时间/值/时间轴交错
$() - 查询选择器工具
get() / set() - 获取/设置 CSS 属性值
cleanInlineStyles() - 移除内联样式
remove() - 从目标移除动画
sync() - 同步动画
keepTime() - 时间保持工具
random() / createSeededRandom() / randomPick() / shuffle() - 随机工具
round() / clamp() / snap() / wrap() - 数学工具
mapRange() / lerp() / damp() - 插值工具
roundPad() / padStart() / padEnd() - 字符串填充
degToRad() / radToDeg() - 角度转换
可链式调用的工具

内置 : linear, easeIn, easeOut, easeInOut (包含 Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Back, Elastic, Bounce 变体)
自定义 : 三次贝塞尔曲线, 线性 (多点), 步进, 不规则
弹簧 : createSpring({ stiffness, damping, mass, velocity })

WAAPI (Web Animation API)

何时使用 WAAPI 与 JS 动画
硬件加速动画
对原生 WAAPI 的改进
API 差异 (iterations, direction, easing, finished)
waapi.convertEase()

参数 : timeUnit (ms/s), speed, fps, precision, pauseOnDocumentHidden
方法 : update(), pause(), resume()
引擎默认值

import { animate } from 'animejs';

animate('.element', {
  translateX: 250,
  rotate: '1turn',
  duration: 800,
  ease: 'outExpo'
});

import { createTimeline } from 'animejs';

const tl = createTimeline({ defaults: { duration: 500 } });
tl.add('.box1', { x: 100 })
  .add('.box2', { x: 100 }, '<')  // 与前一个同时开始
  .add('.box3', { x: 100 }, '-=200');  // 在结束前 200 毫秒开始

import { animate, stagger } from 'animejs';

animate('.item', {
  translateY: [-20, 0],
  opacity: [0, 1],
  delay: stagger(100, { from: 'center' }),
  duration: 600
});

import { animate, onScroll } from 'animejs';

animate('.element', {
  translateX: [0, 500],
  autoplay: onScroll({
    target: '.element',
    sync: true
  })
});

import { animate, createDrawable } from 'animejs';

animate(createDrawable('path'), {
  draw: ['0 0', '0 1'],
  duration: 2000,
  ease: 'inOutQuad'
});

import { createDraggable, createSpring } from 'animejs';

createDraggable('.draggable', {
  container: '.container',
  releaseEase: createSpring({ stiffness: 200, damping: 20 })
});

animate('.element', {
  translateX: (el, i, total) => i * 50,
  rotate: (el, i) => anime.random(-180, 180),
  delay: (el, i) => i * 100
});

animate('.element', {
  translateX: [
    { to: 100, duration: 500 },
    { to: 0, duration: 500, delay: 200 }
  ],
  rotate: ['0turn', '1turn', '0turn']
});

import { useRef, useEffect } from 'react';
import { animate, createScope } from 'animejs';

function AnimatedComponent() {
  const root = useRef(null);
  const scope = useRef(null);

  useEffect(() => {
    scope.current = createScope({ root: root.current }).add(() => {
      animate('.box', { rotate: 360 });
    });
    return () => scope.current.revert();
  }, []);

  return (
    <div ref={root}>
      <div className="box" />
    </div>
  );
}

打包大小 (压缩 + Gzip)

模块	大小
完整包	~24.5 KB
计时器	~5.6 KB
动画	+5.2 KB
时间轴	+0.55 KB
可动画对象	+0.4 KB
可拖拽	+6.4 KB
滚动	+4.3 KB
作用域	+0.22 KB
SVG	~0.35 KB
交错	+0.48 KB
弹簧	~0.52 KB
WAAPI	~3.5 KB

有关详细的 API 参数、代码示例和高级模式，请参阅参考文件：

references/api-reference.md - 完整的 API 文档
references/examples.md - 常见的动画模式和示例

🇺🇸English

Anime.js v4 Skill

Anime.js is a lightweight JavaScript animation library with a simple yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects.

Installation

NPM

npm install animejs

ES Modules Import

import { animate } from 'animejs';

CDN (ES Modules)

import { animate } from 'https://esm.sh/animejs';

CDN (UMD)

<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
<script>
  const { animate } = anime;
</script>

Core Concepts

Anime.js v4 is modular and tree-shakeable. Import only what you need:

// Full import
import { animate, createTimeline, stagger, createDraggable } from 'animejs';

// Standalone modules for smaller bundles
import { animate } from 'animejs/animation';
import { createTimeline } from 'animejs/timeline';
import { createTimer } from 'animejs/timer';

Documentation Sitemap

The complete anime.js v4 documentation structure:

Getting Started

Installation (NPM, CDN, Direct download)
Module imports (ES Modules, CommonJS, UMD)
Using with vanilla JS
Using with React

Timer (`createTimer`)

Playback Settings : delay, duration, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate
Callbacks : onBegin, onComplete, onUpdate, onLoop, onPause, then()
Methods : play(), reverse(), pause(), restart(), alternate(), resume(), complete(), reset(), cancel(), revert(), seek(), stretch()
Properties : currentTime, progress, paused, completed, etc.

Animation (`animate`)

Targets : CSS Selector, DOM Elements, JavaScript Objects, Array of targets
Animatable Properties : CSS Properties, CSS transforms, CSS Variables, JS Object properties, HTML Attributes, SVG Attributes
Tween Value Types : Numerical, Unit conversion, Relative (+=, -=, *=), Color, Color function, CSS variable, Function based
Tween Parameters : to, from, delay, duration, ease, composition, modifier
Keyframes : Tween values, Tween parameters, Duration based, Percentage based
Playback Settings : delay, duration, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate, playbackEase, persist
Callbacks : onBegin, onComplete, onBeforeUpdate, onUpdate, onRender, onLoop, onPause, then()
Methods : play(), reverse(), pause(), restart(), alternate(), resume(), complete(), cancel(), revert(), reset(), seek(), stretch(), refresh()

Timeline (`createTimeline`)

Add timers, Add animations, Sync WAAPI animations, Sync timelines, Call functions
Time Position : Absolute (ms), Relative (<, >, +=, -=), Labels
Playback Settings : defaults, delay, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate, playbackEase
Callbacks : onBegin, onComplete, onBeforeUpdate, onUpdate, onRender, onLoop, onPause, then()
Methods : add(), set(), sync(), label(), remove(), call(), init(), play(), reset(), reverse(), pause(), restart(), alternate(), resume(), complete(), cancel(), revert(), seek(), stretch(), refresh()

Animatable (`createAnimatable`)

Settings : unit, duration, ease, modifier
Methods : Getters, Setters, revert()

Draggable (`createDraggable`)

Axes Parameters : x, y, snap, modifier, mapTo
Settings : trigger, container, containerPadding, containerFriction, releaseContainerFriction, releaseMass, releaseStiffness, releaseDamping, velocityMultiplier, minVelocity, maxVelocity, releaseEase, dragSpeed, dragThreshold, scrollThreshold, scrollSpeed, cursor
Callbacks : onGrab, onDrag, onUpdate, onRelease, onSnap, onSettle, onResize, onAfterResize
Methods : disable(), enable(), setX(), setY(), animateInView(), scrollInView(), stop(), reset(), revert(), refresh()

Layout (`createLayout`) - NEW

Usage : Specifying a root, CSS display animation, Staggered layout, DOM order animation, Enter/Exit layout animation, Swap parent animation, Modal dialog animation
Settings : children, delay, duration, ease, properties
States : enterFrom, leaveTo, swapAt
Methods : record(), animate(), update(), revert()
Layout id attribute, Callbacks, Properties, Common gotchas

Scope (`createScope`)

Add constructor function, Register method function
Parameters : root, defaults, mediaQueries
Methods : add(), addOnce(), keepTime(), revert(), refresh()

Events / Scroll (`onScroll`)

Settings : container, target, debug, axis, repeat
Thresholds : Numeric values, Positions shorthands, Relative position values, Min max
Synchronisation Modes : Method names, Playback progress, Smooth scroll, Eased scroll
Callbacks : onEnter, onEnterForward, onEnterBackward, onLeave, onLeaveForward, onLeaveBackward, onUpdate, onSyncComplete, onResize
Methods : link(), refresh(), revert()

SVG Utilities

morphTo() - SVG shape morphing
createDrawable() - SVG line drawing animation
createMotionPath() - Motion path animation

Text Utilities (`splitText`)

Settings : lines, words, chars, debug, includeSpaces, accessible
Split Parameters : class, wrap, clone
HTML template support
Methods : addEffect(), revert(), refresh()

Utilities

stagger() - Time/values/timeline staggering with grid support
$() - Query selector utility
get() / set() - Get/set CSS property values
cleanInlineStyles() - Remove inline styles
remove() - Remove animations from targets
sync() - Synchronize animations
keepTime() - Time keeper utility
random() / createSeededRandom() / / - Random utilities

Easings

Built-in : linear, easeIn, easeOut, easeInOut (with Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Back, Elastic, Bounce variants)
Custom : Cubic Bezier, Linear (multi-point), Steps, Irregular
Spring : createSpring({ stiffness, damping, mass, velocity })

WAAPI (Web Animation API)

When to use WAAPI vs JS animation
Hardware-accelerated animations
Improvements to native WAAPI
API differences (iterations, direction, easing, finished)
waapi.convertEase()

Engine Configuration

Parameters : timeUnit (ms/s), speed, fps, precision, pauseOnDocumentHidden
Methods : update(), pause(), resume()
Engine defaults

Quick Reference

Basic Animation

import { animate } from 'animejs';

animate('.element', {
  translateX: 250,
  rotate: '1turn',
  duration: 800,
  ease: 'outExpo'
});

Timeline

import { createTimeline } from 'animejs';

const tl = createTimeline({ defaults: { duration: 500 } });
tl.add('.box1', { x: 100 })
  .add('.box2', { x: 100 }, '<')  // Start with previous
  .add('.box3', { x: 100 }, '-=200');  // 200ms before end

Stagger

import { animate, stagger } from 'animejs';

animate('.item', {
  translateY: [-20, 0],
  opacity: [0, 1],
  delay: stagger(100, { from: 'center' }),
  duration: 600
});

Scroll Animation

import { animate, onScroll } from 'animejs';

animate('.element', {
  translateX: [0, 500],
  autoplay: onScroll({
    target: '.element',
    sync: true
  })
});

SVG Line Drawing

import { animate, createDrawable } from 'animejs';

animate(createDrawable('path'), {
  draw: ['0 0', '0 1'],
  duration: 2000,
  ease: 'inOutQuad'
});

Draggable

import { createDraggable, createSpring } from 'animejs';

createDraggable('.draggable', {
  container: '.container',
  releaseEase: createSpring({ stiffness: 200, damping: 20 })
});

Function-Based Values

animate('.element', {
  translateX: (el, i, total) => i * 50,
  rotate: (el, i) => anime.random(-180, 180),
  delay: (el, i) => i * 100
});

Keyframes

animate('.element', {
  translateX: [
    { to: 100, duration: 500 },
    { to: 0, duration: 500, delay: 200 }
  ],
  rotate: ['0turn', '1turn', '0turn']
});

React Integration

import { useRef, useEffect } from 'react';
import { animate, createScope } from 'animejs';

function AnimatedComponent() {
  const root = useRef(null);
  const scope = useRef(null);

  useEffect(() => {
    scope.current = createScope({ root: root.current }).add(() => {
      animate('.box', { rotate: 360 });
    });
    return () => scope.current.revert();
  }, []);

  return (
    <div ref={root}>
      <div className="box" />
    </div>
  );
}

Bundle Sizes (Minified + Gzipped)

Module	Size
Full Bundle	~24.5 KB
Timer	~5.6 KB
Animation	+5.2 KB
Timeline	+0.55 KB
Animatable	+0.4 KB
Draggable	+6.4 KB
Scroll	+4.3 KB
Scope	+0.22 KB
SVG	~0.35 KB
Stagger	+0.48 KB
Spring	~0.52 KB
WAAPI	~3.5 KB

Additional Resources

Official Documentation: https://animejs.com/documentation
Easing Editor: https://animejs.com/easing-editor
CodePen Examples: https://codepen.io/collection/Poerqa
GitHub: https://github.com/juliangarnier/anime

For detailed API parameters, code examples, and advanced patterns, see the references files:

references/api-reference.md - Complete API documentation
references/examples.md - Common animation patterns and recipes

Weekly Installs

Repository

bowtiedswan/ani…s-skills

GitHub Stars

First Seen

Jan 26, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykPass

Installed on

codex70

opencode69

gemini-cli65

github-copilot59

claude-code52

kimi-cli52

Flutter应用架构设计指南：分层结构、数据层实现与最佳实践

4,400 周安装

round() / clamp() / snap() / wrap() - Math utilities

mapRange() / lerp() / damp() - Interpolation utilities

roundPad() / padStart() / padEnd() - String padding

degToRad() / radToDeg() - Angle conversion

Chain-able utilities

Anime.js v4 中文指南：轻量级 JavaScript 动画库安装、核心概念与 API 详解

🇨🇳中文介绍

Anime.js v4 技能

安装

NPM

ES 模块导入

CDN (ES 模块)

CDN (UMD)

核心概念

相关 Skills

文档站点地图

入门指南

计时器 (createTimer)

动画 (animate)

时间轴 (createTimeline)

可动画对象 (createAnimatable)

可拖拽 (createDraggable)

布局 (createLayout) - 新增

作用域 (createScope)

事件 / 滚动 (onScroll)

SVG 工具

文本工具 (splitText)

工具函数

缓动函数

WAAPI (Web Animation API)

引擎配置

快速参考

基础动画

时间轴

交错

滚动动画

SVG 线条绘制

可拖拽

基于函数的值

关键帧

React 集成

打包大小 (压缩 + Gzip)

额外资源

🇺🇸English

Anime.js v4 Skill

Installation

NPM

ES Modules Import

CDN (ES Modules)

CDN (UMD)

Core Concepts

Documentation Sitemap

Getting Started

Timer (createTimer)

Animation (animate)

Timeline (createTimeline)

Animatable (createAnimatable)

Draggable (createDraggable)

Layout (createLayout) - NEW

Scope (createScope)

Events / Scroll (onScroll)

SVG Utilities

Text Utilities (splitText)

Utilities

Easings

WAAPI (Web Animation API)

Engine Configuration

Quick Reference

Basic Animation

Timeline

Stagger

Scroll Animation

SVG Line Drawing

Draggable

Function-Based Values

Keyframes

React Integration

Bundle Sizes (Minified + Gzipped)

Additional Resources

最新 Skills

计时器 (`createTimer`)

动画 (`animate`)

时间轴 (`createTimeline`)

可动画对象 (`createAnimatable`)

可拖拽 (`createDraggable`)

布局 (`createLayout`) - 新增

作用域 (`createScope`)

事件 / 滚动 (`onScroll`)

文本工具 (`splitText`)

Timer (`createTimer`)

Animation (`animate`)

Timeline (`createTimeline`)

Animatable (`createAnimatable`)

Draggable (`createDraggable`)

Layout (`createLayout`) - NEW

Scope (`createScope`)

Events / Scroll (`onScroll`)

Text Utilities (`splitText`)