聊聊动效降级

前言

在日常开发中，经常会碰到包含有大量动效的需求。当一个页面包含有大量动效时，经常会出现卡顿、性能不佳的问题。

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都石雕小微创业公司专业提供成都定制网站营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

正所谓开发三天，优化两星期，为了优化这些动效，很多同学只能一点点抠代码，探寻加载时间点、渲染速度、资源体积等优化点的极限，前端、设计以及测试都疲于奔命。

古语有云，因材施教，话句话说，给合适的人，合适的东西。套用在开发中，可以理解为，为不同用户提供不同的产品效果以提升用户体验。

在动效开发上运用这一点，最后得到的方案就是动效降级。

简介

一句话概括动效降级，即根据机型性能对不同机型进行分级，不同级别提供不同动效。

举个例子，面对高中低端机型，从高到低可以分别提供：视频动画、Lottie 动画以及 CSS 动画。

个人认为，针对中低端机型，更重要的是让用户流畅地体验功能，而不是执着于华丽的效果。

方案设计

机型划分

动效降级的核心在于为合适的机型提供合适的动效，所以，动效降级的第一步是根据规则对不同机型划分不同级别。

IOS 的机型划分相对简单，只需依据机型判断即可，如 iphone6 以下为低端机，iphone8 以下为中端机。

Android 的机型、系统繁多，一个个判断明显不可行，所以需要机型打分平台对 Android 机型进行打分，最终使用评分划分机型级别。

除此之外，还需要维护一个机型黑名单，黑名单主要包括硬件尚可，但是实际显示效果不佳的机型。当命中黑名单时，可以直接降级。

注意，分为高中低三种机型只是一种比较常见的做法，但不是唯一的做法，在实践中，将所有机型分为两种、四种甚至五种级别都是可以的，根据项目自行划分即可。

规则获取

确定完机型规则后，我们还需要获取规则。此时，有两种处理方案：规则写在代码中或服务端下发。

规则写在代码中相对更加简单，性能相对较好（因为省略了请求规则的过程），但是维护不便。

服务端下发方案则刚好相反，易于维护但是性能相对差一些。

如何取舍可以看具体需求。

降级策略

动效降级的策略可以根据不同项目不同背景自行制定，总体来说，按照越高级的机型使用越消耗性能的动效。

举个栗子：

在活动页首页有一个视频动画，针对高端机型保持不变，而中端机型可以使用 Lottie / Canvas 动画，最后的低端机型可以使用 CSS 动画或者 GIF 图片，在最极端情况下，甚至直接使用静态图片或者直接置为空。

TIPS：由于降级流程相对固定，所以可以封装组件，统一使用降级组件进行开发。

特殊场景处理

虽然从原则上来说，所有动效都需要进行动效降级，但是存在部分特殊场景需要特殊处理。

举个栗子：

有一个倒计时页面，使用了很绚丽视频动画，按照制定规则，需要降级为 Lottie 动画，但是产品经理要求降级为 CSS 动画，此时，就需要进行特殊处理。

由于动效场景变化较多，所以降级组件需要提供足够灵活的钩子和配置才能适应更多场景。

兜底处理

前面说的都是根据机型判断、场景判断主动使用动效降级。其实，进行兜底处理的时候，也可以被动使用动效降级。

举个栗子：

在某个高端机上，照理说应该播放视频动画，结果对应的 CDN 资源出问题了，无法拉取到视频动画资源，最终导致播放视频动画失败。此时，可以使用被动动效降级，自动将视频动画降级为 Lottie 动画。以此类推，高端动效降级为中端动效，中端动效降级为低端动效，最终效果是虽然出了 BUG，但是用户没有感知到 BUG。

这就是传说中的：用户都没有感知到 BUG，那就没有 BUG。

埋点统计

完成了动效降级之后，还需要进行埋点统计。

动效降级埋点的意义在于，统计降级占比以及对应机型等。只有获取了相关信息，才能动态调节规则配置，达到最好的动效降级效果。

总体效果

优势

动效降级的优势非常明显：

• 大幅提升了原本难以优化的中低端机型帧率（性能指标狂喜系列
• 大幅降低资源消耗，如 CDN（真 · 我为公司省了几千万系列
• 兜底处理可以显著提高稳定性，预防 BUG、雪崩、击穿等问题（半夜安心睡个好觉系列

可以发现，动效降级通过牺牲了一部分效果，大幅提升了性能、稳定性以及资源消耗，这在大型项目中非常重要。

劣势

动效降级其实也有一定的缺点，比如：

• 前端需要实现多套动效方案（前端想要打人系列
• 设计师需要提供多套动效方案（设计师想要打人系列
• 更多的动效方案，带来了更大的测试压力（QA 想要打人系列
• 产品经理不一定同意动效降级（产品经理正在打人系列

可以发现，动效降级的主要劣势在于需要更多的人力，以及会为了性能牺牲一部分效果。

综上所述，不能盲目使用动效降级方案，必须想办法克服动效降级的缺点，发挥它的长处，方能扬长避短，达到最好效果。

总结

动效降级与其说是一个技术方案，更可以认为是一个理念：为不同机型提供不同的但更合适的体验。这种理念不止可以作用于动效，还可以作用于图片等其他方面。

在我看来，用户的整体体验不仅仅依赖于各种华丽的特效，也不仅仅依赖于极致流畅，而是在两者之间的平衡。两者就像天平的两端，一侧的失衡都会导致体验的断崖式下滑。身为研发工程师，所做的就是维持二者的平衡，以实现最好的用户体验。