SVG 滤镜动画:水波、溶解、发光
动画补间的「值」并不限于几何坐标。一个 SVG filter primitive 的属性——
feTurbulence 的 baseFrequency、feDisplacementMap 的
scale、feGaussianBlur 的 stdDeviation——同样是标量,
把它接到引擎的 onUpdate 上逐帧 setAttribute,就得到了程序化的表面质感:
水面波动、图形溶解、光晕呼吸。引擎不关心这个数最终去往坐标还是滤镜,它只负责把一个数从 A 平滑推到 B。
驱动属性 —
当前值 —
repeatType —
stdDeviation 在 0 与峰值之间来回,用
repeatType: 'mirror' 让去程与回程各走一遍缓动 (yoyo),配合 repeat: Infinity
无限循环;溶解则让 scale 从 0 单向拉大,图形被噪声场逐渐撕开。这与一个插值
小球从左滑到右没有本质区别——区别只在 onUpdate 把结果写到了 filter primitive 的属性上,
而非元素的 transform。同一引擎接到不同出口,即得不同质感。
@vega/anim — 把补间值写进 filter primitive
若把进度接到路径的 stroke-dashoffset 上,得到的是线条自绘,见
SVG 描边;而这里接到滤镜标量上,得到的是表面质感。两者共享同一条
「值随时间」的插值曲线,只是把输出端换了一个属性。