最全最好用的动效落地方法

https://www.uisdc.com/exhaustive-dynamic-landing-method
https://www.uisdc.com/exhaustive-dynamic-landing-method-2

AE导出动效落地格式

1.最常用的当属Gif图，它几乎兼容所有主流的浏览器，实现起来也是比较方便简单，但是最致命的问题是，Gif图并不支持半透明/透明图，甚至会出现大量的白边。所以在使用中经常会被吐槽。

2.Apng/Webp格式图，最大特点可以支持半透明/透明动图，并且没有白边，但是并没有广泛使用，由于一些兼容的问题

3.json文件格式，设计师将AE制作的动画通过一个插件生成一个json文件，开发同学可以直接在软件中解析json文件来实现动画。不需要设计师再导出GIF或者序列帧。

安装使用教程
https://zhuanlan.zhihu.com/p/409152471

一、GIF

GIF全称Graphics Interchange Format，图像互换格式，采用8位压缩，最多只能处理256种颜色，不宜应用于真彩色图片。GIF体积大，颗粒感，有锯齿，尤其透明效果动画慎用。

GIF的优势
优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。可插入多帧，从而实现动画效果。可设置透明色以产生对象浮现于背景之上的效果。

GIF的劣势
GIF的alpha通道只有1bit，换言之，一个像素要么完全透明，要么完全不透明，而不像现在PNG的RGBA的8bit alpha通道，alpha值也可以和RGB一样都有255个透明值。这导致了所有GIF的图片带上透明度以后，边缘会出现明显的锯齿。所以如果你的客户端需要展示带透明度的动图，GIF基本上可以不考虑

GIF导出
- 视频+PS导出：AE输出视频—PS打开视频—存储为WEB所用格式(旧版)—存储导出GIF。

  • 序列帧+PS导出：AE导出PNG序列帧图—PS打开序列帧——存储为WEB所用格式(旧版)——存储导出GIF。

  • AE插件GIFGUN导出：方便快捷，缺点是限制在30FPS内，输出质量差，容易掉帧。
    - PS导出GIF失败后的替代方案：
    存储为WEB所用格式(旧版)—点击左下角的预览—自动打开Chrome浏览器—复制网址，将网址粘贴到Safari浏览器中—拖出来就行。
    - GIF压缩方式：PPduck、docsmall。

二、视频

MP4能够直接播放视频、音频的有损文件，实现成本低，兼容性强，体积一般。一般用在宣传、开屏、演示如app的开屏动画。
MP4导出
- 视频+PS导出：AE输出视频—PS打开视频—PS文件导出选择渲染视频—命名—选择输出的文件夹—选择品质高中低—点击渲染。
- 视频压缩方式：Handbrake、格式工厂、Adobe Media Encode。
- 视频转GIF：Gifski。

三、APNG/WEBP

一、什么是Apng、Webp格式图片

Apng

Apng格式是png 的扩展，是基于png格式的位图动画格式图片，它的动图后缀依然是.png

WebP

Webp是一种同时提供了有损压缩与无损压缩的图片文件格式，最初在2010年发布，目标是减少文件大小， 支持导出透明色
基本兼容所有的主流浏览器，同时也兼容所有的安卓设备，不过像一些iOS设备需要通过一定的方式才可以支持，相同效果的WEBP格式要比PNG格式大概要小1/2的大小

二、Apng、Webp优缺点

关于压缩率

压缩率高，apng支持无损压缩，webp支持有损和无损压缩，输出的图片体积都比较小，质量好

关于颜色

相比较于GIF图，apng、webp的图片画质好，颜色细腻且丰富

关于是否支持透明度

两者都支持半透明，基本没有锯齿问题，效果上更好

关于兼容性

相比较gif，两者较弱，gif>webp>apng

三、AE如何导出Apng、Webp格式图片
推荐使用AE插件：BX-WebpApngExporter

AE 导出 Apng/Webp 从未如此轻松

https://zhuanlan.zhihu.com/p/72637097

3.1 如何安装

1、下载 BX-WebpApngExporter.zxp 文件，链接：https://raw.githubusercontent.com/bigxixi/webp_apng_exporter_for_AE/master/BX-WebpApngExporter.zxp
2、根据自己的操作系统下载 ZXP 安装工具：https://aescripts.com/learn/zxp-installer/
然后将 BX-WebpApngExporter.zxp 拖进安装工具

3.2 使用步骤

1、AE 中打开需要导出的合成，在【合成设置】中设置好帧率
2、在【窗口】-【扩展】中运行【BX Webp/Apng Expoter】
3、选择要导出的格式的对应导出地址，并根据情况勾选【是否导出】
（点击「WEBP 地址」、「APNG地址」按钮来选取，也可以手动输入、修改。）
4、设置画质，取值为0-100之间的整数，数字越大画质越好，图片越大。
5、设置循环次数，取值为整数，0为无限循环。
6、点击【生成】

四、LOTTIE/SVGA

LOTTIE是基于JSON格式的动画文件格式，满足很多种类的矢量动画和图片动画，它是多平台的，可以在iOS、Android、Web和React Native上使用，并且按比例放大缩小不会出现像素化；它是小文件，显著提高了下载速度。

## LOTTIE导出

Bodymovin插件导出：下载bodymovin插件，安装成功后，在窗口-扩展-Bodymovin打开，设置导出路径，渲染动画，点击完成。
6f99cdbb690597f981cdb4348f192ed6.png

SVGA是同时兼容iOS、Android、Web的动画文件格式，可以支持AE或Animate大部分效果，动画文件体积更小，播放资源更优，还原效果更好。

## SVGA导出

SVGAConverter插件导出：下载SVGAConverter插件，安装成功后，在窗口-扩展-SVGAConverter_AE打开，设置输出路径，点击开始转换，成功后会有预览。

AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

https://www.pianshen.com/article/18181865315/

安装包：https://svga.io/designer.html
优秀个站：https://www.nangonghan.com

五、总结对比

占用内存对比：

从大到小
视频＞序列帧＞GIF＞APNG/WEBP＞LOTTIE/SVGA

质量稳定对比：

从差到好
视频＜GIF＜序列帧＜APNG/WEBP＜LOTTIE/SVGA

支持AE动效对比：

从多到少
视频＞GIF＞序列帧＞APNG/WEBP＞LOTTIE/SVGA

业务方案：

  • gif虽然体积小、兼容性好、但效果差、不推荐使用、除非非常在意多端兼容性与性能！
    - 简单的动图采用webp、比如简单的聊天表情动图（骰子、石头剪刀布等）
    - lottie适合一些复杂的动画、比如复杂的加载动画、引导动画等、不适合做直播间大礼物特效
    - 直播间复杂的大礼物动可以用效用svga,webp还有apng
    - MP4不建议做直播间礼物动画防范
    因为她不直接支持alpha,需要通过openGL或者CIFilter方式可以通过两个图层叠加的方式达到效果，但是性能不好，如果取帧的FPS介于：16.7~60 则内存暴涨100~150MB左右，而webp和svga则相对会稳定很多

原文：https://blog.csdn.net/weixin_39962889/article/details/111162511
参考：https://zhuanlan.zhihu.com/p/356719736