用途:当页面动画导致用户头晕、恶心、方向感混乱或前庭不适时,用该技能定位并消除触发因素,在保留动效可用性的同时降低前庭风险。
主要能力:识别危险模式,包括大范围缩放动画、多层视差滚动、全屏旋转、快速方向切换、持续或循环背景运动,以及 scroll-jacking(劫持滚动)。按动画原则做诊断:夸张导致动作过猛,应将形变控制在 10-20% 以内并避免全屏缩放;弧线造成追踪负担,功能性 UI 改用线性运动;跟随动作的过冲产生甩鞭效应,去掉导航中的回弹,改用临界阻尼弹簧或 ease-out;次级动作让多个元素同时运动造成混乱,限制为单一主动效并移除视差层;缓入缓出中突然变速带来迷失感,改用一致可预测的缓动。
快速修复:必须尊重 prefers-reduced-motion(不可妥协);移除视差;用淡入淡出替代缩放过渡;位移保持在 100px 以内;不劫持滚动。
排查清单:是否尊重 prefers-reduced-motion;是否有元素移动超过 100px;是否存在缩放;是否含视差(应移除);是否有持续或循环动画;用户能否暂停或关闭动效;在大屏显示器上测试(动效会被放大);连续测试 5 分钟以上。
安全替代:缩放过渡改为淡入加轻微缩放(最大 5%);视差滚动改为静态或单层;旋转改为淡化或滑动;回弹/弹簧改为无过冲的 ease-out;整页滑动改为交叉淡化。
使用方式:示例代码通过媒体查询 prefers-reduced-motion: reduce 将 animation-duration、transition-duration 设为 0.01ms、animation-iteration-count 设为 1、scroll-behavior 设为 auto,并将 .parallax 的 transform 置为 none;安全默认过渡为 transition: opacity 200ms ease-out,避免使用大数值的 transform。
限制:资料未说明该技能的安装方式、平台支持范围与具体版本要求,也未提供除上述代码模式外的完整实现。相关价格、收费与效果数据暂未提供。