mcpField
L
linyuebanzi-teaching-animation

linyuebanzi-teaching-animation

github.com/lqshow创意与媒体7644 次安装4 周前更新
代码仓库

关于 linyuebanzi-teaching-animation

该 Skill 按概念和学段规划教学动画，并用 HyperFrames 从同一份 index.html 渲染配音视频与无声循环 MP4。适合制作中文教学内容的创作者。

主要功能

  1. 01共用模板生成两种视频模式
  2. 02按七段结构编写分镜
  3. 03生成中文旁白与字幕
  4. 04同步配音与时间轴
  5. 05检查对比度并渲染

适用场景

  1. 01制作带旁白的教学讲解视频
  2. 02制作公众号内嵌的无声循环 MP4
  3. 03从同一内容同时导出两种版本

安装

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

$npx skills add https://github.com/lqshow/linyuebanzi-skills --skill linyuebanzi-teaching-animation

安装后在 Claude Code 中输入/linyuebanzi-teaching-animation确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

openai.yaml
assets/video-template/
index.html
examples/general-horse-video/
index.html
storyboard.json
examples/general-horse-video/audio/
durations.json
examples/sound-video/
index.html
storyboard.json
examples/sound-video/audio/
durations.json
references/
color-palettes.md
storyboard-guide.md
svg-parts.md
video-authoring.md
scripts/
build_silent.sh
build_video.sh
minimax_tts.py
scaffold_video.py
sync_timeline.py

详细介绍

来自项目 README

Teaching Animation (配音教学视频 + 无声循环动图)

概述

输入一个概念 (例 "声现象") → 两种动态产出,都是 HyperFrames 渲染的 MP4,共用同一个 index.html:

产出规格用途
配音视频1080p、~90s、中文旁白 + 字幕完整讲解,发视频号 / 给孩子看
无声动图1080p、~32s、无声、循环公众号正文内嵌自动播放

关键: 两种产出共用同一个 index.html,靠 HyperFrames 变量 mode(video/silent)切换—— 搭一次内容,两种都能出。silent 模式紧凑时间轴、无字幕、不淡出(循环无缝),质感和动效 与视频版完全一致。

共用: 7 段结构 (1 标题 + 5 子概念 + 1 总结)、同一套主题配色 (references/color-palettes.md)、同一份分镜脚本 (references/storyboard-guide.md)。

触发路由

用户说做什么
"教学视频" / "配音" / "讲解版"搭 index.html → build_video.sh
"教学动图" / "无声" / "循环" / "公众号内嵌"搭 index.html → build_silent.sh
"视频和动图都要"搭一次 index.html,两个脚本都跑

不确定时, 先问清楚概念 + 适用学段 (默认初二物理), 其他别问。

统一流程 (两种产出共用前 4 步)

# 第 0 步: 写分镜 (见 references/storyboard-guide.md)
#   把概念拆成 7 段, 写 storyboard.json: 每段 title / narration (旁白 30-50 字, 口语化,
#   不读公式) / visual (画面描述) / transition。配色按主题族选 (color-palettes.md)。
#   拆解质量决定一切 — 对照教材知识点, 参考 examples/sound-video/storyboard.json。

# 1. TTS 配音 (需要 MINIMAX_API_KEY; 无 key 时 --provider say 走通预览)
export MINIMAX_API_KEY=...            # 可选: MINIMAX_GROUP_ID / MINIMAX_API_HOST / MINIMAX_TTS_MODEL
python3 scripts/minimax_tts.py storyboard.json --outdir audio/
#   → audio/seg-0N.mp3 + audio/durations.json (时间轴来源, 无声版也需要它做骨架)

# 2. 生成骨架 (时间轴/配色/audio/SEGMENTS/silent机制 全部自动填好, 不要手搭)
python3 scripts/scaffold_video.py <project_dir>

