最近总有人转一个站,Transitions.dev。
简单说,就是个 UI 过渡效果的收藏站。做它的人叫 Jakub Antalik。
这种站以前也有,不新鲜。让我收它的,是它自己标出来的定位:给 AI agent 用的 UI 过渡。
这句话值得多想一秒。以前动效谁做?设计师,或者前端手写。现在界面很多是 agent 生成的,那动效归谁管。这个站的答案很直接:做成零件,喂进去。用法就两条,复制粘贴,或者挂一个 coding-agent skill。
我的判断是,动效正在从手艺变成素材。手艺可以慢慢练,素材得有人先备好。
「思考中」「推理流」「流式文本」被单独列了类
这三条不是给人点的按钮,是 agent 自己的界面要用的。以前谁会想到给「AI 正在想」这件事做动效。
点评:这是个新品类。做 agent 产品的人,早晚要在这上面花时间。用户看到的那几行滚动的字,背后是有讲究的。
滤镜里单独给了 AI Agents 一栏
All、Essential、AI Agents、Effects、Texts、Pro。
点评:单独开一栏,跟混在产品标签里,是两个意思。前者说明这条线是主打,不是顺手加的。
有个 demo 讲的是重绘,不是效果
它说的是为什么动 mask-position 会触发重绘、走不到合成层,然后换一种做法,把一层帘子盖在固定的内容上面平移。
点评:这条我只看懂了一半,先放在这里。前半句我确定。后半句是不是这个意思,我不敢说。但愿意在一个动效站里写这种原理的,不多。
Pro、赞助位、一门动画课的推荐
站上有 Pro,有赞助入口,也放了 Emil Kowalski 那门 UI 动画课的推荐。
点评:这种站最后都要靠订阅和赞助收钱,不稀奇。对普通人的意思在另一边:免费那部分,够把一套顺手的动效抄完了。别一上来就买 Pro。
搜索、筛选、深浅色这些都在
Command-K 能叫出搜索,能按分类筛,能按新旧排,外观三种模式。
点评:基本功。一个动效站愿意把搜索和排序做利索,说明它想让人真的用起来,不是拿首页骗一次点击。
还有一件跟普通人有关的事。
agent 生成的界面,第一版基本都很生硬。能跑,但看着像说明书。要改这个,动效是最便宜的一招。不用重做布局,不用换配色,把过渡调对,观感就上来了。这个站的存在,多少是在回应这件事。
剩下的卡片,数字弹入、通知角标、输入框逐词消散、骨架屏脉冲后交叉淡入、点赞的心和粒子、删除时的烟雾消散,五十来条,从箭头换图标到 3D 跟随鼠标。挑得动,但别一条条刷过去,会腻。
一句提醒:动效这东西,抄一个和抄十个,效果差很多。选一个跟你产品调性对得上的,用熟。
本周就这些。
上面有任何一条你试过、或者觉得我讲错了,欢迎告诉我。讲错的我补,没讲清的我改。
下周见。