详解：多帧SVG动画在公众号表现卡顿，怎么优化？

多帧动画（专业术语为“序列帧”）本质上是一种基于 SVG translate 高速瞬移动画，形成的以连续静态图播放展现动态画面的交互图文设计。但正因其图片数量庞大、动画速度过快，导致微信卡顿情况高概率发生。那么对编辑器用户或开发者而言，应当怎样进行具体优化？本期 E2 编辑器为你带来详解。

微信团队官方

从来不欢迎序列帧

对动辄 10 万+的多数头部品牌而言，在本就流量基数庞大的图文中再植入超多的序列图片，毫无疑问会为腾讯云服务器带来惊为天人的总流量消耗——从平台侧看，以每年 300 元的账号认证费来讲，平均下来其实根本抵不上每个品牌的官方账号流量成本。

更重要的是，以每张图片 1MB 为估计，单个普通 64 帧序列在没有被压缩的条件下，就能理论上瞬间消耗掉用户观看一个短视频的流量——并不是想说用户的流量成本有多高，而是在逻辑上网络其实无法在一瞬间充分加载出近乎一条短视频体量的渲染资源。这也就是为什么，一些高频使用序列帧的品牌账号（如 Apple 等），其图文在打开一瞬间往往画面爆闪，或等待许久都无法加载出任何画面的原因。

即便微信团队已经采用了二次压缩和懒加载策略，以优化图像的流量消耗规则，大量的序列帧仍然会给用户带来糟糕的用户体验——甚至可能由于手机硬件无法承受高速图像渲染而直接导致图文重启、APP 闪退或系统黑屏。

因而在前不久，微信团队甚至短暂推行过每篇公众号图文不超过 100 张图的限制规则。目前虽然已放宽到 300 张图片，仍然足见官方对序列帧的排斥程度。

不建议你

逆反平台策略进行设计

可见，简单粗暴地应用 SVG 序列帧实际上是吃力不讨好的交互设计策略，我们永远不建议你逆反公众号平台的策略进行作品开发。对于普遍存在的动画效果，我们希望广大用户首先采用丰富的 E2 编辑器各类轮播模版进行制作，既能让画面清晰显著优于 GIF，又在体积上远远小于 GIF。

对于一些非轮播特性的动态，通过动静分离等策略，我们也可以极大优化图文体积的同时实际提升画面的品质。这里，推荐阅读业内知名学者撰文的一期深度教程《计育韬：新媒体（公众号）端GIF动态图压缩对抗与优化的核心方法》，一定能帮助你对 GIF 的格式有飞跃性的全面认知。

如果序列帧

有充分必要性

Adobe Photoshop 等软件中导出的普通静态序列文件，通常并不是最佳的压缩状态。通过专业的工具进行二次处理，我们其实可以得到清晰度目视完全一致，但体积急剧缩小，确保序列帧本身加载与播放更丝滑流畅的高压缩比版本。

推荐使用如（https://tinypng.com/）等在线产品进行批量预处理，优化图像素材的整体体积，再进行基于 E2 编辑器的序列帧操作。这不仅是为了规避微信公众号平台的限制，本身也是为了提升用户端阅读时的切实感受。

从用户体验出发，正确认知多帧 SVG 动画的应用意义，避免无效的运营劳动和错误的效果生成。唯有精进提升对动态格式 GIF 和 SVG 动画自身的理解和掌握，才是克服多帧SVG动画在公众号表现卡顿的最优解。