animejs by bowtiedswan/animejs-skills
npx skills add https://github.com/bowtiedswan/animejs-skills --skill animejsAnime.js 是一个轻量级的 JavaScript 动画库,拥有简单而强大的 API。它可以处理 CSS 属性、SVG、DOM 属性和 JavaScript 对象。
npm install animejs
import { animate } from 'animejs';
import { animate } from 'https://esm.sh/animejs';
<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 开发者,精准高效
完整的 anime.js v4 文档结构:
createTimer)animate)createTimeline)createAnimatable)createDraggable)createLayout) - 新增createScope)onScroll)morphTo() - SVG 形状变形createDrawable() - SVG 线条绘制动画createMotionPath() - 运动路径动画splitText)stagger() - 支持网格的时间/值/时间轴交错$() - 查询选择器工具get() / set() - 获取/设置 CSS 属性值cleanInlineStyles() - 移除内联样式remove() - 从目标移除动画sync() - 同步动画keepTime() - 时间保持工具random() / createSeededRandom() / randomPick() / shuffle() - 随机工具round() / clamp() / snap() / wrap() - 数学工具mapRange() / lerp() / damp() - 插值工具roundPad() / padStart() / padEnd() - 字符串填充degToRad() / radToDeg() - 角度转换createSpring({ stiffness, damping, mass, velocity })waapi.convertEase()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>
);
}
| 模块 | 大小 |
|---|---|
| 完整包 | ~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 - 常见的动画模式和示例每周安装量
83
代码仓库
GitHub 星标数
2
首次出现
2026年1月26日
安全审计
已安装在
codex70
opencode69
gemini-cli65
github-copilot59
claude-code52
kimi-cli52
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.
npm install animejs
import { animate } from 'animejs';
import { animate } from 'https://esm.sh/animejs';
<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
<script>
const { animate } = anime;
</script>
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';
The complete anime.js v4 documentation structure:
createTimer)animate)createTimeline)createAnimatable)createDraggable)createLayout) - NEWcreateScope)onScroll)morphTo() - SVG shape morphingcreateDrawable() - SVG line drawing animationcreateMotionPath() - Motion path animationsplitText)stagger() - Time/values/timeline staggering with grid support$() - Query selector utilityget() / set() - Get/set CSS property valuescleanInlineStyles() - Remove inline stylesremove() - Remove animations from targetssync() - Synchronize animationskeepTime() - Time keeper utilityrandom() / createSeededRandom() / / - Random utilitiescreateSpring({ stiffness, damping, mass, velocity })waapi.convertEase()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 }, '<') // Start with previous
.add('.box3', { x: 100 }, '-=200'); // 200ms before end
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>
);
}
| 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 |
For detailed API parameters, code examples, and advanced patterns, see the references files:
references/api-reference.md - Complete API documentationreferences/examples.md - Common animation patterns and recipesWeekly Installs
83
Repository
GitHub Stars
2
First Seen
Jan 26, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
codex70
opencode69
gemini-cli65
github-copilot59
claude-code52
kimi-cli52
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
4,400 周安装
randomPick()shuffle()round() / clamp() / snap() / wrap() - Math utilitiesmapRange() / lerp() / damp() - Interpolation utilitiesroundPad() / padStart() / padEnd() - String paddingdegToRad() / radToDeg() - Angle conversion