R3.08.3capability-based animation degradation设计
动画需可根据设备能力降级
别名: prefers-reduced-motion · 动画降级 · 低 GPU 跳过动效
概念解释
同一套动效不能假设每台设备都跑得完。动画按设备能力降级,是给运动单独准备一条可切断的路径:系统要求减少动态时停掉或换成瞬时切换;GPU / 帧预算不够时跳过装饰性过渡,只保留位置或状态的最终值。它针对的是运动本身,不是整站功能如何按能力裁剪。一般性的低端降级管的是功能可达;这里管的是这段过渡播不播、播多重。
机制
能力信号来自两条线。一条是用户或系统偏好:prefers-reduced-motion 表示运动本身不可取,与机器快慢无关,响应应是取消或大幅缩短过渡,而不是换成另一种同样强烈的运动。另一条是运行时能力:持续掉帧、GPU 进程崩溃、省电模式、低内存。这条线的响应是减轻合成负载——去掉模糊和粒子、把布局动画改成 transform/opacity,仍不够就跳过,直接到终态。
降级必须保持可操作:按钮还在、状态还变、焦点还走。去掉的是过渡的中间帧。若降级后功能消失,那是把运动当成了功能载体,说明交互不该只活在动画里。分层可以是:全动效 / 只合成器属性 / 无过渡终态。切换要在动画开始前完成,避免播到一半再砍,那会制造一次比掉帧更硬的跳变。
边界
减少动态效果是偏好,不是性能测量;旗舰机开了它也要停。反过来,低端机用户没开偏好时,仍可能需要按帧预算跳过——两条信号要同时接。过场若承担“还在处理”的告知,跳过后要留下静态进度,不能连状态指示一起删。游戏、创作工具里运动即内容,降级策略由品类决定,不能套信息界面的“装饰性过渡可关”。无动画的页面没有可降级对象。
怎么落地
- 所有装饰性过渡挂上减少动态媒体查询:匹配时 duration 为零或极短,并取消循环、视差、大位移。
- 用运行时帧时间或 GPU 能力探测决定是否进入“只终态”档;探测要在首次过渡前,不要等用户已经看过一次卡顿。
- 交互状态(开、关、选中、错误)必须能在无过渡时表达,动效只是叠加。
- 验证:打开系统减少动态,页面应无持续运动,任务仍可完成。在低端机或模拟限 GPU 下,装饰性过渡应被跳过,且不出现半截动画。对照未降级的旗舰路径,确认终态一致。