代码出片：让Claude写程序生成可控视频动画

不知道从什么时候开始，"做一条视觉大片"这件事，默认等同于"打开视频生成模型，输入一段提示词，等待抽卡"。画面不可控、时长受限制、想修一个局部等于重新生成，成了很多人放下这类工具的直接原因。其实还有另一条路线被严重低估了：让 Claude Opus 5.5 这类强代码模型，把"视频"写成"程序"。不靠视频模型，也能做出粒子星云、3D 漫游、数据动画、产品片头——这就是本文要讲的"代码出片"。

代码出片不是新奇玩法，而是生成范式的一次转向：从"黑盒生成画面"变成"生成一个会画面的程序"。前者给你一张抽卡结果，后者给你一个可控的生产工具。你可以改参数、换配色、重新渲染、随时复用，甚至把它直接嵌进网站、App 或数据大屏里。

这篇文章会从一条主线展开：先讲清楚代码出片的原理和适用场景，再拆解 10 个真实可用的"代码出片"案例，随后给出 5 个能直接上手的开源项目，最后用一个最小示例完整跑通"让 Claude 写代码 -> 本地渲染 -> FFmpeg 输出视频"的流程。如果你正在做可视化内容、技术传播、或者想给团队找到一条低成本做视频的路子，这篇文章值得读完，也建议收藏备用。

1. 为什么说"代码出片"是视频生成之外的第二条路线

先看一个最常见的尴尬场景。你用视频生成模型做一条 10 秒的粒子流动画，第一次生成可能不错，但你想调整粒子的颜色、运动方向、镜头角度——对不起，要么重新抽卡，要么在后期软件里逐帧修补。更麻烦的是，视频模型生成的画面往往无法做到"某一帧精确修改"，这对生产级内容来说是很大的痛点。

代码出片解决的是另一类问题：不追求"生成一个视频文件"，而是生成一段能够实时渲染出动画的程序。这个概念层面上完全不同。

传统视频模型的链路是：

text复制文本提示词 -> 潜空间采样 -> 解码成视频帧

代码出片的链路是：

text复制文本需求 -> 代码生成模型写出渲染程序 -> 程序按帧渲染 -> 合成视频

后者的关键差异在于：每一步都是可解释、可修改、可重跑的。粒子数量不对，改代码里的 particleCount；颜色不喜欢，改调色板数组；镜头要上移，改相机参数。这种"代码即剧本"的方式，正在被越来越多人用在产品宣传片、技术演示、数据可视化、生成艺术甚至影视预演上。

从材料看，Claude Opus 5.5 这类模型在代码生成上的优势，恰恰是能够把自然语言里的空间关系、运动节奏、光影变化转化为可执行的渲染代码。也就是说，你需要做的不是写好每一个像素，而是清晰地描述"画面里有什么、动起来是什么感觉"，剩下的交给模型补全细节。

所以这里想给出一个明确判断：视频生成模型适合"快、糙、不可控"的灵感验证；代码出片适合"慢、精、可复用"的正式内容。两条路线不互斥，但如果你追求可控性，代码出片才是主力方案。

2. 基础概念与核心原理

把"让模型写代码做视频"这件事拆开，其实只需要理解三个环节：指令生成、实时渲染、帧合成。

2.1 指令生成：从自然语言到渲染程序

这是 Claude Opus 5.5 这类代码模型最擅长的部分。你告诉它"我要一个金色粒子螺旋上升的动画，背景深蓝，粒子数量 3000，持续 8 秒"，它会输出一个完整的 HTML + Canvas 页面，或者一段 Python 脚本。你拿到的是源码，不是图片，这是"代码出片"与"视频生成"分道扬镳的第一步。

这里容易被新手误解的点是：Claude 并不是在"生成视频"。它生成的是规则的描述、循环逻辑、物理模拟的计算过程。真正把画面画出来的，是 Canvas、WebGL、Pillow、Manim 这些渲染工具。

2.2 实时渲染：程序如何把帧画出来

渲染工具决定你的技术栈选择：

代码出片默认你至少掌握一种渲染工具的运行方式，但不要求你从零手写算法。你可以让模型帮你生成核心代码，你做的是运行、调试、调参和最终合成。

2.3 帧合成：从图片序列到视频文件

