动效邪修保姆级教程！给懒人的零基础动效产出指南

前言

一些碎碎念，不感兴趣的同学可以跳过哈。

由于工作的原因参与了一款独立 App 的开发设计工作，或主动或被动的，我需要尝试着为 App 增加许多动态的元素设计，但是……

淦啊！术业有专攻的好不好，我只是个卑微的美工啊，没有任何动画动效、3D 建模基础的啊！魂淡！

但现实告诉我：不，你不可以。

因此我再一次被迫去思考——没有相关基础的我，能不能借助AI工具来尝试着搞定App中所有动态元素的设计（常规组件的交互不算，留给开发同学们去搞定吧~），顺利完成工作？

几乎是下意识的，我往优设的搜索框输入了一些关键词试图找到现成的解决方案，但事与愿违，相关的内容并不是很多，我看完之后总感觉少了点什么，但 Deadline 又让我不得不放弃深度学习，现在的我只需要一个简单有效的方法。

在挤出的时间里，我快速浏览了所有能触及到的内容，算是理清了大概的动效流程，最终当然是愉快地进行了交付。

如果诸君跟我一样有类似的烦恼，请继续往下看吧。

事先声明：本邪修教程只针对零基础且需要短期内进行交付的同学，如果有充裕的时间，建议还是去学习一下正规的制作方式哈。

一、动效制作的流程

首先，欲练此功必先……知其原理，也就是对动效制作流程有一个大概的认知，这样才能知道该从哪个地方入手，该借助什么样的AI工具去达到想要的效果，要不然会走火入魔的哈。

那么根据我目前收集了解到的信息，整个动效制作流程大概如下图：

通过这张流程图可以清晰地看到，我们大致的任务就三项：设计、交付、验收，而最大的难点就是在前两项，零基础的我们该怎么设计？然后又该怎么交付？

我刷到很多宣称教你用 AI 工具做动效的老师，都只教了前半段，也就是怎么做，但少了后半段，也就是怎么交付。

那就很难受了呀，就像我刚兴冲冲地带上抽纸，你告诉我厕所在检修？

又联想到这可能只是一个不需要特别教学，大部分人基本了解的知识点，我就更难受了——也就是说，只有我不知道功能正常的厕所在哪儿？！

但没有关系，我也有朋友，我也可以在多年未联系后，在这一个时间点成为对方的好厚米。

很快我就结合朋友（义父）的指点与网上的教程，明白了该向开发同学交付什么内容，这样一来我需要完成的工作就非常清晰了：

1. 借助 AI 工具完成动态内容的制作；
2. 通过 AE 与插件的配合，导出可用于交付的内容。

那接下来，就让我们大干一……且慢，容我再啰嗦两句。

相信我，这些很重要。

二、目前主流的交付格式有哪些

围绕上述提到的第 2 点再简单延伸一下，帮助各位跟我一样零基础的同学，丰满一下交付方面的知识。

当然如果你已经箭在弦上不得不发，那可以直接跳过本段。

目前我了解的动效格式有以下这些（有遗落或不对，请帮我在评论区补充/修正，感谢）：

1. Lottie (最主流：JSON / .dotLottie——Fito同款)

这是目前 UI 设计师最通用的交付方式，主要用于图标动效、加载动画（Loading）和引导页。

1. 文件格式： .json 或压缩后的 .dotLottie。
2. 制作工具：After Effects (配合插件) 或 Lottie Creator。
3. 优点： 矢量、文件极小、清晰度极高（无限缩放）。
4. 缺点： 不支持 AE 的所有效果（如粒子、部分模糊、复杂的 3D 效果）。如果 AE 里的合成太复杂，iOS 端可能会掉帧或显示错误。

2. Rive (最前沿：.riv —— 多邻国同款)

如果你想要实现像多邻国那种能跟用户鼠标/手指互动的角色动画，Rive 是目前的最优解。

1. 文件格式： .riv。
2. 制作工具：Rive 网页端工具（自成体系，不再依赖 AE）。
3. 优点： * 状态机（State Machine）： 你可以定义“当用户点击时播放 A，不点时播放 B”。
4. 性能极强： 比 Lottie 更轻量，且支持更复杂的骨骼动画。
5. 缺点： 需要设计师学习新的绘图和动画工具（类似小型游戏引擎）。

3. PAG (大厂首选：.pag)

由腾讯开源，旨在解决 Lottie 无法支持复杂 AE 特效的问题。

1. 文件格式： .pag。
2. 制作工具：After Effects (配合 PAG 插件)。
3. 优点： * 全特效支持： 几乎支持 AE 里所有的效果（模糊、发光、甚至嵌套视频）。
4. 性能稳定： 采用二进制解码，在大规模动画展示时比 Lottie 更流畅。
5. 缺点： 它是非矢量的（实际上是基于序列帧和矢量的混合），文件体积可能略大于 JSON。

4. SVGA (曾经流行：.svga)

过去在直播间礼物特效中非常流行，现在正逐渐被 PAG 替代。

1. 文件格式： .svga。
2. 制作工具：AE 或 Flash (配合 SVGA 插件)。
3. 优点： 兼容性好，适合在 Android 和 iOS 上保持高度一致。
4. 缺点： 官方库维护频率降低，灵活性不如 Rive。

5. 高级视频方案 (带 Alpha 通道的 HEVC)

如果你要做极其华丽、类似 CG 的全屏背景动画。

1. 文件格式： .mp4 (使用 HEVC + Alpha 编码)。
2. 注意： 普通 MP4 不支持透明背景，但 iOS 13+ 支持带透明通道的 HEVC 视频。
3. 优点： 画面表现力上限最高（可以有光影渲染、流体等）。
4. 缺点： 体积大，对电池寿命有一定影响。

