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

前言

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

由于工作的教基础原因参与了一款独立 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 的冲击下更是崩得体无完肤，相较于前两年的大环境，如今的设计师在薪资福利变化不大的情况下 ，需要承担更多的职能才能获得在圈子里继续摸爬滚打的资格 。

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

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

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

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

由此，

共勉。

作者：眉笔有点霉