前言

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

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

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

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

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

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

由此 ，

共勉。

作者：眉笔有点霉