减少动效Prefers Reduced Motion

你可能会说

有人开了系统减少动效，我的页面动画还在动，要处理吗？

读取用户的系统动效偏好，并减少或替换非必要的动态效果访客开启系统的“减少动态效果”后，网页可以查询这项偏好，并减少、停止或替换非必要动画，例如把大幅位移改为静态状态。页面仍要清楚传达加载和状态变化；旋转图标可以换成文字或进度信息，不必保留旋转本身。切换系统设置后检查页面是否随之变化。

先知道

也常被叫作减少动效Prefers-reduced-motion

切换系统开关，看页面动画怎样响应

example.com

卡片一卡片二卡片三

加载指示 + 装饰动画都在动

减少动效：未开启

这里用控件模拟系统偏好；开启后背景渐变和旋转指示停止，页面仍保留可读的加载状态。

减少动效要处理什么

装饰动画减弱或停止：旋转、大幅滑动、视差滚动这类纯装饰动效，在设置开启时应该停下。

状态信息仍要清楚：减少动效时可以停掉加载旋转，再用文字或进度表示仍在等待；保留信息不等于保留动画。

用系统设置验证：改完在系统设置里切换一次，看页面动画是否真的随之变化，才算验收。

选择题选择一个你认为最合适的答案

系统减少动效已开启，但页面的装饰动画仍在播放。该检查什么？

把加载说明和状态信息也一起删掉响应系统偏好，减少非必要动效并保留清楚的状态信息给每个动画加一个暂停按钮就够了

请让页面响应系统的减少动效偏好：开启时减少或替换非必要动画。加载图标可以停止旋转，但页面仍须用静态文字或进度说明等待状态。改完切换系统设置，确认页面会响应。

接下来学什么