大家好，这里是“简单互动”小班。 我们重点分享一些微信公众号品牌运营和互动推文的知识。 如果您对此类话题感兴趣，欢迎留言交流。

在阅读本文之前，你关注过公众号推文中的动画图片吗？

GIF 应该很常见。 每条推文中都少不了表情符号、产品介绍、动态视觉元素等。 推文中的动画图像是如何实现的？

‍♀️我立刻想到GIF图片是可以移动的吧？

还有其他办法吗？ 视频还好吗？ 不可以，视频必须点击才能播放，它不被视为 GIF。 还有其他人吗？

如果您想不起来，请继续阅读。 我们整理了3种常见的动画方法，也许你都见过~

1.GIF动画

图1

GIF大家都很熟悉，所以先提一下。

它的优点是简单，拖入推文即可。 设计师可以创建 GIF，并且有很多工具可以将视频转换为 GIF。

遗憾的是，GIF 最多只支持 256 种颜色，这意味着一张图片中所有像素的颜色加起来也只有 256 种颜色。 它在我们电脑上常见的16,777,216（一千六百万）张彩色图片和视频面前完全无能为力。 快点。 颜色数量差异巨大，大多数GIF图片一眼就能识别出来。 如果用于展示产品效果图或直播视频，图像会出现明显的颗粒感，无意中降低了产品或视频的质量。

对于使用计算机绘制的颜色较简单的动画，GIF 就完全足够了。 绘制时可以控制颜色的数量，从而保证图片的颜色不会丢失太明显。 除非你仔细看，你可能无法判断这种图片是否是GIF。 （如上图①所示，案例可在下面链接找到，首屏字符切换为GIF）

除了GIF格式本身的限制之外，公众号也对GIF进行了限制。 文件不能超过10M，GIF帧数不能超过300帧。 如果您希望动画看起来不太滞后，则它必须至少为每秒 12 帧。 如果每秒有24帧，看起来就足够流畅了。 如果帧数较高，则动画的持续时间必须相应缩短。

此外，公众号还对GIF动画的宽度和总分辨率进行了限制。 下次我会写一篇文章给大家揭晓️‍♀️

2.序列帧动画（SVG）

图2

大多数人从未听说过序列帧。 在推文中很受欢迎，经常被大疆、大疆等品牌的公众号使用。 （如上图2所示，案例可参见下面链接，首屏产品动画采用序列帧实现）

序列帧将视频一张一张导出为图片，使用SVG代码将所有图片连接在一起，然后在它们之间快速切换，就像电影放映机一样。

优点是图像质量好。 序列帧动画的图像质量是由每张图片的图像质量决定的。 可以根据图片的数量来确定图像应压缩的程度。 无论压缩程度如何，最终的图像质量都可以轻松超过只有 256 色的 GIF。 适合展示产品视频。 毕竟花了大价钱买来的视频质量不能就这么毁了。

序列帧没有公众号设置的GIF图片帧数限制。 如果长视频中GIF帧数超过限制，可以尝试改为序列帧。

至于缺点，序列帧的实现需要编写SVG代码。 如果自己做不到，就只能找专业的公司了。 序列帧动画中包含的图片数量通常为数百张图片，第三方推文编辑器可能无法处理。

3.图像轮播动画（SVG）

图3

图片轮播在移动应用程序和网页上随处可见。 原理与序列帧相同。 通过SVG代码来来回切换几张图片，并通过代码控制切换时间和过渡动画。

例如红绿灯效果只需要在三张图片之间切换，多用于产品介绍中。 图片轮播常用于展示产品的各种颜色。 （如上图3所示，案例同上，展示Air的各种颜色实现为图片轮播）

SVG可以做出多种过渡效果。 更改图像的透明度可以淡入和淡出。 调整图像的位置可以使元素移动。 还有缩放、变形等动画。 组合可以创造很大的想象空间。 ‍‍‍‍

如果使用GIF来达到同样的效果，图像质量会大大降低，文件会更大，推文加载也会更慢。 图像轮播还可以吸引观看者多次观看，比平铺图像留下更深的印象。

缺点还在于存在开发成本。 简单的转换比序列帧更麻烦。

综上所述，三种动画方式各有优缺点。 GIF 是最用户友好的，序列帧具有最好的质量，多图像轮播节省麻烦并快速加载。 在选择动画之前，先确认一下自己最关心哪一点，然后再想办法去实现。 我们还计划稍后与大家分享序列帧和多图轮播的具体实现代码，敬请期待。

除了以上三种动画外，还有一些使用纯SVG代码实现的特殊动画，例如元素沿路径移动、矢量图形从一种形状变为另一种形状等。开发成本太高，而且很少有实际应用。 展开说，如果您有兴趣，可以留言交流。

这个问题就这样了，希望对你有帮助