5种动效输出格式优缺点对比，含一键输出AE动效参数方法
source link: https://www.shejidaren.com/5-zhong-dong-xiao-shu-chu-ge-shi-you-que-dian-dui-bi-han-yi.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
5种动效输出格式优缺点对比，含一键输出AE动效参数方法
作为用户体验领域不可缺少的一部分，动效随处可见。日常工作中，我们可能只用1-2种动效格式，对其他格式的了解有所欠缺。
这次介绍5种动效输出格式和教程，包括PS输出和AE输出，建议收藏保存下来随时查看，帮助大家更快更好地完成落地！
01. GIF方式
一种无损压缩的8位图像文件。大多用于网络传输上，速度要比传输其他格式的图像文件快，但不能用于存储真彩的图像文件。
优点：兼容性好，可以多平台支持。
缺点：GIF格式仅支持256种不同的颜色，文件占用空间大，会有色彩失真效果。
GIF-PS输出方式
GIF-AE输出方式
02. PNG序列帧方式
PNG序列帧就是把一张一张的PNG图片按照顺序播放，跟GIF相比不会产生边缘锯齿的效果，也比GIF支持的色彩范围大。
优点：制作方便简单，还原度高，颜色偏差损失基本没有(PNG图片压缩可能会有颜色偏差)，动效效果还原度高(因为就是一张一张图片播放的，像AE做的一些雨水，火焰都可以显示出来，开发人员可调节播放速度)。
缺点：需要加载全部图片，文件占用内存大，内存一大就容易造成打开页面的时候卡顿，大的文件用户体验感很差。
PNG序列帧-PS输出方式
PNG序列帧-AE输出方式
03. SVGA方式
Svga背景：jianshu.com/p/dfa16d9d67cd
官方网站：https://svga.io/index.html
官方插件：https://svga.io/designer.html
官方文章：https://svga.io/article.html
优点：SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。SVGA的转换器和播放器都开源。
使用设计师工具，可以轻松的将 Aep 或 Fla 格式的动画文件导出成 SVGA 格式资源文件。动画设计师通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。
动画文件体积小，播放资源占用优，动画还原效果好，使用方法简便，大大提高了工作效率。
缺点：有损压缩，不支持图层渐变和插件特效，有的平台并不支持Svga。
SVGA动效输出流程
SVGA动效输出方式
04. Lottie方式
Lottie是Airbnb开发的一款能够为原生应用添加动画效果的开源工具。Lottie目前提供了iOS,Android和ReactNative版本。
Lottie通过AE设计好的动画效果，通过Bodymovin插件直接导出json文件，并允许开发人员直接调用它们。Lottie库使开发人员能够实现动画效果，提升了工作效率，减少了码代码的时间。
优点：前端可以方便地调用动画和控制动画，以减少前端码代码的时间。json文件的小，性能表现也很好。
缺点：不支持渐变、粒子、阴影透视等效果，表达式也只支持一部分，图层命名需要英文。
Lottie动效输出流程
Lottie动效输出方式
05. MP4方式
常用的视频格式，通常用在网站的展示背景还有宣传的MG动画什么的。
优点：兼容性非常好。
缺点：适合背景展示或者其他展示方面，其他方面很少使用。
MP4-AE输出方式
一键输出交互动效参数
动效参数文档是一种把动效参数量化的文档，它是动效设计师和前端开发人员沟通的重要工具。
以前动效标注文档还要一个一个图层标注(位置，旋转，透明图，动画曲线)。现在直接用脚本文件「InspectorSpacetime」直接就可以一键出来了。
最后
以上是5种常见的动效输出格式和输出教程，强烈建议收藏保存下来，已备随时查看，也希望这些内容能让大家对动效格式有更多了解和使用～
另外推荐大家去「三长老」主页查看更多内容：zcool.com.cn/article/ZMTQ3NDk5Mg==.html
作者：三长老
来源：Clip设计夹（ID：ClipppDesign）
赞助商链接
Recommend
-
84
关于我们&条款 北京市海淀区中关村南1条甲1号ECO中科爱克大厦6-7层 北京市公安局海淀分局备案编号：110108002980号 营业执照
-
6
↑↑↑关注后" 星标 "Datawhale 每日干货 &
-
11
MySQL 与 Postgres 和 SQLite 的对比和优缺点发布于 2020年08月31日 ｜ 上次编辑：2020年09月01日 本文比较和对比了三个最广泛使用的开源 RDBMS：SQLite、MySQL 和 PostgreSQL。具体地说，我们会探讨每个 RDBMS 使用...
-
14
如何让动效又快又好落地？我分析了这5种格式的优缺点！ - 优设网 - UISDC 动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。...
-
12
图片来源：123rf.com.cn 【收藏】跨境物流怎么找？...
-
5
1.为什么5G信号的穿墙效果比2.4G信号差？ 与路由器的距离相同时，5G信号相对
-
11
JELLY | json动效与apng动效实现方法与优劣对比json动效与apng动效实现方法与优劣对比上传日期：2022.03.31随着时间的发展，对视觉体验的要求越来越高，当然少不了动效的设计，但由于针对动效的开发，前端资源紧张，开发成本较高...
-
7
营销动效怎么落地｜用PAG动效，支持输出3D图层！-经验/观点-UICN用户体验设计平台 ...
-
8
JVM消除重复自负参数-XX:+UseStringDeduplication的优缺点 - JAXenter - 极道 什么是重复的字符串？25％的Java应用程序内存...
-
6
tcx格式的运动记录文件优缺点，怎么能转换tcx文件如果您发现本文排版有问题，可以先点击下面的链接切换至老版进行查看！！！
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK