新闻

可编辑 AI 动效：两个经过实测的工作流

制作、检查并下载一个 Canvas 循环动画和一个交互式 SVG 讲解页面。

Published · Aixio

制作可编辑 AI 动效的实用方法，是让 AI 生成一个小型浏览器项目，而不是只有扁平视频。在两个独立的 Aixio Website 工作区中，我们分别制作了 Canvas/Web Audio 氛围循环和交互式 SVG 教学页，在桌面与手机宽度检查指定时间点，并导出了源文件。两个可运行 ZIP 都可下载。

为什么使用浏览器源文件制作动效？

视频便于发布，但修改文案、时长、曲线或布局往往要重新生成。浏览器动效把这些决定保留在 HTML、CSS 和 JavaScript 中，编辑和开发人员可以直接调整，演讲者也能保留交互。

两例共用的制作约定是：原创输入、锁定文案、明确时长、播放控件、一个最难检查帧、可重复的 seek(seconds)、离线运行和源文件 ZIP。Aixio 把方案、工作文件和 Website 预览保存在同一个项目中。其他代码工作区也能实现这种技术；这里实测的是一体化制作与检查流程，而不是独家渲染器。

工作流一：Tideglass 氛围循环

受众与任务。 社交或声音编辑需要一个 24 秒方形视觉底片，并带原创程序化声音。

输入准备。 我们提供虚构的 Tideglass 名称、四个段落名和四色调色板，没有参考图或第三方音频。Canvas2D 适合连续的生成材质；Web Audio 让声音仍可编辑，也不需要外部采样许可。

提示词与执行。 初始方案锁定 1080 方形、24 秒时间线、减弱动态、可见控件、离线运行，以及 window.motionReview.seek(seconds)。代理错误启动了图像生成工具，因此我们停止该轮，并使用唯一一次纠正：只写代码，不调用媒体或搜索工具，只交付 index.html、styles.css、script.js 和 README.md。

Tideglass 的第 16 秒 Bloom 检查帧

验收与交付。 未修改的导出项目在 16.00 秒显示 BLOOM / 03，浏览器无警告和错误。在 390×844 下，文档宽度等于视口宽度，画布没有溢出。交付物是可离线运行的项目，包含源文件、检查控件、程序化音频与录制说明。

下载 Tideglass 源文件 ZIP。SHA-256 见下载校验清单。

局限。 未检查音量、逐像素循环接缝、强制减弱动态或视频导出。Aixio 组合的 about:srcdoc 预览在 DOM 元素建立前运行了外部延迟脚本；未修改的导出文件正常，嵌入预览问题仍未解决。

工作流二：交互式三次贝塞尔曲线讲解

受众与任务。 教师或开发者布道师需要一个可在演讲、文章和手机链接中使用的交互式说明。

输入准备。 我们提供原创五段课程大纲和标准三次贝塞尔公式。SVG/DOM 比 Canvas 更合适，因为控制点、标签、焦点、拖动与响应式文字都需要保持可访问、可编辑。

提示词与执行。 一个新的独立 Website 工作区收到 35 秒代码方案，包含可拖动控制点、键盘微调、构造线、切线阶段、响应式布局和同一检查 API。一次生成得到 index.html、styles.css、app.js 与 README.md。

三次贝塞尔讲解的第 21 秒切线帧

验收与交付。 未修改的导出项目在 21.00 秒显示构造线、切线、t = 0.60、B(0.60)、坐标和公式，浏览器无警告与错误。在 390×844 下，公式框和 SVG 都没有超出视口。交付物是响应式离线课程，带可编辑 SVG、确定性时间线和演讲控件。

下载贝塞尔源文件 ZIP。SHA-256 见下载校验清单。

局限。 未实测指针拖动、键盘调点、强制减弱动态或视频导出。组合预览出现相同脚本顺序问题，但导出的源文件正常渲染。

哪些变化，哪些可以复用

渲染方式随任务变化：氛围材质使用 Canvas 与 Web Audio，可访问讲解使用 SVG 与 DOM。时长、比例、最难帧和检查条件也不同。

可复用的是制作约定：准备原创输入，锁定文案和时长，暴露纯时间控制，指定最难帧，重复定位检查，检查桌面与手机，然后交付源文件 ZIP。这一方法已跨两个明显不同的方案复用，但不能证明所有模型的可靠性、一键批量或公开保存的 Skill。

费用、失败与真实范围

Tideglass 的停止尝试与纠正共 0.9805 点，贝塞尔为 29.4821 点。第二轮完成时 UI 显示 28.4688 点，延迟结算后总计 30.4626 点，比授权的 30 点上限高 0.4626 点。没有继续任何付费生成。

这是经过实测的手动配方，不是保存的 Aixio Skill 或自动管线。原计划还有第三个响应式发布故事，但在预算用尽后没有提交。两个下载是真实交付物；不存在隐藏的第三个输出或成片视频。

复用准确流程

  1. 先定义受众、最终用途、时长、比例和锁定文案。
  2. 连续材质选 Canvas；带标签几何选 SVG/DOM；以布局为主的动效选 CSS/DOM。
  3. 要求离线文件、可见播放控件、减弱动态，以及 window.motionReview.seek(seconds)。
  4. 指定最难检查时间和必须出现的元素。
  5. 原样运行导出文件，从冷启动和另一个时间点后重复定位最难帧。
  6. 检查桌面与 390px 手机宽度，再导出源文件 ZIP。

查看准确提示词与设置 · 下载工作流配方 · 在 Aixio 开始 Website 项目

还可对照我们的单图相机环绕实验。

来源

高关注灵感来自创作者的 Riso Window Seat、影片说明 与工具约定。我们改编的是确定性检查方法，不是其构图、品牌或未公开的原始提示词。Bang Motion 独立建议先写风格方案、短文案与关键帧检查；其 Skill 未在 Aixio 安装或测试。无障碍选择参考 W3C 动画说明 与减弱动态技术 C39。

常见问题

可以把这些 AI 动效导出为视频吗？

两个完成项目首先是可编辑浏览器交付物。录屏或 Canvas 流可以作为后续步骤，但本文没有实测这些视频路径，也不能用视频取代源文件 ZIP。

为什么不用一条很长的电影提示词？

方案先锁定任务、时间线、最难帧、控件和交付方式，让缺陷可观察、纠正更具体，而不是只依赖全速播放时的观感。

这是 Aixio Skill 吗？

不是。这是两个项目实测的手动配方，没有使用保存的 Skill 或自动管线，因此不宣称一键复用。