# 3. 填场景内容: s2-s6 的 SVG 示意图 (零件拷 references/svg-parts.md) + 卡片文案
#    + scene2()-scene6() 入场编排。规则见 references/video-authoring.md

# 4. 出片 (二选一或都要):
bash scripts/build_video.sh  <project_dir>   # → 配音视频  renders/<name>.mp4
bash scripts/build_silent.sh <project_dir>   # → 无声动图  renders/<name>-silent.mp4

build_video.sh: lint + WCAG 对比度审计 + render(video 模式) + 场景中点蒙太奇。 build_silent.sh: 临时改 data-duration + render(silent 模式,紧凑 32s 无声) + 蒙太奇。 两个脚本读同一个 index.html,只是渲染的 mode 变量不同。

换音色/改旁白后重跑 TTS,用 python3 scripts/sync_timeline.py <project_dir> 同步 时间轴 (不要手抄数字),再重新渲染。

场景内容标准: section-chip + SVG 示意图 (≥3 图形元素) + info-card + callout。 视频尺寸规范、SVG 画法、动效编排、silent 机制、实测 lint 坑都在 references/video-authoring.md。

环境: Node.js ≥22 + ffmpeg (npx hyperframes doctor 自检); Minimax TTS 走 HTTP API, 无额外 Python 依赖。

silent(无声)模式怎么工作

index.html 的 <html> 声明 mode 变量。渲染时 --variables '{"mode":"silent"}' 切到无声版:

  • 时间轴: 每段等长紧凑 (SILENT_SEG=4.6s, 共 ~32s), 不依赖音频长度
  • 无字幕: MODE !== "silent" 才生成字幕
  • 不淡出: 最后一段不淡出到底, 循环首尾无缝
  • 质感动效全保留: 渐变/颗粒/波形流动都在 (MP4 有帧间压缩, 不像 GIF 怕连续色调和运动)

为什么不出 GIF? GIF 无帧间压缩, 完整 7 段想要 720p 高清必然 >2MB (实测), 只能降到 480p 且小字发糊。公众号早已支持内嵌 MP4 自动播放, 无声 MP4 = 1080p 完整 + 8~10MB, 比任何 GIF 都清晰。所以动图产出用无声 MP4, 不用 GIF。

输出文件规范

<topic>/
├── storyboard.json           # 分镜 (第 0 步)
├── audio/
│   ├── seg-01..07.mp3         # TTS 分段配音
│   └── durations.json         # 时间轴来源
├── index.html                # HyperFrames 组合 (video/silent 双模式)
├── renders/
│   ├── <topic>.mp4            # 配音视频 (~90s)
│   └── <topic>-silent.mp4     # 无声循环动图 (~32s)
└── preview/
    ├── montage.png            # 配音视频蒙太奇
    └── montage-silent.png     # 无声动图蒙太奇

资源

  • assets/video-template/index.html — HyperFrames 模板 (组件 + video/silent 双模式 + 转场/字幕/波形引擎)
  • examples/sound-video/ — 声现象完整示例 (storyboard → 音频 → index.html → 配音视频 + 无声动图)
  • scripts/minimax_tts.py — Minimax 分段配音 + 时间轴
  • scripts/scaffold_video.py — 骨架生成 (第 2 步, 含 silent 机制)
  • scripts/sync_timeline.py — 重配音后同步时间轴
  • scripts/build_video.sh — 配音视频渲染 (lint + validate + render + 蒙太奇)
  • scripts/build_silent.sh — 无声循环动图渲染 (silent 模式)
  • references/storyboard-guide.md — 分镜拆解 + 旁白规范 (第 0 步必读)
  • references/video-authoring.md — 场景编写硬规则 + silent 机制 + 实测坑 (必读)
  • references/svg-parts.md — SVG 符号库 (电学/波形/图线/力学/光学, 画示意图先来这拷)
  • references/color-palettes.md — 7 套主题调色板 (60-30-10 + 莫兰迪, 含 CSS 变量)

评论

支持 Markdown