一个动画程序通常可以输出两种东西：一是在屏幕上实时播放，二是逐帧导出图片。如果想要 MP4 或 GIF，就需要把帧序列合成视频。最常用的工具是 FFmpeg，它可以把 PNG 序列帧转成高压缩比的视频文件，也可以直接拼接图片、添加音频、控制帧率。

bash复制ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4

这条命令的意思是：以 30 帧每秒读取 frames 目录下以 frame_0001.png 这种格式命名的图片，用 H.264 编码输出 output.mp4。它几乎是所有代码出片流程最终都会用到的一步。

3. 10 个"代码出片"案例拆解

下面这 10 个案例，覆盖了 2D 动画、3D 场景、数据可视化、数学动画、生成艺术等常见方向。每个案例都用"做什么 + 核心思路 + 为什么比视频模型稳"来描述，你可以直接当作灵感库，也可以作为给 Claude 写 prompt 时的需求模板。

3.1 粒子星云动画

• 做什么：深色背景中数千个粒子缓慢汇聚、旋转、变化颜色，常用于短视频开场或大屏背景。
• 核心思路：用 HTML Canvas + JavaScript 实现粒子系统，每帧清屏后更新粒子的位置、透明度和颜色，再用 requestAnimationFrame 驱动循环。
• 为什么稳：粒子运动是数学计算，不存在"穿帮"问题；你改一个参数，所有粒子立即按新规则运动，这是视频模型做不到的细粒度控制。

3.2 3D 建筑漫游与产品展示

• 做什么：一个 3D 场景中，镜头沿固定路径移动，呈现建筑外观或产品细节。
• 核心思路：Three.js 加载模型，设置相机动画路径，通过鼠标或自动播放控制视角；适合用 Claude 生成基础场景代码，再替换模型资源。
• 为什么稳：3D 场景是几何和光照的计算结果，可以做到任意角度任意帧的精确控制；而视频生成模型在物体旋转、遮挡关系上非常容易出错。

3.3 数学概念动画

• 做什么：把函数图像、几何变换、公式推导过程做成教学视频。
• 核心思路：Manim 专门为数学动画设计，用 Scene 描述画面对象和动作，比如 Create、Transform、FadeIn，渲染结果是程序化的视频。
• 为什么稳：数学对象随时可以调整，重新渲染脚本后输出新的动画；视频模型生成的公式、图形经常变形，完全不适合教学场景。

3.4 数据动画：从折线图到动态大屏

• 做什么：把 2024 年销售数据做成动态增长曲线，或者做一个滚动图表大屏。
• 核心思路：Python + Matplotlib 逐帧生成图表，或者用 Plotly/Pygwalker 生成交互页面，再录制为视频。
• 为什么稳：数据可视化本质是数据映射成图形，代码出片能保证每个数据点准确，而不像视频模型经常"看个大概、细看全错"。

3.5 生成艺术海报

• 做什么：用随机种子生成独一无二的图案、布局、配色，适合做系列海报和品牌视觉。
• 核心思路：p5.js 或 Processing 中定义随机规则、迭代次数、种子值，同一段程序每次运行可以生成不同作品。
• 为什么稳：程序定义的是"风格规则"而非"单张画面"；你可以批量生成几百张候选，再人工精选。视频生成模型做不到这种批量规则化产出。

3.6 节目级片头：CSS 3D 翻转与光影效果

• 做什么：文字翻转、光影扫过、景深变化，适合做栏目片头和公众号视频开头。
• 核心思路：CSS 3D 变换 + 关键帧动画，可以做出非常流畅的界面级动效；代码量小、浏览器原生渲染，加载快且不掉帧。
• 为什么稳：CSS 动画在浏览器里有 GPU 加速，效果稳定，且尺寸天然适配网页；视频模型生成带文字的片头时，字体渲染常常稳定度堪忧。

3.7 程序化流体与水波效果

• 做什么：模拟流体混合、水面波纹、熔岩流动，适合做抽象背景和音乐可视化。
• 核心思路：GLSL Shader 在 GPU 上并行计算每个像素的颜色，用噪声函数和时间变量驱动流动效果。
• 为什么稳：流体效果用像素着色器实现，画面细腻且实时互动；视频模型生成的流体通常缺少物理一致性，做不了交互响应。