6. 位图序列 (APNG / WebP)

当你的动画包含大量细碎的纹理、照片或复杂的渐变，且无法用矢量表达时。

1. 文件格式： .apng 或 .webp。
2. 优点： 像 GIF 一样好用，但支持透明度且无毛边，画质远高于 GIF。
3. 缺点： 帧数多时文件会非常大。

7. GIF

以前很通用，但现在逐渐被淘汰

1. 文件格式： .gif
2. 优点：能用
3. 缺点：多到懒得写，总之不建议用

总结

目前效果最好的肯定是 lottie 动画与 rive 动画（相信大厂的选择），但这俩具备一定的门槛，想要达到足以产出商业素材的水平，需要投入时间精力去学习，并且 ai 工具基本无法介入到这两个动画的制作流程当中（至少我没有找到很好的方法。）

后续 3、4、5、6、7 中，我首推 pag 动画，它兼容性强，能支持 ae 中的绝大部分效果，配合插件导出方便，同时体积也不大，对我来说算是最优解了。

当然如果你受限于环境因素无法使用 pag 文件，那其他几种格式的文件也是可以的，毕竟对我们来说无非就是怎么导出的事儿~

三、怎么通过 AI 来辅助我们进行创作与交付

首先你需要准备一些趁手的家伙：1.可以用来支持文生视频或是首尾帧生视频的 ai 工具；2.AE；3.pag 插件。

第 1 点很宽泛哈，像是即梦、可灵、vidu、海螺都可能做到，看你个人喜好。

第 2 点需要各位同学发挥自己的主观能动性去解决，我相信这在 2025 年不是什么特别困难的事情，当然，如果你实在解决不了也可以私信我，万一我能解决呢……

第 3 点自不必多说，直接点击下方的链接进入，根据自己电脑的系统选择对应的版本下载即可，在官网中还有非常详细的文档供你浏览。

网址：https://pag.io/#download

当你准备完所有的工具以后，就该面对设计工作了，但相信我，这也非常非常简单。

1.素材制作

首先你需要准备两张静态图（一张是开头，一张是结尾）并上传至即梦、可灵、海螺等平台的图生图功能中，当然如果你跟我一样懒的话，也可以让 ai 帮你制作这两图，不过这需要你对最终想要的结果有一个相对清晰的认知，并知道该怎么去描述它们。

生成黄铜徽章

选择自己想要的素材，进行一下扩图操作，在四周增加留白，尽可能减少图形在整个画布中的占比，以避免水印遮挡住素材（充值了具备去水印等级会员的，可以直接忽略）。

增加四周的留白

接着进入到图生视频阶段，请各位同学自行切换功能或是平台，上传两个素材作为首尾帧后，用文字描述中间发生的变化，直接生成

演示平台：可灵

演示平台可灵

目前 vidu 支持三帧生图，也就是从图 1 过渡到图 2 再到图 3，因此理论上可以生成首尾相连的循环素材。

当然，支持其他支持首尾帧生成的平台，通过一些巧妙的方法也可以做到，比如先用两张图作为首尾帧生成视频，再将该视频的最后一帧导出为图片，配合图 1 进行首尾帧视频生成，最终再将两段视频进行剪辑拼接，理论上也是可以的。

2.导出交付

将生成后的视频素材下载后导入至 ae，对画布大小或视频位置与尺寸进行调整，只要看不到水印即可，到了这一步差不多就完事了（充值了具备去水印等级会员的，可以直接忽略）。

如果你需要透明背景，可以在画布里选中动态素材后，在顶部菜单栏选择“效果——抠像——颜色范围”，然后选择动态素材中的背景色进行抠除，熟悉ps的同学应该很快就能上手。

有时候 ai 生成的背景色带有一定的渐变或杂色，这时候只要保持耐心，在下方时间轴中逐步检查没抠干净的地方，再依葫芦画瓢即可。

最后的导出环节，在顶部菜单栏依次选择“文件——导出——PAG File（Panel）”，

在弹窗中可能会显示如下信息：

不用紧张，只要点击设置图标，随后在变换后的窗口中将 BMP 下方的框框勾选上即可，然后就能顺利进行 pag 格式文件导出了。

最后在 pag 预览器中看一下大致的效果，没问题后要将 pag 文件交给开发同学即可。

至少我这边（Swift）经过测试后，动态效果可以在机器上顺利展示，虽然质量上做不到顶尖，但应付一下日常工作是够用了。

由此，围绕着 pag 动画的邪修教程大致结束，我这边只演示了一种，更多能借助 ai 工具完成的有趣效果，得靠同学们自行去尝试了哈。

PS：即没有氪金也没有对静态素材进行扩展，就会如下效果，反面案例不要学哈~

4.结尾的碎碎念

随着各类 ai 工具在各个领域逐渐普及，不少行业的生产模式都迎来了颠覆性的变革，尤其是设计行业，本身在各类培训机构的冲击下，门槛就在逐年降低，圈子愈加接近饱和。

2025 年在 ai 的冲击下更是崩得体无完肤，相较于前两年的大环境，如今的设计师在薪资福利变化不大的情况下，需要承担更多的职能才能获得在圈子里继续摸爬滚打的资格。

很多时候，一个人的进步是被迫且无可奈何的，时代的洪流裹挟着你向前，要么放弃沉溺，要么使劲往前游。

指代我，或者说像我一样的设计师。

就是想努力去接纳新的事物，然后尝试着将其为自己所用，做到以前做不到的事。

每向前一步，命运的斩杀线就会迟来一步。

由此，

共勉。