在日常开发中,经常会碰到包含有大量动效的需求。当一个页面包含有大量动效时,经常会出现卡顿、性能不佳的问题。
正所谓开发三天,优化两星期,为了优化这些动效,很多同学只能一点点抠代码,探寻加载时间点、渲染速度、资源体积等优化点的极限,前端、设计以及测试都疲于奔命。
古语有云,因材施教,话句话说,给合适的人,合适的东西。套用在开发中,可以理解为,为不同用户提供不同的产品效果以提升用户体验。
在动效开发上运用这一点,最后得到的方案就是动效降级。
简介一句话概括动效降级,即根据机型性能对不同机型进行分级,不同级别提供不同动效。
举个例子,面对高中低端机型,从高到低可以分别提供:视频动画、Lottie 动画以及 CSS 动画。
个人认为,针对中低端机型,更重要的是让用户流畅地体验功能,而不是执着于华丽的效果。
方案设计 机型划分动效降级的核心在于为合适的机型提供合适的动效,所以,动效降级的第一步是根据规则对不同机型划分不同级别。
IOS 的机型划分相对简单,只需依据机型判断即可,如 iphone6 以下为低端机,iphone8 以下为中端机。
Android 的机型、系统繁多,一个个判断明显不可行,所以需要机型打分平台对 Android 机型进行打分,最终使用评分划分机型级别。
除此之外,还需要维护一个机型黑名单,黑名单主要包括硬件尚可,但是实际显示效果不佳的机型。当命中黑名单时,可以直接降级。
注意,分为高中低三种机型只是一种比较常见的做法,但不是唯一的做法,在实践中,将所有机型分为两种、四种甚至五种级别都是可以的,根据项目自行划分即可。
规则获取确定完机型规则后,我们还需要获取规则。此时,有两种处理方案:规则写在代码中或服务端下发。
规则写在代码中相对更加简单,性能相对较好(因为省略了请求规则的过程),但是维护不便。
服务端下发方案则刚好相反,易于维护但是性能相对差一些。
如何取舍可以看具体需求。
降级策略动效降级的策略可以根据不同项目不同背景自行制定,总体来说,按照越高级的机型使用越消耗性能的动效。
举个栗子:
在活动页首页有一个视频动画,针对高端机型保持不变,而中端机型可以使用 Lottie / Canvas 动画,最后的低端机型可以使用 CSS 动画或者 GIF 图片,在最极端情况下,甚至直接使用静态图片或者直接置为空。
TIPS:由于降级流程相对固定,所以可以封装组件,统一使用降级组件进行开发。
特殊场景处理虽然从原则上来说,所有动效都需要进行动效降级,但是存在部分特殊场景需要特殊处理。
举个栗子:
有一个倒计时页面,使用了很绚丽视频动画,按照制定规则,需要降级为 Lottie 动画,但是产品经理要求降级为 CSS 动画,此时,就需要进行特殊处理。
由于动效场景变化较多,所以降级组件需要提供足够灵活的钩子和配置才能适应更多场景。
兜底处理前面说的都是根据机型判断、场景判断主动使用动效降级。其实,进行兜底处理的时候,也可以被动使用动效降级。
举个栗子:
在某个高端机上,照理说应该播放视频动画,结果对应的 CDN 资源出问题了,无法拉取到视频动画资源,最终导致播放视频动画失败。此时,可以使用被动动效降级,自动将视频动画降级为 Lottie 动画。以此类推,高端动效降级为中端动效,中端动效降级为低端动效,最终效果是虽然出了 BUG,但是用户没有感知到 BUG。
这就是传说中的:用户都没有感知到 BUG,那就没有 BUG。
埋点统计完成了动效降级之后,还需要进行埋点统计。
动效降级埋点的意义在于,统计降级占比以及对应机型等。只有获取了相关信息,才能动态调节规则配置,达到最好的动效降级效果。
总体效果 优势动效降级的优势非常明显:
- 大幅提升了原本难以优化的中低端机型帧率(性能指标狂喜系列
- 大幅降低资源消耗,如 CDN(真 · 我为公司省了几千万系列
- 兜底处理可以显著提高稳定性,预防 BUG、雪崩、击穿等问题(半夜安心睡个好觉系列
可以发现,动效降级通过牺牲了一部分效果,大幅提升了性能、稳定性以及资源消耗,这在大型项目中非常重要。
劣势动效降级其实也有一定的缺点,比如:
- 前端需要实现多套动效方案(前端想要打人系列
- 设计师需要提供多套动效方案(设计师想要打人系列
- 更多的动效方案,带来了更大的测试压力(QA 想要打人系列
- 产品经理不一定同意动效降级(产品经理正在打人系列
可以发现,动效降级的主要劣势在于需要更多的人力,以及会为了性能牺牲一部分效果。
综上所述,不能盲目使用动效降级方案,必须想办法克服动效降级的缺点,发挥它的长处,方能扬长避短,达到最好效果。
总结动效降级与其说是一个技术方案,更可以认为是一个理念:为不同机型提供不同的但更合适的体验。这种理念不止可以作用于动效,还可以作用于图片等其他方面。
在我看来,用户的整体体验不仅仅依赖于各种华丽的特效,也不仅仅依赖于极致流畅,而是在两者之间的平衡。两者就像天平的两端,一侧的失衡都会导致体验的断崖式下滑。身为研发工程师,所做的就是维持二者的平衡,以实现最好的用户体验。