动效邪修保姆级教程 ！给懒人的零基础动效产出指南
前言
一些碎碎念，不感兴趣的保姆同学可以跳过哈 。
由于工作的教基础原因参与了一款独立 App 的开发设计工作 ，或主动或被动的程给产出 ，我需要尝试着为 App 增加许多动态的懒人元素设计 ，但是指南……
淦啊 ！术业有专攻的动效的零动效好不好 ，我只是邪修个卑微的美工啊 ，没有任何动画动效、保姆3D 建模基础的教基础啊！魂淡 ！程给产出
但现实告诉我 ：不 ，懒人你不可以 。指南
因此我再一次被迫去思考——没有相关基础的动效的零动效我 ，能不能借助AI工具来尝试着搞定App中所有动态元素的设计（常规组件的交互不算，留给开发同学们去搞定吧~） ，顺利完成工作 ？
几乎是下意识的 ，我往优设的搜索框输入了一些关键词试图找到现成的解决方案 ，但事与愿违 ，相关的内容并不是很多 ，我看完之后总感觉少了点什么 ，但 Deadline 又让我不得不放弃深度学习 ，现在的我只需要一个简单有效的方法。
在挤出的时间里 ，我快速浏览了所有能触及到的内容 ，算是理清了大概的动效流程 ，最终当然是愉快地进行了交付 。
如果诸君跟我一样有类似的烦恼 ，请继续往下看吧。
事先声明：本邪修教程只针对零基础且需要短期内进行交付的同学 ，如果有充裕的时间 ，建议还是去学习一下正规的制作方式哈 。
一 、动效制作的流程
首先 ，欲练此功必先……知其原理，也就是对动效制作流程有一个大概的认知 ，这样才能知道该从哪个地方入手 ，该借助什么样的AI工具去达到想要的效果 ，要不然会走火入魔的哈 。
那么根据我目前收集了解到的信息 ，整个动效制作流程大概如下图 ：
通过这张流程图可以清晰地看到 ，我们大致的任务就三项 ：设计 、交付 、验收 ，而最大的难点就是在前两项 ，零基础的我们该怎么设计 ？然后又该怎么交付？
我刷到很多宣称教你用 AI 工具做动效的老师 ，都只教了前半段 ，也就是怎么做 ，但少了后半段 ，也就是怎么交付 。
那就很难受了呀 ，就像我刚兴冲冲地带上抽纸 ，你告诉我厕所在检修 ？
又联想到这可能只是一个不需要特别教学 ，大部分人基本了解的知识点 ，我就更难受了——也就是说 ，只有我不知道功能正常的厕所在哪儿 ？ ！
但没有关系 ，我也有朋友，我也可以在多年未联系后 ，在这一个时间点成为对方的好厚米 。
很快我就结合朋友（义父）的指点与网上的教程 ，明白了该向开发同学交付什么内容 ，这样一来我需要完成的工作就非常清晰了 ：
- 借助 AI 工具完成动态内容的制作；
- 通过 AE 与插件的配合 ，导出可用于交付的内容 。
那接下来 ，就让我们大干一……且慢，容我再啰嗦两句 。
相信我 ，这些很重要 。
二 、目前主流的交付格式有哪些
围绕上述提到的第 2 点再简单延伸一下，帮助各位跟我一样零基础的同学 ，丰满一下交付方面的知识 。
当然如果你已经箭在弦上不得不发 ，那可以直接跳过本段 。
目前我了解的动效格式有以下这些（有遗落或不对 ，请帮我在评论区补充/修正，感谢） ：
1. Lottie (最主流 ：JSON / .dotLottie——Fito同款)
这是目前 UI 设计师最通用的交付方式，主要用于图标动效 、加载动画（Loading）和引导页 。
- 文件格式： .json 或压缩后的 .dotLottie 。
- 制作工具 ：After Effects (配合插件) 或 Lottie Creator 。
- 优点： 矢量 、文件极小 、清晰度极高（无限缩放） 。
- 缺点 ： 不支持 AE 的所有效果（如粒子 、部分模糊 、复杂的 3D 效果） 。如果 AE 里的合成太复杂 ，iOS 端可能会掉帧或显示错误。
2. Rive (最前沿：.riv —— 多邻国同款)
如果你想要实现像多邻国那种能跟用户鼠标/手指互动的角色动画 ，Rive 是目前的最优解 。
- 文件格式 ： .riv 。
- 制作工具 ：Rive 网页端工具（自成体系 ，不再依赖 AE） 。
- 优点 ： * 状态机（State Machine） ： 你可以定义“当用户点击时播放 A，不点时播放 B”。
- 性能极强： 比 Lottie 更轻量 ，且支持更复杂的骨骼动画 。
- 缺点 ： 需要设计师学习新的绘图和动画工具（类似小型游戏引擎） 。
3. PAG (大厂首选 ：.pag)
由腾讯开源，旨在解决 Lottie 无法支持复杂 AE 特效的问题 。
- 文件格式： .pag。
- 制作工具 ：After Effects (配合 PAG 插件) 。
- 优点 ： * 全特效支持 ： 几乎支持 AE 里所有的效果（模糊 、发光 、甚至嵌套视频） 。
- 性能稳定 ： 采用二进制解码 ，在大规模动画展示时比 Lottie 更流畅 。
- 缺点 ： 它是非矢量的（实际上是基于序列帧和矢量的混合），文件体积可能略大于 JSON 。
4. SVGA (曾经流行 ：.svga)
过去在直播间礼物特效中非常流行 ，现在正逐渐被 PAG 替代 。
- 文件格式 ： .svga 。
- 制作工具 ：AE 或 Flash (配合 SVGA 插件) 。
- 优点： 兼容性好 ，适合在 AndROId 和 iOS 上保持高度一致 。
- 缺点 ： 官方库维护频率降低 ，灵活性不如 Rive 。
5. 高级视频方案 (带 Alpha 通道的 HEVC)
如果你要做极其华丽、类似 CG 的全屏背景动画 。
- 文件格式 ： .mp4 (使用 HEVC + Alpha 编码)。
- 注意 ： 普通 MP4 不支持透明背景 ，但 iOS 13+ 支持带透明通道的 HEVC 视频 。
- 优点： 画面表现力上限最高（可以有光影渲染 、流体等） 。
- 缺点 ： 体积大 ，对电池寿命有一定影响 。
6. 位图序列 (APNG / WebP)
当你的动画包含大量细碎的纹理、照片或复杂的渐变 ，且无法用矢量表达时。
- 文件格式 ： .apng 或 .webp 。
- 优点 ： 像 GIF 一样好用 ，但支持透明度且无毛边 ，画质远高于 GIF 。
- 缺点 ： 帧数多时文件会非常大 。
7. GIF
以前很通用 ，但现在逐渐被淘汰
- 文件格式 ： .gif
- 优点：能用
- 缺点 ：多到懒得写，总之不建议用
总结
目前效果最好的肯定是 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 的冲击下更是崩得体无完肤，相较于前两年的大环境 ，如今的设计师在薪资福利变化不大的情况下 ，需要承担更多的职能才能获得在圈子里继续摸爬滚打的资格 。
很多时候 ，一个人的进步是被迫且无可奈何的 ，时代的洪流裹挟着你向前 ，要么放弃沉溺 ，要么使劲往前游 。
指代我，或者说像我一样的设计师 。
就是想努力去接纳新的事物 ，然后尝试着将其为自己所用 ，做到以前做不到的事 。
每向前一步，命运的斩杀线就会迟来一步 。
由此 ，
共勉 。
作者 ：眉笔有点霉
前言
一些碎碎念，不感兴趣的保姆同学可以跳过哈 。
由于工作的教基础原因参与了一款独立 App 的开发设计工作 ，或主动或被动的程给产出 ，我需要尝试着为 App 增加许多动态的懒人元素设计 ，但是指南……
淦啊 ！术业有专攻的动效的零动效好不好 ，我只是邪修个卑微的美工啊 ，没有任何动画动效、保姆3D 建模基础的教基础啊！魂淡 ！程给产出
但现实告诉我 ：不 ，懒人你不可以 。指南
因此我再一次被迫去思考——没有相关基础的动效的零动效我 ，能不能借助AI工具来尝试着搞定App中所有动态元素的设计（常规组件的交互不算，留给开发同学们去搞定吧~） ，顺利完成工作 ？
几乎是下意识的 ，我往优设的搜索框输入了一些关键词试图找到现成的解决方案 ，但事与愿违 ，相关的内容并不是很多 ，我看完之后总感觉少了点什么 ，但 Deadline 又让我不得不放弃深度学习 ，现在的我只需要一个简单有效的方法。
在挤出的时间里 ，我快速浏览了所有能触及到的内容 ，算是理清了大概的动效流程 ，最终当然是愉快地进行了交付 。
如果诸君跟我一样有类似的烦恼 ，请继续往下看吧。
事先声明：本邪修教程只针对零基础且需要短期内进行交付的同学 ，如果有充裕的时间 ，建议还是去学习一下正规的制作方式哈 。
一 、动效制作的流程
首先 ，欲练此功必先……知其原理，也就是对动效制作流程有一个大概的认知 ，这样才能知道该从哪个地方入手 ，该借助什么样的AI工具去达到想要的效果 ，要不然会走火入魔的哈 。
那么根据我目前收集了解到的信息 ，整个动效制作流程大概如下图 ：
通过这张流程图可以清晰地看到 ，我们大致的任务就三项 ：设计 、交付 、验收 ，而最大的难点就是在前两项 ，零基础的我们该怎么设计 ？然后又该怎么交付？
我刷到很多宣称教你用 AI 工具做动效的老师 ，都只教了前半段 ，也就是怎么做 ，但少了后半段 ，也就是怎么交付 。
那就很难受了呀 ，就像我刚兴冲冲地带上抽纸 ，你告诉我厕所在检修 ？
又联想到这可能只是一个不需要特别教学 ，大部分人基本了解的知识点 ，我就更难受了——也就是说 ，只有我不知道功能正常的厕所在哪儿 ？ ！
但没有关系 ，我也有朋友，我也可以在多年未联系后 ，在这一个时间点成为对方的好厚米 。
很快我就结合朋友（义父）的指点与网上的教程 ，明白了该向开发同学交付什么内容 ，这样一来我需要完成的工作就非常清晰了 ：
- 借助 AI 工具完成动态内容的制作；
- 通过 AE 与插件的配合 ，导出可用于交付的内容 。
那接下来 ，就让我们大干一……且慢，容我再啰嗦两句 。
相信我 ，这些很重要 。
二 、目前主流的交付格式有哪些
围绕上述提到的第 2 点再简单延伸一下，帮助各位跟我一样零基础的同学 ，丰满一下交付方面的知识 。
当然如果你已经箭在弦上不得不发 ，那可以直接跳过本段 。
目前我了解的动效格式有以下这些（有遗落或不对 ，请帮我在评论区补充/修正，感谢） ：
1. Lottie (最主流 ：JSON / .dotLottie——Fito同款)
这是目前 UI 设计师最通用的交付方式，主要用于图标动效 、加载动画（Loading）和引导页 。
- 文件格式： .json 或压缩后的 .dotLottie 。
- 制作工具 ：After Effects (配合插件) 或 Lottie Creator 。
- 优点： 矢量 、文件极小 、清晰度极高（无限缩放） 。
- 缺点 ： 不支持 AE 的所有效果（如粒子 、部分模糊 、复杂的 3D 效果） 。如果 AE 里的合成太复杂 ，iOS 端可能会掉帧或显示错误。
2. Rive (最前沿：.riv —— 多邻国同款)
如果你想要实现像多邻国那种能跟用户鼠标/手指互动的角色动画 ，Rive 是目前的最优解 。
- 文件格式 ： .riv 。
- 制作工具 ：Rive 网页端工具（自成体系 ，不再依赖 AE） 。
- 优点 ： * 状态机（State Machine） ： 你可以定义“当用户点击时播放 A，不点时播放 B”。
- 性能极强： 比 Lottie 更轻量 ，且支持更复杂的骨骼动画 。
- 缺点 ： 需要设计师学习新的绘图和动画工具（类似小型游戏引擎） 。
3. PAG (大厂首选 ：.pag)
由腾讯开源，旨在解决 Lottie 无法支持复杂 AE 特效的问题 。
- 文件格式： .pag。
- 制作工具 ：After Effects (配合 PAG 插件) 。
- 优点 ： * 全特效支持 ： 几乎支持 AE 里所有的效果（模糊 、发光 、甚至嵌套视频） 。
- 性能稳定 ： 采用二进制解码 ，在大规模动画展示时比 Lottie 更流畅 。
- 缺点 ： 它是非矢量的（实际上是基于序列帧和矢量的混合），文件体积可能略大于 JSON 。
4. SVGA (曾经流行 ：.svga)
过去在直播间礼物特效中非常流行 ，现在正逐渐被 PAG 替代 。
- 文件格式 ： .svga 。
- 制作工具 ：AE 或 Flash (配合 SVGA 插件) 。
- 优点： 兼容性好 ，适合在 AndROId 和 iOS 上保持高度一致 。
- 缺点 ： 官方库维护频率降低 ，灵活性不如 Rive 。
5. 高级视频方案 (带 Alpha 通道的 HEVC)
如果你要做极其华丽、类似 CG 的全屏背景动画 。
- 文件格式 ： .mp4 (使用 HEVC + Alpha 编码)。
- 注意 ： 普通 MP4 不支持透明背景 ，但 iOS 13+ 支持带透明通道的 HEVC 视频 。
- 优点： 画面表现力上限最高（可以有光影渲染 、流体等） 。
- 缺点 ： 体积大 ，对电池寿命有一定影响 。
6. 位图序列 (APNG / WebP)
当你的动画包含大量细碎的纹理、照片或复杂的渐变 ，且无法用矢量表达时。
- 文件格式 ： .apng 或 .webp 。
- 优点 ： 像 GIF 一样好用 ，但支持透明度且无毛边 ，画质远高于 GIF 。
- 缺点 ： 帧数多时文件会非常大 。
7. GIF
以前很通用 ，但现在逐渐被淘汰
- 文件格式 ： .gif
- 优点：能用
- 缺点 ：多到懒得写，总之不建议用
总结
目前效果最好的肯定是 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 的冲击下更是崩得体无完肤，相较于前两年的大环境 ，如今的设计师在薪资福利变化不大的情况下 ，需要承担更多的职能才能获得在圈子里继续摸爬滚打的资格 。
很多时候 ，一个人的进步是被迫且无可奈何的 ，时代的洪流裹挟着你向前 ，要么放弃沉溺 ，要么使劲往前游 。
指代我，或者说像我一样的设计师 。
就是想努力去接纳新的事物 ，然后尝试着将其为自己所用 ，做到以前做不到的事 。
每向前一步，命运的斩杀线就会迟来一步 。
由此 ，
共勉 。
作者 ：眉笔有点霉
