10 个典型场景 · 从文本到 SVG · 从弹簧到时间线
向下滚动,见证 anime.js 的全部力量
from center、from edges、grid 网格、eased distribution — stagger 是批量动画的灵魂。
点击小球触发弹簧动画 — 从微妙 UI 回弹到夸张的果冻效果。
bounce: 0.3, duration: 600
bounce: 0.65, duration: 900
stiffness: 300, damping: 8
stiffness: 80, damping: 4, mass: 3
精确控制每个动画的入场时机 — 绝对位置、相对偏移、标签跳转。
动画进度与滚动位置同步 — 进度条、视差卡片、序列帧,一切随滚而动。
卡片随滚动位置渐显、位移、旋转。
不同元素以不同速率响应滚动。
元素旋转角度完全由滚动位置决定。
SVG 绘制动画 + 元素沿路径运动 — anime.js 的矢量动画能力。
数组值、参数对象、duration 控制、百分比定位 — 四种关键帧定义方式。
拖拽元素,松手后弹簧回位 — createDraggable 带来自然的物理手感。
拖拽彩色卡片,松手后观察弹簧回弹效果
多个动画同时操作同一属性时,replace、blend、none 三种策略的直观对比。
新动画接管属性,旧动画被取消
新旧值混合,产生平滑过渡
两个动画完全独立运行(性能最优)
字符级动画 — 逐字淡入、跳跃、旋转,搭配弹簧缓动和交错延迟。
设计是语言的一种形式
而动画是它的语调
— Rexingo
utils.random、utils.mapRange、utils.snap、modifier — 让动画数据更灵活。