从动效设计到代码｜网易云音乐2018年度听歌报告的背后( 六 )_从动效设计到代码

最明显的例子就是彩色渐变在 GIF 里都是分层的，因为它没有足够的颜色来过度。另外就是如果需要导出透明底的 GIF 其边缘会有「毛边」，这也是无奈却无解的。

那么视频呢？

虽然在很多 H5 项目里都用视频来承载动效，但一个视频想要在现在这个各种奇怪的高清大屏横行的年代保持清晰，体积就小不了，也不能做成透明（至少主流的 mp4 不行，其他格式兼容性不行）来配合静止图片来适配各种机型，对这次的项目来说还是不太合适。

我们还考虑过志在取代 GIF 的 APNG/WEBP 格式，且不说兼容性的隐忧，对于透明底的图片，相对于 GIF 画质提升的同时，体积也变大不少。

前面几个说的都是不需代码的资源格式，给过去就能用。我们还考虑了结合代码的其他方案：

序列帧（JavaScript代码控制播放）的好处是画质就取决于图片画质，不过根据研发同事的反馈，少量、小体积的情况下还可以，图多了对性能不太好。

SVG 也是个不错的选择，实际上最后项目里也用到了不少 SVG 动画，他的好处是可以当成 GIF 图片来用，不需引入第三方库和学习新的操作方案（没错说的就是 Lottie）。

从动效设计到代码｜网易云音乐2018年度听歌报告的背后( 六 )