不碰设计软件，我是怎么靠 Coding 做动画的？

一、全文速览图

最近在工作中，我越来越频繁地使用 Coding 来完成设计 Demo 的搭建，也开始尝试给研发交付 UX 部分的真实代码。动画的部分相比于在传统设计软件里完成，制作成代码再交付是更高效的一种选择。

二、适合 AI 生成的动画效果

通常来说，AI 擅长撰写的动画有以下特征：

可以被逻辑驱动的，或者本质是清晰的数学公式：AI 对这类强规则的代码处理更擅长；

适合用代码参数控制：比如速度、密度、透明度、轨迹、尾迹长度、抖动强度、模糊度，都可以被拆出来快速调整。

这里我准备了一些完全通过代码而非设计软件实现的动画案例：

1. UI Motion

这类动画比较常见。像元素的位移、旋转、路径变形，以及颜色、透明度的变化、布局过渡，用代码都能实现，且能够直接交付研发复用。

技术栈：CSS, Framer Motion, GSAP

By:serafimcloud

2. 生成式阵列

粒子、点阵是这类效果的代表。最重要的是，这类图形本身可以由代码直接生成，不用先在设计软件画一遍。另外动效很适合表达信息流动、内容生成、思考过程这些抽象概念。

技术栈：HTML5 Canvas, JS

By:Perplexity 设计师 Gunnar Gray

3. 风格化滤镜

以 ASCII、Dither 为代表，本质是用算法对图像进行重新映射——比如把灰度值转译成字符密度，或者用误差扩散来控制点阵分布。视觉表现力极强，适合做品牌视觉、海报生成器或背景。

技术栈：Canvas

4 月份做的练习：https://www.bilibili.com/video/BV17KK96hEvr/

4. WebGL

代表效果有 3D 场景搭建、可交互的产品展示、粒子星云、流体模拟、光影氛围营造等。用代码做的好处是，画面是实时渲染的，用户可以直接和场景互动——旋转视角、缩放细节、甚至让鼠标移动影响光影变化。适合表达空间感强、需要沉浸体验的概念，或者让用户自由探索的交互场景。

技术栈：Three.js, Shader

By:Enzo Manuel Mangano

三、实践分享：生成一组 AI 状态动画

先看看最终实现的效果：

1. 静态图形生成

这次探索中我希望 AI 同时完成图形的设计、动画生成。于是我先找了一些意向图，并让 AI 分析对应风格关键词：

点阵效果、Halftone，通过不同尺寸的 Dots 组合成图形，复古又极具极客感。

我将提示词和参考图发给 Gemini，要求一次性生成多个案例进行对比，打算从中选择 1-2 个案例进行迭代。

初版效果

初步感觉图形中 Dots 的变化少，看起来有些死板，在上图中第二个方案的基础上继续要求 AI 对 Dots 透明度、大小、密度进行优化，几轮对话后得到了相对满意的一个效果，图形更有呼吸感。

2. 让 AI 帮我描述动画

动画包含太多视觉感受，变化往往复杂，很难只靠语言描述清楚。

我的经验是：别直接和 AI 说"做一个科技感的动画"，而是说清楚使用场景、表达的情绪状态，甚至找参考效果给 AI 看。让 AI 先帮你起草一版 Prompt，然后你来改。这比从零开始描述要高效得多。

AI 帮忙写的 Prompt

实现的第一版动画

3. 快速调参方法

直接改代码

很多时候，我们对动画的感受是模糊的。通常我也只会告诉 AI“有科技感”“轻一点”“增加一点呼吸感”，虽然 AI 支持语义化 Prompt ，这种描述还是比较低效。

当需要调整动画细节时，让 AI 指出具体的代码位置，或者让 AI 帮忙写调参滑块都是更高效的办法：

暴露详细参数设置

比如这样一个路径动画，AI 可以帮我暴露出这些参数：

花瓣数、半径、旋转圈数、光斑大小、光斑强度、速度、拖尾长度、线宽、背景路径透明度……

这样我就不需要每次都让 AI 猜测我的模糊意图，也不需要通过反复对话来修改。这种即时反馈的爽感，是 Figma 给不了的，也是传统开发流程给不了的。

作品观看：https://www.bilibili.com/video/BV17KK968EuK/

4. 多方案对比

这也是我觉得 AI + Coding 很有价值的地方：它可以让我在很短时间里看到多个方向，并且直观的摆在一起。可以帮助我将原本比较模糊的视觉判断，变成一个不断尝试再收敛的过程。

历史迭代版本

四、一些小经验

1. 学习动态效果描述

先把效果做出来，再反向学习：让 AI 描述已经调整好的动画效果。

当一个效果已经跑起来之后，可以让 AI 根据代码、截图或录屏，帮我总结它的视觉特征和运动特征。

让 AI 把原本感性的视觉描述，重新整理成可复用的语言和文档。下一次我再让 AI 生成类似效果时，就不只是说“做得更高级一点”，而是可以更准确地描述运动方式、视觉结构和参数范围。

PS：可以要求模型在写文档时“去黑话”

2. 适合 Coding 动效的模型

这里分享一些个人使用经验：

Gemini 3.1 Pro 是我用得最多的。审美和动画能力都在线，对图片、视频参考的理解都很不错。但 Google 基础设施太不稳定，API 调用经常报错，偶尔会陷入问题反复绕圈，优化不了。

Claude 4.7/4.8 我主要用来修 bug。Gemini 搞不定的复杂 Shader 问题，扔给 Claude 往往能解。就是 token 太少，得省着用。

GPT 5.5 量大管饱，适合解答代码问题、写功能。但动画能力和审美确实差一些。

Kimi 2.6 性价比极高。简单任务上完全够用，速度还快，适合做快速测试和验证方向。审美上 Gemini > Kimi > GPT。（测试时 2.7 还未发布）

3. Motion skill 有效，但效果有限

现阶段，Motion Skill 对动画生成的帮助还有限，无法指望通过调用 Skill 一次性生成优质的动画效果。

以下是我调用 Lottiefills 官方推出的 Motion Skill 进行测试的效果。

首先是一组像素图标动画，可以看到使用 Kimi 2.6 调用 Skill 后，动画没有明显的变好。最终使用 Gemini 3.1 Pro，通过提示词和人工经验调教的效果是更佳的：

https://www.bilibili.com/video/BV1jKK968EqM/

这一次我使用了 Gemini 3.1 Pro 来调用 Skill 进行对比，调用 Skill 后，动画似乎非但没有变好，甚至有了更劣的趋势：

https://www.bilibili.com/video/BV1qKK968EKT/

以上就是我这段时间用 AI 做动画的经验分享。坦白说，这只是一次非常个人化的探索，远谈不上什么方法。随着身边越来越多的设计师把 Coding 加入日常工作流，创意和代码之间的那道墙正在慢慢变窄。如果你也对代码生成好奇，不妨从最简单的效果上手试试。