3.8 逐帧动画：Python + Pillow 生成序列帧

• 做什么：用代码画一帧一帧的画面，输出 PNG 序列，再用 FFmpeg 合成视频。
• 核心思路：Python 脚本循环绘制不同时间点的图形，保存为 frame_0001.png、frame_0002.png……这是最接近传统动画制作流程的方式。
• 为什么稳：每一帧都可以单独检查、修改；渲染过程中间失败，只要改代码重新执行即可，不会像视频生成模型那样"一次失败全部重来"。

3.9 交互式"伪视频"展厅：React + Remotion

• 做什么：用 React 组件渲染视频；你既可以在浏览器中预览，也可以导出一个真正的 MP4 文件。
• 核心思路：Remotion 把视频看作一棵组件树，时间轴通过 useCurrentFrame 驱动，任何 React 技术栈的人都能上手。
• 为什么稳：视频内容就是网页组件，可以嵌入真实产品页面中，也可以复用你的前端组件体系；这在传统视频生产流程中几乎不可能。

3.10 SVG 路径动画与动效海报

• 做什么：让线条沿着路径"画"出来， logo 逐渐描边，文字逐字出现，配合渐变背景形成海报级动效。
• 核心思路：SVG 的 stroke-dasharray 和 stroke-dashoffset 控制线条进度，配合 CSS 动画或 JavaScript 驱动。
• 为什么稳：SVG 是矢量描述，放大多少都不失真；视频生成模型输出的图像本质是像素，在印刷和大屏场景下无法做到无限缩放。

4. 5 个可以直接上手的开源项目

如果你不想从零搭环境，下面这 5 个开源项目是"代码出片"领域最值得优先掌握的工具。它们能覆盖从渲染到合成的完整链路，也都有活跃社区和大量示例代码。

4.1 Manim：数学动画引擎

• 开源地址：GitHub 上的 3b1b/manim。
• 适合人群：做教程、做高中数学和大学理工科可视化内容的作者。
• 核心价值：用 Python 描述数学对象和动作，渲染出高质量教学视频；告别 PPT 动画，也告别视频模型对数学符号的胡编乱造。

4.2 Three.js：3D 可视化的标准库

• 开源地址：GitHub 上的 mrdoob/three.js。
• 适合人群：前端工程师、3D 内容创作者。
• 核心价值：WebGL 的成熟封装，支持模型导入、粒子系统、后期特效和相机动画，是浏览器端 3D"代码出片"的主力。

4.3 p5.js：创意编程入门首选

• 开源地址：GitHub 上的 processing/p5.js。
• 适合人群：设计背景转代码的创作者、艺术类课程学习者。
• 核心价值：语法简单，运行即画布，适合快速验证生成艺术、交互动画、数据可视化想法；中文资料丰富，上手成本低。

4.4 Remotion：用 React 写视频

• 开源地址：GitHub 上的 remotion-dev/remotion。
• 适合人群：React 开发者、需要程序化生成文案视频的团队。
• 核心价值：视频变成组件树，可以做数据驱动的模板化视频；适合批量生产"字幕 + 配音 + 图片 + 数据图表"类内容。

4.5 FFmpeg：开源的音视频合成工具

• 开源地址：FFmpeg 官网及其 Git 仓库。
• 适合人群：所有做代码出片的人。
• 核心价值：把 PNG 序列帧合成 MP4、GIF，裁剪拼接、加音频、调编码参数，是整个流程里最关键的后端环节。

5. 环境准备与前置条件

实操之前先准备环境。代码出片对环境要求不高，主要工具如下：

• 现代浏览器：Chrome/Edge 最新稳定版，用于运行 HTML Canvas / Three.js / p5.js 项目。
• Node.js：用于运行前端构建工具和 Remotion 项目，版本请以项目实际要求为准，本文演示不锁定版本。
• Python 3：用于运行 Manim、Pillow 等脚本，安装时勾选"Add Python to PATH"。
• FFmpeg：用于把序列帧合成为视频，Windows 用户下载后需配置系统 PATH，macOS 可用 brew install ffmpeg。

安装好之后，建议在命令行验证环境：

bash复制node -v
python3 --version
ffmpeg -version

