返回首页
Anime.js v4 · 动效实验室

动画的 极限

10 个典型场景 · 从文本到 SVG · 从弹簧到时间线
向下滚动,见证 anime.js 的全部力量

向下探索
01
Stagger · 交错动画

延迟与值的编排艺术

from center、from edges、grid 网格、eased distribution — stagger 是批量动画的灵魂。

02
Spring · 弹簧物理

真实的弹性运动

点击小球触发弹簧动画 — 从微妙 UI 回弹到夸张的果冻效果。

微弹 bounce: 0.3, duration: 600
活泼 bounce: 0.65, duration: 900
强劲 stiffness: 300, damping: 8
果冻 stiffness: 80, damping: 4, mass: 3
03
Timeline · 时间线编排

交响乐般的序列动画

精确控制每个动画的入场时机 — 绝对位置、相对偏移、标签跳转。

04
onScroll · 滚动驱动

跟随滚动的节奏

动画进度与滚动位置同步 — 进度条、视差卡片、序列帧,一切随滚而动。

随滚入场

卡片随滚动位置渐显、位移、旋转。

反向视差

不同元素以不同速率响应滚动。

旋转同步

元素旋转角度完全由滚动位置决定。

05
SVG · 矢量动效

描边、变形与路径跟随

SVG 绘制动画 + 元素沿路径运动 — anime.js 的矢量动画能力。

描边绘制 createDrawable

路径跟随 createMotionPath

06
Keyframes · 关键帧

四种语法,无限可能

数组值、参数对象、duration 控制、百分比定位 — 四种关键帧定义方式。

07
Draggable · 拖拽交互

弹簧回弹的拖拽体验

拖拽元素,松手后弹簧回位 — createDraggable 带来自然的物理手感。

拖我
拽我
甩我
推我

拖拽彩色卡片,松手后观察弹簧回弹效果

08
Composition · 合成模式

动画冲突的解决之道

多个动画同时操作同一属性时,replace、blend、none 三种策略的直观对比。

Replace 默认

新动画接管属性,旧动画被取消

Blend 叠加混合

新旧值混合,产生平滑过渡

None 独立并行

两个动画完全独立运行(性能最优)

09
SplitText · 文字拆解

每一个字都有生命

字符级动画 — 逐字淡入、跳跃、旋转,搭配弹簧缓动和交错延迟。

设计是语言的一种形式

而动画是它的语调

— Rexingo

10
Utilities · 工具集

随机、映射与修饰器

utils.random、utils.mapRange、utils.snap、modifier — 让动画数据更灵活。