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

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

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

Hacker News 最新 | 过往 | 评论 | 提问 | 展示 | 招聘 | 提交 登录 Transitions.dev:AI 代理的 UI 过渡效果 (transitions.dev) 11 分,发布者:eustoria,2 小时前 | 隐藏 | 过往 | 收藏 | 2 条评论 | 帮助 jjcm 12 分钟前 | 下一条 [-] 抛开质量不谈,我认为这是一个失败的商业模式。可订阅的技能/预制资源库基本上就是 Tailwind 曾经做的事情,但他们没能让这种模式持续下去。 我或许能接受一次性买断,但每用户每年 90 美元的价格我绝不会考虑。 回复 json_hero 16 分钟前 | 上一条 [-] 为什么会有人愿意为专业版付费?我可以直接阅读这些示例的 CSS 并自行实现,或者直接让 AI 代理参照它进行复刻。 回复 指南 | 常见问题 | 列表 | API | 安全 | 法律 | 申请加入 YC | 联系 搜索:
相关文章

原文

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