如果三条命令都能正确输出版本信息，说明环境准备完毕。注意：不同操作系统、不同项目的依赖版本差异较大，遇到版本冲突优先看官方文档，不要盲目升级。

6. 从零跑通：让 Claude Opus 5.5 生成一个"代码出片"最小示例

下面用一个最典型的案例走完全流程：生成一个粒子星云动画，导出序列帧，合成 MP4。

6.1 给 Claude 的 Prompt 模板

想让 Claude 输出可运行代码，提示词要写清楚"画面需求 + 技术栈 + 输出形式"。可以从这个模板开始：

text复制请生成一个完整的 HTML 文件，使用 Canvas 实现粒子星云动画。
需求：
1. 背景为深蓝色渐变；
2. 粒子数量为 3000；
3. 粒子颜色从金色向紫色渐变；
4. 粒子围绕中心缓慢螺旋上升；
5. 窗口尺寸自适应；
6. 页面右下角显示当前帧数和 FPS。
要求输出完整可运行的 index.html，所有 CSS 和 JavaScript 内联。

这个 prompt 没有要求"做视频"，而是要求"做一个动画程序"——这是代码出片的关键思路。

6.2 示例一：HTML Canvas 粒子动画

以下是一个最小可运行的粒子动画示例。你可以在本地保存为 particles.html，双击用浏览器打开。

