动效与粒子：让界面有生命，不让用户付注意力税

进入、展开、完成、失败、排序变化，都是动效应该出现的地方。用户必须能从运动中看懂“什么变了、变到哪里、是否完成”。

如果移除动画后用户完全不受影响，它可以是环境动效；如果移除后用户不知发生什么，它应该更短、更明确。

粒子网络可以营造空间感，鼠标新生节点可以给探索反馈，但它们不应遮挡内容、截获事件或干扰阅读。

每个粒子系统都需要数量上限、连线半径和 Reduce Motion 降级。性能预算是动效设计的一部分。

常规状态切换通常 160–220ms 足够；长过程应显示真实进度，而不是用慢动画拖延。可打断、可暂停的动效比炫技更重要。

当动效涉及重要结果或权限，文字状态必须与视觉反馈同步存在。

动效设计的输入不是“让它更丝滑”，而是组件从什么状态变到什么状态。为进入、退出、展开、排序、成功、失败和等待分别写出起点、终点、触发方式和可被打断的规则。

同一元素的位置、尺寸、透明度和颜色不应各自随意运动。先确定哪一个属性承担主要叙事，其余属性只辅助，避免用户同时追踪多个变化。

涉及数据变化时优先保持对象恒常性：旧值如何离开、新值从哪里进入、排序后同一个对象去了哪里。没有连续关系的淡入淡出会让用户失去上下文。

跟随鼠标、排斥、吸附、视差和拖拽都需要定义作用半径、最大位移、速度衰减和离开后的恢复方式。只实现 pointermove 而没有 damping，效果通常会抖、追不上或让元素无法回到稳定状态。

互动粒子不应抢占主要点击区域，也不能依赖 hover 才能理解内容。触屏环境要决定是关闭、改为陀螺仪、改为轻触触发，还是使用完全自动的低强度版本。

事件处理使用 requestAnimationFrame 合帧，避免每个 pointer event 都触发 React render。粒子数量、devicePixelRatio 和模糊半径应根据设备能力动态降级。

prefers-reduced-motion 不只是把 duration 设为零。位移、缩放、连续视差和大面积粒子应替换为淡入、静态状态或直接完成，同时保留必要的成功、失败反馈。

为每种效果设预算：同时运动的元素数、主线程时间、GPU 合成层、内存与低端设备帧率。页面背景粒子应比操作反馈更早降级，因为它的业务价值最低。

验收时用快速连续点击、标签页恢复、窗口缩放、低电量模式和长时间运行测试。一个首次打开很惊艳但十分钟后持续耗电的效果，不属于可交付的产品动效。