为何基于代码的动画再次胜过 GIF

Google 2026 年对代码原生视觉的推动并非要取代设计师——而是旨在直接从提示生成小巧、无限分辨率的资产。Gemini 3.1 级模型可以输出带有嵌入式 CSS 或 SMIL 动画的有效 SVG 标记。由于结果是数学而非像素，一个文件即可从移动图标缩放到英雄区域，无需重新导出。

本教程将在 MidassAI Chat 上带你完成三个递进的项目——无需 Figma 时间轴，无需 After Effects，在粘贴最终代码片段之前甚至不需要本地 IDE。

适合人群

原型设计微交互的前端开发人员
需要为落地页制作轻量级加载器和图标的营销人员
构建交互式图表（物理、化学、流程）的教育工作者
任何厌倦了在其他快速网站上加载 2 MB GIF 的人

在 MidassAI Chat 中体验 Gemini 3

提示前须知：防止输出垃圾内容的三个约束

始终在第一封消息中包含以下内容：

输出格式： “仅返回原始 SVG 代码，以 <svg 开头，以 </svg> 结尾。无 Markdown 围栏。”
动画引擎： “在 SVG 内的 <style> 块中使用 CSS @keyframes"（如果需要仅 SMIL 嵌入，则使用“使用 <animateTransform>"）。
视口： "viewBox=0 0 100 100", width/height=100%, preserveAspectRatio=xMidYMid meet."

如果没有 #1，你将在 CMS 编辑器中与 Markdown 包装器斗争。如果没有 #2，模型有时会选择不一致的动画 API。如果没有 #3，响应式布局会在移动端崩溃。

项目 1：三点加载旋转器（入门）

打开 MidassAI Chat 并发送：

为确保结果准确，请使用以下英文提示：

Write a single self-contained SVG loading indicator: three circles in a row, staggered bounce animation, 1.2s loop, colors #4F46E5 / #6366F1 / #818CF8. Output only raw SVG. Include CSS keyframes inside the SVG. viewBox 0 0 120 40.

60 秒内验证：

将输出复制到 <body> 内的空白 .html 文件中。
在 Chrome 中打开——动画应平滑循环。
检查文件大小——预期 低于 3 KB。

常见修复： 如果圆圈在顶部被裁剪，回复：“将 viewBox 高度增加 20%，并将 bounce 幅度减少 15%。”

项目 2：交互式按钮悬停状态（中级）

目标：SVG 图标在悬停时改变描边颜色——纯 CSS，无 JavaScript。

提示模板：

请使用以下英文提示模板：

Create an SVG icon (24×24 logical size, scalable) of a chat bubble. On :hover via CSS inside the SVG, transition stroke from #64748B to #2563EB over 200ms ease-out. Include role="img" and <title>Chat</title>. Output raw SVG only.

将其粘贴到网站的图标槽中或内联到 HTML 中。由于悬停是由 CSS 驱动的，它适用于静态页面和大多数 CMS HTML 块。

陷阱： 某些 sanitizers 会剥离 <style> 标签。如果你的 CMS 剥离样式，请在后续消息中要求 Gemini“将动画移动到每个元素的内联 style 属性”。

项目 3：带触发器的教育模拟（高级）

受使用 Gemini 制作交互式图表的化学和物理教育工作者的启发，构建一个单文件模拟：

请使用以下英文提示生成模拟：

Generate a single-file interactive SVG illustrating a simple state machine: Idle → Loading → Success. Include a <button> inside <foreignObject> labeled "Run". On click, animate a progress arc from 0° to 360° over 2s, then show a green checkmark. Use CSS classes toggled via minimal inline JS inside <script> within SVG (CDATA wrapped). Output only the SVG document.

测试清单：

按钮点击每个周期仅触发一次
第二次点击时动画干净重置
无外部资产或字体

如果 <foreignObject> 在你的目标平台中失败，请要求 Gemini“将 foreignObject 按钮替换为使用 href='#run' 和 :target CSS 伪类的 <a> 触发器”。

迭代循环：专业人士如何无需从头开始即可优化

将每个回复视为一个版本，而非一次性用品：

粘贴当前 SVG。
描述一个视觉变化（“更慢的缓动”，“扁平设计，无渐变”）。
询问：“返回完整更新后的 SVG；保留 viewBox 和 accessibility title。”

当你锚定坐标时（“将中心点从 (50,50) 移动到 (50,45)"），Gemini 3 能很好地处理空间编辑。

Gemini 3.1 与旧模型在 SVG 任务上的对比

旧模型通常：

发出损坏的 XML（未闭合的路径）
错误地混合 HTML 和 SVG 命名空间
使用已弃用的 SMIL 动画且无回退方案

Gemini 3.1 级输出通常在现代浏览器中首次尝试即可渲染加载器和图标任务——但在嵌入上下文（WordPress、Notion、电子邮件客户端会 aggressively 剥离脚本）中始终进行验证。

comparison-table {"headers":["Output type","File size vs GIF","Scales to 4K?","Editable?"],"rows":[["Animated GIF","Large (100KB–2MB)","No (pixel blur)","No"],["Gemini SVG + CSS","Often <10KB","Yes","Yes — text edit"]]}}

发布前生产检查清单

通过 W3C SVG validator 或等效工具运行输出
在 Safari + Chrome 中测试（CSS 动画计时略有不同）
确认 CMS 不剥离 <style> / <script>
添加 prefers-reduced-motion 媒体查询——要求在后续消息中让 Gemini 生成此项
根据你的组织政策归属 AI 辅助资产

何时不使用此工作流

跳过 AI 生成的 SVG 动画当：

品牌指南要求锁定的设计系统组件
你需要与 Figma 中已有的复杂缓动曲线进行 Lottie 集成
目标环境是电子邮件（SVG 支持不一致）

对于营销网站、文档门户和内部工具，提示到 SVG 仍然是从想法到嵌入的最快路径之一。

下一步

实时运行项目 1，将旋转器粘贴到你的暂存页面，然后迭代品牌颜色。MidassAI Chat 在浏览器中为你提供 Gemini 3 级代码生成——无需 AI Studio 项目设置。

summary-box {"title":"Tutorial recap","rows":[["Tool","MidassAI Chat + Gemini 3"],["Output","Self-contained animated SVG"],["Key prompt rule","Raw SVG only, CSS keyframes inside"],["Validate","Browser + file size under 10KB"]]}}

几分钟制作动画 SVG：Gemini 3.1 教程