我最喜欢的动画技巧：指数平滑（2023）

文章/技术范围

• 许多读者喜欢对指数平滑和缓动的清晰解释以及交互式演示。
• 一些人指出，这在游戏/Flash 时代是个众所周知的想法（缓动、弹簧函数、PID/比例控制），但看到它被清楚地讲解仍然很有价值。
• 也有人强调它的关键好处：这是一种无状态的平滑运动方式，不受帧率变化或目标变化影响（例如相机运动、惯性滚动），而不只是另一个从 0→1 的缓动曲线。

UI 动画的价值

• 支持者认为动画：
  • 帮助用户跟踪状态变化，理解“东西去了哪里”（例如地图平移、窗口最小化）。
  • 在输入被注册时提供反馈，尤其是在手指会遮挡控件的触摸屏上。
  • 让界面感觉更“精致”，并带来令人愉悦的情绪体验，这对很多用户都很重要。
• 批评者认为：
  • 动画通常会增加延迟，感觉拖沓，而且对简单的二元控件并无必要。
  • 立即响应、更加“利落”的界面更适合生产力和高频使用。
  • 许多现实中的实现速度慢、卡顿，或者会阻塞输入，所以这种技术常常被用错。

切换开关 vs 复选框，以及控件语义

• 关于带动画的开关是否是好隐喻的争论很激烈：
  • 有人说，对于即时系统状态（灯开/关、模式 A/B），切换开关更清晰，而复选框更适合表单。
  • 也有人觉得开关含义模糊：很难看出哪一边是“开”，通常只依赖颜色，并且可能被误认为可拖动滑块。
  • 还有人认为，带有清晰标签的经典复选框/单选按钮更易访问、更易发现，也更具文化上的稳健性。

可访问性、偏好设置与“减少动态效果”

• 多位评论者在系统层面关闭了动画，并表示界面感觉更快、更平静。
• 另一些人指出，操作系统和浏览器支持 prefers-reduced-motion；网页界面应该尊重它，但往往没有这么做。
• 仅靠颜色表示状态受到批评，尤其对色盲用户和电子墨水用户而言；更推荐使用形状、标签和对比度。

实现与性能

• 有人认为这些重 JS、基于 canvas 的演示过度设计，并指出在 Firefox 和移动浏览器中存在严重的性能/冻结问题。
• 也有人强调，在生产环境中通常会使用 CSS transitions/easing 或经过精心调校的弹簧函数，而不是很多 requestAnimationFrame 循环。
• 讨论还涉及指数平滑的渐近行为，以及替代方案（基于二次/平方根的方法、摩擦项、PID 控制）。