492 个可调可导出的 Canvas 动效 —— 从挑到调，再到真正落地
这份教程解决两个问题：怎么用（三分钟上手），以及最容易踩坑的那个——怎么把一个动效变成"我自己的"东西。 先说结论：AI 提示词不可能保证"复制粘贴就一模一样"，真正能做到 100% 一致的是源码通道。下面会讲清楚三种方式的区别，你对号入座即可。
点右上角 动效库（或按 B）。顶部一排是分类快捷筛选，点一下即筛；往下是卡片墙，鼠标悬停卡片会实时预览。也可以用顶部搜索框直接搜关键词（如 标题、粒子、K线）。找到喜欢的，点卡片进入工作台。
右侧 参数 面板改文案、颜色、速度、数量……每改一处画面立刻刷新。想换整体气质就去 配色背景：一键换主题预设，或拖动 随机种子 —— 同一个动效换个种子就是另一种形态，但拖动时间轴画面不会乱跳。
右侧 导出 面板：剪进视频用 MP4、公众号/小红书用 GIF、做封面用 PNG、嵌网站用 单文件 HTML / React 组件 / iframe。想串成一条片，就点 + 加入当前动效 组成场景序列，再整条录制。
很多人第一反应是"把那段提示词复制给 AI，就能做出一样的"——这条路走不通。原因很简单：动效真正的样子来自 draw() 函数里几百行数学计算（噪声、缓动曲线、确定性随机种子、线条抖动参数）。提示词只是描述，AI 会用自己的方式重写一遍，细节必然不同：同样的"流星雨"，AI 写出来的粒子数量、拖尾长度、随机分布都不一样。想一致，只有把实现本身拿走。
导出 → 复制 draw 源码（只拿绘制函数）或 复制单文件 HTML 源码（连运行时一起）100%参数 面板底部 → 选 源码版 → 复制移植提示词≈100%提示词里会附带本站已验证的完整实现代码，并明确要求 AI 原样移植、不要重写。适合：让 AI 帮你把它接进自己的项目、改成模块、换画布尺寸。
draw() 实现一致度：≈100%（AI 只做适配，不改逻辑）
只给文字描述 + 风格标签。适合：你只有个模糊想法，想让 AI 自由发挥一个同风格的东西。
一致度：接近（细节由模型决定）
给参数 + 渲染循环骨架，让 AI 填实现。适合：你要一段结构规范、能直接跑的代码起点。
一致度：中等（结构一致，画面靠 AI）
适合你已经有自己的 Canvas 项目。点 导出 → 复制 draw 源码，拿到的是：
const PARAMS = {...} —— 当前所有参数的取值const draw = function (ctx, t, P, U) {...} —— 完整绘制函数自己项目里的调用方式：
ctx.save(); draw(ctx, t, PARAMS, U); ctx.restore();点 导出 → 复制单文件 HTML 源码（或 单文件 HTML 下载）。得到的是一个自包含网页：内联运行时 + 该动效源码 + 当前参数。粘贴保存成 .html 双击就播，效果与工作台里 100% 一致，无需任何依赖。想嵌到网站就放进 iframe 或直接当页面。
复制 React 组件：粘进 React 项目即可用，无第三方依赖。复制嵌入代码：一行 iframe，适合快速挂到任意页面。+ 加入当前动效，它会作为一段进入序列。播放全序列 预览整条片；确认后到 导出 面板点 录制裁剪好的整条序列，直接导出一条 MP4。因为提示词是描述不是代码。动效的真实形态藏在几百行绘制逻辑里（粒子分布、噪声频率、缓动曲线、抖动幅度），AI 会按自己的理解重写。要一致请走源码通道：导出 → 复制 draw 源码。如果你是要让 AI 帮你改造（而不是复刻），用源码版提示词，它会带上完整实现并要求 AI 只做移植。
到 导出 面板调整 GIF 宽度与帧率：宽度 640 + 12fps 是清晰度与体积的平衡点；只做表情包或小图可降到 480/8fps。追求画质请改用 MP4。
MP4 录制依赖浏览器的 H.264 编码能力（Chrome / Edge / Safari 支持较好）。若浏览器不支持会自动回退 WebM。建议用最新版 Chrome 录制；WebM 可直接上传视频号或在剪映里转码。
直接把这个网址发给他即可，无需登录。想让他打开就看到你调好的某个动效，点 分享链接，链接里带着完整参数，对方打开就是同一个画面。
本工作台动效为原创实现，导出的源码/视频/GIF 可直接用于你的项目与商业内容。建议按平台要求自行标注素材来源。
小技巧：选中任意动效后，直接复制浏览器地址栏链接发给朋友，对方打开就是同一个动效（#e=动效id 深链）。
写口播稿的看这里：舞台上方点「口播稿推荐」，把整段文稿粘贴进去，会按叙事节奏（开场 → 要点 → 收尾）自动推荐合适的动效卡片，点卡片直接预览、点「+ 序列」累积、或「一键生成序列」快速成片。