UI设计做好AE动画该如何输出给开发？
作者：sHenni
l/article/ZMTI3NDQzNg==.html
写在前⾯
由于最近在输出⽅⾯遇到了点⿇烦，⽆论是寻下载连接也好还是输出过程遇到的问题也好，令我想整理⼀下现有的动画插件资源并且分享出来。在寻的过程中发现还没有⼈把
这些资源整合到⼀起，所以就有了这⽂章。
借着这次整理⼀下动画输出中遇到的坑，同时直接分享各输出⽅式的下载连接和安装指
做好的html怎么发布引，以后打开这个链接起码我⾃⼰能把插件全，不⽤做伸⼿党。
⽬录预览
⼲货很⼲，如果刚好需要那么可以直接到⽂末直接下载。⽬录如下：
常⽤的5种输出⽅式
这⾥列了⽇常⼯作⽐较常⽤到的输出⽅式，基本上能涵盖需求中的动画要求
，我还在这⾥标出了开发⽐较常⽤的格式，⼤家可以根据项⽬需要来决定。
1.Gifgun
AEscripts GifGun是⼀款可以直接在AE⾥⼀键创建输出GIF动画格式脚本，我们在Dribbbble，Behance，站酷所看到的GIF动画⼤部分得益于这个插件的输出。对于作品展⽰是个⾮常好⽤的神器。
这插件在⼀定程度保留了更好的⾊彩，以及⼤⼤压缩了gif⽂件的⼤⼩。在输出路径⽅⾯也具有很强的优势：
使⽤前：AE - 导出MOV - 拖进PS - 导出Gif
使⽤后：AE -窗⼝- 扩展 - Gifgun - 导出gif
Gif图压缩⽹站：gifcompressor/
2.序列帧动画
序列帧是把活动视频⽤⼀帧⼀帧的图像⽂件来表⽰，需要AE导出PNG序列帧图层，质量会⽐Gif好⼀些，因为是位图所以也能显⽰多种动画特效。
缺点：⼤量资源⽂件需要整合放置在客户端安装包内，如果资源过多会导致安装包体积过⼤；
使⽤：AE菜单栏⽂件 — 导出 — 添加到渲染队列 — 导出PNG序列
3.Lottie
Lottie 是 Airbnb 开源的⼀套跨平台的完整的动画效果解决⽅案，我们可以使⽤ Adobe After Effects 设计出漂亮的动画之后，使⽤Lottie提供的 Bodymovin 插件将设计好的动画导出成JSON 格式给开发使⽤。
实现效果有限，如果动画使⽤位图后，资源消耗较⼤，并且除json⽂件外，还需要外链img⽂件夹；
这⾥需要注意：这个外链img⽂件夹⾥的图⽚资源必须跟json⽂件⾥的⽂件名⼀致，在跟开发更换资源的时候经常会混乱，会忘记更换图⽚，导致⽆法显⽰。
对于初⽤Lottie的时候也是⽐较头疼，跟开发了⼀段时间的问题才发现是他们忘记更换，导致json⽆法识别图⽚。
使⽤: AE菜单栏窗⼝ - 扩展 — Bodymovin — 导出.json⽂件
bodymovin⽀持导出效果：airbnb.io/lottie/#/supported-features
4.SVGA
SVGA是YY开发的同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。由于动画⽂件体积更⼩，播放资源占⽤更优，动画还原效果更好，所以我在实际项⽬中使⽤较多。
缺点：能满⾜位图动画，路径动画暂时不能实现。
使⽤: AE菜单栏窗⼝ — 扩展 — SVGAConverter — 导出.svga⽂件
SVGA官⽹：svga.io/designer.html
5.MP4
MP4⼤家都知道的⾳视频格式，但是AE是不能直接导出的。在实际项⽬中普遍应⽤在礼物
⼤动画上，因为MP4能够附带声⾳，所以使⽤场景也⾮常⼴泛，但是使⽤⼀般的MP4会内存⾮常⼤。
所以需要⼀个插件AfterCodecs，渲染输出速度也⽐AE⾃带输出更快，且压缩的⽂件更⼩，画质更佳。
使⽤: 预渲染 — 输出模块 — 格式AfterCodecs — 导出.mp4⽂件
我们该如何选择呢？案例简述
（1）设计前需思考动画表现形式
这⾥我给出两点：1.位置决定表现形式，2.动画设计是否符合需求。
如何理解位置：我们在设计动画前，会先想明⽩在什么位置需要动画，动画应该是怎么样的？例如在Tab的点击动画，动效礼物，引导提⽰等等。
动画的位置决定我们需要如何表达，如何设计以及使⽤什么插件输出。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。