切换图标别硬换：模糊 + 缩放

右上角那个主题按钮，在“跟随系统 / 浅色 / 深色”三个图标之间轮换。最早我是直接把图标换掉的，功能没问题，但点下去总不太确定自己点到了没有。后来给它加了一点缩放和模糊，同一个按钮，手感完全不一样了。

为什么这样更好#

• 直接替换像闪了一帧。图形突然跳成另一个，眼睛来不及把“我点了”和“它变了”连起来，反而会怀疑是不是页面自己刷新了。
• 只做淡入淡出会有重影。中间那几帧，太阳和月亮半透明地叠在一起，看到的是两个图形在换班，而不是一次变化。
• 缩放给了点击感。旧图标先缩下去、新图标再弹出来，正好对上手指按下、松开的节奏，人会觉得“这一下按到了”。
• 模糊把两个轮廓揉成一个。新旧图标在最糊的那一刻融在一起，眼睛读到的就是“它变成了另一个”。
• 要快。整个过程四分之一秒左右。慢放时你能看清每一步，正常速度下你不会注意到动画，只会觉得顺。

本站的语言切换用的也是同一套效果。以后再有“在几个选项之间轮换”的按钮，比如收藏 / 取消收藏、播放 / 暂停，都可以直接套这一套。

什么时候不该用#

• 用户在系统里开了“减少动态效果”，就直接切换，不播过程。
• 两个图标本来就有明显的形变关系（比如三条横线变成叉号），让线条直接变形会比模糊更自然。模糊是“找不到更好办法时”的通用解法。
• 只适合小图标、短标签。一大块内容做模糊过渡，看起来会很脏。

出处#

来自本站右上角的主题按钮。“按钮要有按下的回应”“实在不顺就加一点模糊”这两条思路，Emil Kowalski 在 7 Practical Animation Tips ↗ 里讲得很清楚，推荐一读。