Transitions.dev:AI 智能体的 UI 过渡效果
Transitions.dev: UI transitions for AI agents

原始链接: https://transitions.dev/

导致延迟的原因可能有二:一是模糊效果在每一帧都重新运行,二是遮罩强制触发了重绘。在选择修复方案前,有必要将其拆分开来。动画化 `mask-position` 属性并不会触发合成,而是会重绘元素。由于被重绘的元素处于位移链中,整个滤镜每一帧都会在 CPU 上重新执行。这导致了性能叠加:不仅是滤镜本身的开销,还有重绘驱动滤镜的开销。因此,修复的关键不在于调整模糊半径,而是必须让动画属性完全脱离重绘路径。如果将区域静态绘制并覆盖一层同色遮罩,那么移动遮罩在视觉上与遮罩效果是一样的,而且 `transform` 可以实现合成。唯一权衡点在于:波纹会随色带移动,而不是在固定空间中起伏。但在运动状态下,两者几乎无法区分。

Sorry.
相关文章

原文

Two things could explain the lag: the blur is re-running every frame, or the mask is forcing a repaint. Worth separating them before picking a fix.

Animating mask-position never composites — it repaints the element. And the element being repainted sits inside a displacement chain, so the whole filter re-executes on the CPU each frame. That compounds: it isn't one cost, it's the repaint feeding the filter.

So the fix isn't tuning the blur radius. The animated property has to leave the paint path entirely. If the field is painted statically and covered by a same-coloured curtain, translating the curtain is visually identical to masking — and transform composites.

One trade-off: the waves travel with the band instead of rippling through noise fixed in space. In motion, near-indistinguishable.

联系我们 contact @ memedata.com