html复制<!-- 文件路径：particles.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>粒子星云</title>
  <style>
    body { margin: 0; overflow: hidden; background: #050a1f; }
    #info {
      position: fixed;
      bottom: 20px;
      right: 20px;
      color: #fff;
      font-family: monospace;
      font-size: 14px;
      background: rgba(0,0,0,0.5);
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <canvas id="c"></canvas>
  <div id="info">帧数: 0 | FPS: 0</div>
  <script>
    const canvas = document.getElementById('c');
    const ctx = canvas.getContext('2d');
    const info = document.getElementById('info');

    let width = canvas.width = window.innerWidth;
    let height = canvas.height = window.innerHeight;
    const COUNT = 3000;

    const particles = [];
    for (let i = 0; i < COUNT; i++) {
      particles.push({
        angle: Math.random() * Math.PI * 2,
        radius: Math.random() * 150,
        speed: 0.002 + Math.random() * 0.006,
        size: Math.random() * 2 + 0.5,
        offset: Math.random() * Math.PI * 2
      });
    }

    let frame = 0;
    let lastTime = performance.now();
    let fps = 0;

    function draw() {
      ctx.clearRect(0, 0, width, height);

      const grad = ctx.createLinearGradient(0, 0, 0, height);
      grad.addColorStop(0, '#050a1f');
      grad.addColorStop(1, '#0b1030');
      ctx.fillStyle = grad;
      ctx.fillRect(0, 0, width, height);

      const cx = width / 2;
      const cy = height / 2;

      for (const p of particles) {
        p.angle += p.speed;
        const x = cx + Math.cos(p.angle) * p.radius;
        const y = cy + Math.sin(p.angle) * p.radius + frame * 0.15;
        const alpha = Math.min(1, Math.max(0.1, 0.8 * Math.sin(p.offset + frame * 0.01) + 0.3));

        const t = (y - cy) / (height / 2);
        const r = 255;
        const g = Math.max(0, 220 - Math.abs(t) * 120);
        const b = Math.min(255, 100 + Math.abs(t) * 100);

        ctx.beginPath();
        ctx.arc(x, (y + height * 0.5) % height, p.size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${r},${g},${b},${alpha})`;
        ctx.fill();
      }

      frame++;
      requestAnimationFrame(draw);
    }

    function fpsTimer() {
      const now = performance.now();
      fps = 1000 / (now - lastTime);
      lastTime = now;
      info.textContent = `帧数: ${frame} | FPS: ${fps.toFixed(1)}`;
    }

    window.addEventListener('resize', () => {
      width = canvas.width = window.innerWidth;
      height = canvas.height = window.innerHeight;
    });

    setInterval(fpsTimer, 500);
    draw();
  </script>
</body>
</html>

这个代码的核心逻辑有三个关键点：

1. 粒子数据结构：每个粒子保存角度、半径、速度和旋转偏移，动画通过不断累加角度来产生旋转效果。
2. 颜色渐变：根据粒子在屏幕中的纵向位置计算 RGB 值，实现从金色到紫色的过渡。
3. 循环取模：粒子在纵向超出屏幕时通过 % height 回到顶部，形成无限上升的错觉。

运行方式：直接用浏览器打开 particles.html，你能看到粒子不断旋转上升的动画。如果一切正常，右下角会显示帧数和 FPS。

6.3 示例二：Python + Pillow 生成序列帧

如果想让粒子动画变成视频，一种做法是让 Python 逐帧画图。下面用 Pillow 生成一个简单的"呼吸圆环"动画序列帧，保存到 frames/ 目录。

python复制# 文件路径：gen_frames.py
import os
from PIL import Image, ImageDraw

frame_dir = "frames"
os.makedirs(frame_dir, exist_ok=True)

width, height = 640, 640
total_frames = 60

for i in range(total_frames):
    img = Image.new("RGB", (width, height), "#050a1f")
    draw = ImageDraw.Draw(img)

    cx, cy = width // 2, height // 2
    # 半径随时间变化，形成呼吸效果
    radius = 60 + 50 * (1 + __import__("math").sin(i * 0.2)) / 2
    color = (255, int(180 + 50 * __import__("math").sin(i * 0.3)), 120)

    draw.ellipse(
        [cx - radius, cy - radius, cx + radius, cy + radius],
        fill=color
    )

    file_name = f"{frame_dir}/frame_{i + 1:04d}.png"
    img.save(file_name)

print(f"生成 {total_frames} 帧，保存至 {frame_dir}")

运行方式：

bash复制python3 gen_frames.py

运行后，frames/ 目录下会生成 frame_0001.png 到 frame_0060.png 共 60 张图片。这个示例虽然简单，但它演示了代码出片最通用的工作流：用循环控制时间，把每一帧保存为图片。

6.4 示例三：FFmpeg 合成视频

拿到序列帧后，用 FFmpeg 合成 MP4：

bash复制ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p breathing.mp4

预期输出是一个时长 2 秒（60 帧 ÷ 30 帧/秒）的 MP4 文件，画面中央有一个颜色渐变的呼吸圆环。你也可以把 -framerate 30 改为 12 来生成 GIF 素材，或者用 -loop 1 转换为 GIF：

bash复制ffmpeg -framerate 12 -i frames/frame_%04d.png -vf "scale=320:-1" output.gif

这就是从代码到视频的完整闭环：写程序 -> 渲染帧 -> 合成视频。Claude Opus 5.5 在其中扮演的角色是帮你编写前两环的代码，你只需要确认需求、运行和调整参数。

6.5 让模型迭代优化

第一次生成的动画不一定完美。你可以继续向 Claude 提需求：

• "把粒子数量改成 5000，并降低粒子透明度。"
• "把螺旋上升改成从中心扩散的涟漪效果。"
• "额外生成一个 Python 版本，用 Pillow 输出 60 帧序列。"

这种对话式迭代，是代码出片与视频生成最大的不同：它不是给你一个新视频，而是给你一段你能看懂并继续修改的新代码。

7. 运行结果与效果验证

很多人第一次跑代码出片，卡在"不知道结果对不对"。这里给一个判断标准。

7.1 HTML 动画的验证方式

打开 particles.html 后，依次观察：

1. 页面是否出现深蓝渐变背景？
2. 粒子是否在中央区域旋转上升？
3. 右下角 FPS 是否稳定在 50 以上？
4. 浏览器 DevTools 的 Console 是否有红色报错？

如果以上都正常，说明动画程序运行成功。如果 FPS 较低，优先减少粒子数量。

7.2 Python 序列帧的验证方式

运行 gen_frames.py 后，检查 frames/ 目录下的图片数量和内容。可以用以下命令统计图片数量：

bash复制ls frames | wc -l

预期输出为 60。再随便打开一张 PNG，确认画面上有圆环图案。如果目录为空，先检查脚本的保存路径是否正确；如果图片全黑，检查导入 math 的方式和颜色参数。

7.3 FFmpeg 合成的验证方式

合成 MP4 后，用播放器打开 breathing.mp4，确认画面流畅、色彩正常。也可以用 FFmpeg 打印视频信息：

bash复制ffprobe breathing.mp4

重点看 Duration 是否为 2 秒左右，Stream 中编码是否为 h264。如果 FFmpeg 报找不到输入文件，检查 -i frames/frame_%04d.png 中的路径和文件命名是否匹配。

8. 常见问题与排查思路

其中最常见的问题是 FFmpeg 路径配置和图片命名不一致。建议从一开始就用 %04d 这种固定宽度命名。

9. 最佳实践与工程建议

代码出片不是"让 AI 生成一次代码就跑"，想真正用于生产，需要一套工程习惯。

9.1 把一个"大片"拆成多个小程序

不要试图让一个 HTML 文件完成 3 分钟的全部内容，性能会崩，迭代也会很痛苦。更合理的做法是：拆成 6 个 10 秒的片段，分别渲染，最后用 FFmpeg 拼接。每个片段是一个独立程序，可以单独修改和换版本。

bash复制ffmpeg -f concat -safe 0 -i filelist.txt -c copy final.mp4

其中 filelist.txt 按顺序列出片段文件路径。这样后续修改不会影响其他片段。

9.2 参数外部化，不要把数值写死

把粒子数量、颜色数组、旋转速度、帧率等关键参数抽取到配置对象或 JSON 文件中。这样你要调整视觉风格，只改配置，不动核心逻辑。

json复制{
  "particleCount": 3000,
  "colors": ["#ffd700", "#9b5cff"],
  "durationSeconds": 8,
  "fps": 30
}

9.3 固定随机种子

生成艺术和粒子系统经常用到随机数。为了让结果可复现、可对比，务必使用固定种子。比如在开头设置 randomSeed(42)，或者用可预测的伪随机函数。否则，你昨天喜欢的版本今天再也生成不回来了。

9.4 性能优化优先减粒子，再减绘制次数

浏览器端动画卡顿，第一步不是换电脑，而是看哪里在重复绘制。可以用离屏 Canvas 预渲染静态背景，粒子只绘制动态部分。WebGL 场景中，优先合并几何体、减少 draw call。

9.5 对 AI 生成的代码保持审查

Claude 类模型生成的代码应该当成"同事提交的 PR"来看待。它可能混入无用依赖，也可能在循环里埋下性能炸弹，极端情况下甚至会有资源消耗异常。生产环境运行前，务必在沙箱或测试目录中执行，并确认脚本只访问你允许的文件。

9.6 素材版权与合规

用真实图片、字体、模型素材做内容时，注意素材授权。代码本身虽由 AI 生成，但使用第三方资源时要保留原始版权信息。不要用未授权的商业字体或明星照片做传播素材。

9.7 记录运行环境

项目根目录放一个 requirements.txt 或 package.json，把 Python 依赖、Node 依赖锁定下来。这样换一台电脑，甚至换一个人，都能重新跑出同样的视频。

code复制# requirements.txt 示例
pillow>=9.0
numpy

10. 往深了学该看什么

如果你想把代码出片真正变成自己的核心竞争力，建议按以下顺序深入：

1. 先学渲染基础：Canvas 的 2D 绘制、坐标系、变换矩阵，这是所有浏览器端动画的基础。
2. 再学 WebGL 或 Three.js：掌握光照、相机、材质，就可以做 3D 产品展示和场景漫游。
3. 学习 GLSL Shader：程序化纹理、噪声、流体效果，是做出高级抽象视觉的关键，上手难度中等偏高，但收益很大。
4. 深入学习 FFmpeg 滤镜：调色、转场、字幕、透明通道，能让你在后期合成阶段不再依赖专业剪辑软件。
5. 数据可视化方向：如果面向业务，继续研究 ECharts、D3.js、Plotly，把代码出片和数据洞察结合起来。

代码出片不是视频生成模型的替代品，它是另一条路：一条更可控、更工程化、更像写代码而不是抽卡的道路。它的门槛不是"会不会写所有代码"，而是"愿不愿意把一个模糊的画面想法，拆成参数、规则和时间轴上的一句话"。Claude Opus 5.5 这类模型把后半段写代码的成本降了下来，你能做的，就是从其中一个粒子动画开始。

建议你别只看案例，而是把文中的粒子动画示例复制到本地跑通，再让 Claude 按你自己的想法改一点参数。跑通了第一个，后面的思路就全打开了。