Anime.js 演示 · 轻量易用动画库

JavaScript 动画的瑞士军刀：极简 API、Stagger 交错、Timeline 编排、SVG / DOM / Object 属性统一驱动。MIT 开源，零依赖，压缩后仅约 17KB。

MIT / 开源 v3.2.2 UMD Stagger Timeline SVG 动画 Spring 物理

01 STAGGER 网格交错

同一动画应用到多个元素时，通过 anime.stagger() 按网格位置、方向或距离错开每个元素的启动延迟，做出涟漪扩散效果。

用 strokeDashoffset 从路径总长度动画到 0，实现"画线"效果；配合 anime.set() 预置初始状态。

循环播放中：曲线与五角星同时以 easeInOutSine 缓动持续描边。

anime.timeline() 把多段动画串联/重叠播放，用相对时间偏移量（如 '-=200'）精确控制节奏，是复杂序列动画的核心工具。

Anime.js 内置基于物理的弹簧缓动函数 spring(mass, stiffness, damping, velocity)，参数越小回弹越夸张，无需手写贝塞尔曲线。

原生指针事件记录拖拽位移，松手瞬间用 anime() 以 spring 缓动把方块动画弹回原点，模拟真实物理回弹手感。

拖动方块后松开，观察弹簧回弹轨迹。

把字符串拆分为独立 <span> 后交给 Stagger 驱动，逐字实现淡入 + 位移 + 缩放，官网首页标志性的文案入场效果。

属性值传入对象数组即为关键帧序列，每一帧可单独设置 duration / easing，实现比单段 tween 更丰富的多阶段变化。

借助 anime.path() 读取隐藏 SVG 路径上的坐标与切线角度，驱动 DOM 元素沿曲线平移并自动旋转朝向。