如何探讨动效降级的优化策略？

本文共计2115个文字，预计阅读时间需要9分钟。

前言+在日常生活中开发中，经常会遇到包含大量动效的需求。当一个页面包含大量动效时，通常会出现在卡顿、性能不佳的问题。正是所谓的开发三天，优化两周，为了优化这些动效，耗时颇多。+

前言

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

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

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

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

简介

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

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

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

方案设计 机型划分

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

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

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

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