噪声:无尽的微动
插值与弹簧都在演化到一个目标:有明确的起点、终点,到达后就静止。待机微动恰恰相反——
漂浮的图标、呼吸的光晕、列表里轻轻晃动的卡片,它们没有终点、永不停止,也不能有肉眼可辨的
重复周期。驱动这类动画的不是缓动曲线,而是 value noise:一条平滑、有界、却又不重复的随机信号。
本页在页内手写一个 1D value noise(随机控制点之间用 smoothstep 插值,叠加多个 octave 成 fractal noise),
用 requestAnimationFrame 持续推进时间 t,把 noise(t) 映射到一组方块的
位置、缩放与旋转。
每个方块各取一段独立相位的 noise,合成有机的群体微动(漂移 + 缩放 + 旋转)
左上角方块所用 noise(t) 的滚动曲线(中线 = 0,上下越界即正负偏移)
noise(t) —
octaves —
t —
smoothstep 的 fade 曲线)填充,于是信号连续且导数连续,看起来缓慢游移而非突跳。
再把若干倍频 octave 叠起来——频率逐层翻倍、幅度逐层减半(persistence)——就得到 fractal noise:
低频负责大尺度的缓慢漂移,高频负责细小的颤动,合成自然的有机感。频率与振幅都是显式参数,因此「平滑且可控」,
这正是它适合 idle / ambient 动画的原因:有界(不会越漂越远)、无尽(时间轴可无限延伸)、且无可感知的重复感。
页内手写 — 1D fractal value noise + requestAnimationFrame 驱动
与之对照:演化到固定目标、有明确时长的塑形见缓动;把目标交给物理系统、 自己收敛到静止的见弹簧。噪声补上了第三种范式——不收敛、不重复、为「持续在场」 而生的动画。