组成动效的
基本零件
69 个案例拆开之后，只剩下少数几十个基础动效。每页都可以直接拖动参数看效果，读公式，拿走一份与帧率无关的参考实现，并看到它出现在哪些案例里。
32基础动效
69个案例
1,851次出现
数值value
无状态的纯函数：给一个 t、距离或序号，返回一个数。缓动、映射、折返、随机、周期、分布。
01
幂次缓动Power easing
把匀速的 0→1 弯成先快后慢、先慢后快或两头慢。整站最常用的缓动。
62 / 69
02
三次贝塞尔缓动Cubic Bézier easing
四个点定出一条时间曲线；拖动两个控制点，速度感就变了。
24 / 69
03
平滑阶跃Smoothstep
把一段输入范围变成两端平稳的 0→1 过渡。
32 / 69
04
钳制与区间映射Clamp and map
把输入从一个区间换算到另一个区间，并决定能否越界。
64 / 69
05
周期回绕Periodic wrap
把任意正负位置折回一个周期，循环列表才不会在负数端出错。
32 / 69
06
错峰分布Stagger distribution
按索引或空间距离分配起始时间，让一组元素形成可读的节奏。
55 / 69
07
振荡信号Oscillator
用绝对时间生成周期位移，频率、振幅与相位各管一件事。
33 / 69
08
随机与噪声Random and noise
随机数制造差异；固定种子可复现，插值噪声可连续变化。
36 / 69
09
径向衰减Radial falloff
离指针越近影响越强，出了半径就归零。
19 / 69
输入input
信号从哪来、怎么解读：指针、拖拽、滚轮、键盘，以及速度估计、轴锁定和阈值判断。
动力dynamics
带状态、逐帧推进的规则：补间、阻尼跟随、弹簧、惯性、吸附。这一层必须与帧率无关。
通道channel
真正被写入的视觉属性。只有在动的属性才算通道。
模式pattern
组织多个元素、阶段或状态：时间线、布局函数、无限循环、共享边界过渡、场、拆字、状态机。
24
时间线Timeline
把几段补间放到同一只时钟上，明确哪些接续、重叠或对齐。
44 / 69
25
布局函数Layout function
把序号映射成位置和朝向；换函数，就换一整套编排。
53 / 69
26
无限折返Infinite wrap
把有限的一排内容反复映射到视口附近，让拖动看不到头。
27 / 69
27
共享边界过渡Shared bounds
让详情页看起来是被点击的卡片长出来的。
18 / 69
28
邻近场Proximity field
一个指针位置，驱动附近一整片元素的响应。
23 / 69
29
拆字进场Text split
按字或词拆开标题做错峰动画，同时保留完整的可读名称。
19 / 69
30
状态机State machine
把开关过程写成明确的状态和允许的事件，重复点击也有确定结果。
59 / 69
运行时runtime
看不见但决定品质的基础设施：单一写入的帧循环、帧时长钳制、后台暂停、减少动态效果。