2026-06-20 / 5 min

LiuliX Glaze 的动效整理

记录 LiuliX Glaze 的页面转场、滚动出现和按钮反馈怎样收敛成一套更稳定的规则。

前端动效Framer Motion

一开始给 LiuliX Glaze 加动效时,页面里每个效果都能单独工作,但放在一起不够统一。页面转场、卡片 hover、滚动出现和按钮按压的速度不同,阅读时会有点乱。

后来我先整理规则,再补具体效果。组件级状态变化交给 Framer Motion:页面入场、列表切换、按钮反馈和卡片 hover 使用同一套节奏,避免每个组件各自处理 easing 和 Spring。

有两点一直没有放松:性能和用户偏好。高频交互尽量使用 transform 和 opacity,避免为了一个小反馈频繁触发布局;当用户选择减少动效时,页面仍保留状态变化,只是不再依赖大幅位移和连续动画。

这次让我更明确一件事:动效不是最后加上的装饰。它应该帮助用户理解页面状态,但不能让内容阅读变慢。

完整站点结构见 LiuliX Glaze 项目页。