mcpField
A
animated-video

animated-video

github.com/bluzir创意与媒体107114 次安装27 周前更新
代码仓库

关于 animated-video

animated-video 是帮助创作者制作动画视频的技能，按需求选择单文件 HTML 动画或 Remotion 项目。它涵盖动画编排、预览和成片导出流程。

主要功能

  1. 01按复杂度选择制作路径
  2. 02HTML 动画时间轴与精灵编排
  3. 03缓动与属性插值
  4. 04预览、播放和定位
  5. 05Remotion 多场景与 MP4 导出

适用场景

  1. 01制作产品介绍或解说动画
  2. 02在浏览器中预览单场景动画
  3. 03制作多场景叙事视频
  4. 04需要 MP4 或精确帧时序时制作视频

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/bluzir/claude-code-design --skill animated-video

安装后在 Claude Code 中输入/animated-video确认已加载。

详细介绍

动画视频

根据复杂程度选择两种路径。先决定，并告知用户你选择的路径。

阶段 0 — 上下文预检（自动检测，最多问一个问题）

在决定选择路径 A 还是 B 之前，静默检查上下文：

  1. 如果存在，Read .claude/design-tokens.json
  2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — 匹配品牌文件夹
  3. Glob 代码库令牌
  4. 检查需求说明中是否有 github / Figma / 图片 / PRD 附件 → 调用相应的内容导入技能

如果没有找到任何内容 — 使用一次 AskUserQuestion：设计系统 / 代码库 / 截图 / Figma / 无 / 由你决定。报告“使用 。继续。”

路径 A — 使用 Stage/Sprite 的独立 HTML

适用于可放在单个 HTML 文件中的任何动画（解说短片、产品介绍、转场序列、主视觉动画 — 通常少于 60s）。

使用 starters/animations.jsx 中与 Remotion 兼容的浏览器内引擎。采用与 Remotion 相同的思维模型 — 但运行时不同（无需构建步骤，在 Babel standalone 下运行）。

可用原语：

原语作用
<Stage duration width height [id] [loop] [showControls]>根合成。拥有一个 RAF 时钟、适应画布尺寸的缩放、拖动条 UI、播放/暂停功能。读取/写入 localStorage 中的位置。
<Sprite start end [easing]>仅在 [start..end]ms 时间窗口内激活。子项可以是元素或 (localT) => element。超出范围时卸载。
useTime({ stopAt? })返回当前毫秒数。在 Stage 内：读取共享时钟（无需额外开销）。单独使用：创建自己的 RAF（开销更大）。
useSprite()返回当前 Sprite 中的局部 t ∈ [0,1]。
Easinglinear、inQuad、outQuad、inOutCubic、outQuart、inOutExpo、spring(stiffness, damping)
interpolate(t, [in], [out], { clamp?, easing? })分段线性插值。支持数字和十六进制颜色。
<FadeIn>、<FadeOut>、<SlideIn from=...>、<ScaleIn from=...>、<Reveal from=...>入场/退场语法糖。动画窗口结束后仍会保留（不同于 Sprite）。
<Transition from to duration>独立的一次性包装器（无需 Stage）。

步骤：

  1. 调用 Skill: frontend-design 获取美学方向
  2. 创建 artifacts/<slug>.html，使用 React + Babel + animations.jsx
  3. Bash(cp starters/animations.jsx "$(dirname <html>)/") — 将启动文件复制到 HTML 同目录下
  4. 运行 /serve（外部 .jsx 需要此步骤以避免 CORS 问题）
  5. 组合场景。模式：
function Scene() {
  const t = useTime();  // Stage-shared clock
  // drive properties via interpolate()
  const bg = interpolate(t, [0, 2000, 5000], ['#fef9f3', '#f3d8a8', '#8a5a22'], { easing: Easing.inOutCubic });
  return (
    <div style={{ position: 'absolute', inset: 0, background: bg }}>
      <FadeIn start={0} duration={500}>
        <h1>Entry stays visible after 500ms</h1>
      </FadeIn>
      <Reveal start={400} duration={700} from="bottom" distance={40}>
        <p>Fade + slide combo</p>
      </Reveal>
      <Sprite start={1500} end={3500} easing={Easing.outQuart}>
        {(local) => <div style={{ opacity: local, transform: `scale(${local})` }}>Bounded — disappears after 3500</div>}
      </Sprite>
    </div>
  );
}

function App() {
  return <Stage duration={5000} width={1920} height={1080} loop={false}><Scene/></Stage>;
}
  1. /done http://127.0.0.1:4567/artifacts/<slug>.html — 验证拖动条正常工作、动画流畅播放、控制台无错误
  2. 导出帧/在 PPTX 中定位：外部工具可以发送 window.postMessage({ seekMs: N, playing: false }, '*') — Stage 会监听并跳转到指定位置

路径 B — Remotion（导出 MP4、多场景视频）

适用于长视频（>60s）、多场景叙事或需要导出 MP4 的情况。

  1. 委派给 Skill: remotion-best-practices — 按照完整的 Remotion 工作流执行
  2. 将 artifacts/<slug>-remotion/ 设置为独立的 Remotion 项目
  3. 完成后提供预览 HTML 和 MP4 文件

如何选择

需求路径
单场景，任意时长A
产品介绍、时长不到一分钟的解说视频A
多场景叙事B
需要导出 MP4B
仅浏览器预览（交付 HTML）A
精确的帧时序（例如 30fps 视频）B（Remotion 基于帧）
物理效果 / 手势驱动A，搭配 Popmotion <script src> 后备方案，或选择 B

Popmotion 后备方案

对于真实弹簧物理效果、关键帧数学或超出 Easing.spring() 支持范围的手势跟踪，添加：

<script src="https://unpkg.com/[email protected]/dist/popmotion.min.js"></script>

并直接使用 window.popmotion。

验证

路径 A：/done <url> — 拖动条可以到达末尾，点击进度条可跳转，播放/暂停可切换，控制台无错误。如果用户需要此动画的 PPTX 帧：每次截图前通过 postMessage 定位。

路径 B：Remotion 预览服务运行在 localhost:3000，并导出 MP4。

评论

支持 Markdown