动效的设计阶段我们通常会使用PS/AE/C4D等设计软件，常用到的图片格式主要是GIF、PNG序列帧。我先简单介绍一下这两种格式的导出↓↓↓

GIF：

PS：文件>导出>储存为web所用格式>类型【GIF】

AE：不能直接导出GIF

C4D：不能直接导出GIF

PNG序列：

PS：文件>导出>渲染视频>选择【Photoshop图像序列】

AE：合成>添加到渲染队列>输出模块>格式选择【PNG序列】

C4D：创建动画预览>在图片查看器中保存为【静帧】

在实际开发中这两种格式的图片往往不能满足实现效果，接下来分享一些我在交付动效时遇到的问题和目前找到的解决方案。

GIF支持全透明，不支持半透明，边缘会出现杂边的问题，目前常用的处理方法是在输出时采用颜色描边或选择无杂边。

PNG序列动画对色彩还原和透明度保留效果都更好，但是文件较大，播放时容易卡顿。其中一种解决办法是将多张序列图片合成一张大图（Sprites精灵图），前端使用CSS Sprites实现动画，可以减小图片的体积和减少对服务器的请求数量。

但是在前端配合程度不高的情况下，希望设计直接给到一张动图，又该怎么办？我又找到了这两种办法↓↓↓

WEBP：是Google在2010年发布的一种图片格式，可静态可动态，文件体积更小，可无损压缩，支持透明色…这样听起来简直完美！但是…有兼容性问题，Safari和IE浏览器不支持，具体的兼容情况如下（2020年1月）↓↓↓

APNG：APNG是PNG的升级版，他的后缀名依然是.png，包含动态的情况下体积会比普通静态png大数倍，可以无损的展示动态。不过依然有兼容性问题，IE浏览器不支持，不过APNG向下兼容PNG，在不支持APNG的浏览器中显示为第一帧静态PNG图片。具体的兼容情况如下（2020年1月）↓↓↓

了解了这两种格式，可以根据项目的需要取舍选用，那么如何制作WEBP/APNG图片呢？

一，格式转换软件iSparta

二：AE插件！来自知乎《AE 导出 Apng/Webp 从未如此轻松》

我这里主要讲的是将动效导出成图片的方法，另外还有比较火的Lottie——可应用于Andriod和iOS的动画库，它通过bodymovin插件来解析Adobe After Effects 动画并导出为json文件，通过手机端原生的方式或者通过React Native的方式渲染出矢量动画。 好像更适合移动端，网页虽然也可以用这个方式，但对前端的要求高一些，在前端不配合的的情况下就是扯淡了~并且对动效设计有很多限制，能在AE中实现的效果非常有限，还有使用位图后资源消耗大等问题。 

我目前找到的解决办法就是这些，希望能对同样迷惑的你有所帮助

ﾍ|･∀･|ﾉ*~❤

Powered by Froala Editor