AIBit-探索开源项目 AIBit-探索开源项目

使用 HyperFrames 将手绘故事插图转化为 35–45 秒线条揭示视频

了解如何使用 HyperFrames 将 7–9 张手绘故事插图转化为 35–45 秒的竖版视频，实现线条揭示和渐变着色效果。

简介

从手绘插图制作引人入胜的短视频可能是一个繁琐的过程，尤其是当您想要实现精致的线条揭示和渐变着色效果时。开源项目 handdraw-story-video（由 xiejunjie524 开发）简化了这一工作流程，让您能够将 7–9 张手绘故事插图转化为 35–45 秒的竖版视频，实现从左到右平滑的线条揭示，随后是渐变的颜色填充。

该工具基于 HyperFrames 构建，HyperFrames 是一个用于生成逐帧动画的框架，并使用 GSAP 进行动画控制。它专为希望自动化手绘故事视频制作流程的开发者和内容创作者设计。

主要特性

  • 默认输出：40 秒，720×960 分辨率，30 fps——针对 TikTok、Instagram Reels 和 YouTube Shorts 等竖版平台优化。
  • 单源图像：每个场景使用一张独立的彩色插图。该工具会在本地提取完美对齐的线稿版本。
  • 一致的动画方向：线稿和颜色填充均从左到右进行，避免重复调用图像生成模型。
  • 可选字幕：支持故事字幕和场景内文字元素。
  • 自动验证：检查时长、重复素材、字幕行数和字号范围。
  • 无供应商锁定：不绑定任何特定的图像生成服务、音乐来源或私有 API。

前提条件

在开始之前，请确保已安装以下内容：

  • Python 3.10+
  • Node.js 18+
  • FFmpeg
  • HyperFrames
  • GSAP 3（通过 npm 安装，需遵守其许可证）

快速开始

1. 克隆仓库

git clone https://github.com/xiejunjie524/handdraw-story-video.git
cd handdraw-story-video

2. 设置虚拟环境

python -m venv .venv
# 在 Windows 上：
.venv\Scripts\activate
# 在 macOS/Linux 上：
source .venv/bin/activate

3. 安装依赖

pip install -r requirements.txt
npm install gsap

4. 创建故事配置

复制模板并填写您的故事详情：

cp templates/story-template.json story.json

5. 准备您的插图

对于每个场景，您需要一张 1K 彩色插图。然后提取线稿：

python scripts/make_lineart.py assets/images/scene-01-color.png assets/images/scene-01-line.png

6. 设置 HyperFrames 和 GSAP

mkdir -p hyperframes/assets/vendor
cp node_modules/gsap/dist/gsap.min.js hyperframes/assets/vendor/gsap.min.js

对于 Windows PowerShell：

New-Item -ItemType Directory -Force hyperframes/assets/vendor | Out-Null
Copy-Item node_modules/gsap/dist/gsap.min.js hyperframes/assets/vendor/gsap.min.js

7. 生成视频

将您的图像和背景音乐（需拥有适当授权）放置在 hyperframes/assets/ 中，确保路径与您的 story.json 匹配，然后运行：

python scripts/build_story.py story.json hyperframes/index.html --check-assets
npx hyperframes check hyperframes/index.html --json
npx hyperframes render hyperframes/index.html --output renders/story-v1.mp4 --workers 1

重要提示：不要覆盖旧的渲染文件；每次使用新的输出文件名。

故事配置

一个最小的场景配置如下所示：

{
  "id": "scene-1",
  "duration": 5,
  "caption_lines": ["凌晨四点，", "他总会经过那家早餐店。"],
  "line_image": "assets/images/scene-01-line.png",
  "color_image": "assets/images/scene-01-color.png",
  "crop": {"scale": 1, "x": 0, "y": 0}
}

有关完整的字段参考和分镜规则，请参阅 docs/story-spec.md。可运行的示例位于 examples/soy-milk-at-4am/story.json。

场景构图指南

为获得最佳视觉效果，请遵循以下指南：

  • 场景数量：8 个场景，每个约 5 秒。每个场景必须具有独特的构图——不要依赖裁剪或缩放来填充时间。
  • 主体放置：主要主体应位于画面的下方 45%–55% 区域，留出充足的空白空间（类似纸张的背景）。
  • 复杂度：每帧最多 2–3 个角色，并有两个关键背景锚点。避免人群、密集建筑或大块黑色线条。
  • 字幕：最多 3 行，每行不超过约 18 个中文字符。
  • 音乐：选择适合故事的音乐；不要将特定的 BGM 硬编码到模板中。

Codex 技能集成

仓库根目录结构为一个 Codex 技能。您可以将其复制或链接到 $CODEX_HOME/skills/handdraw-good-deed-story，然后通过提示词（如“创建一个 40 秒的暖心故事，包含线条揭示和渐变着色”）触发它。

许可与归属

  • 代码：根据 MIT 许可证发布。
  • 第三方素材：生成的图像、字体、GSAP、音乐和其他第三方材料不自动受 MIT 许可证覆盖。您必须遵守其各自的许可证和条款。
  • 不含机密信息：仓库中不包含 API 密钥、浏览器会话、参考视频、下载的音乐或完整的渲染历史。

结论

handdraw-story-video 项目提供了一个精简的开源流程，用于创建引人入胜的手绘故事视频。通过自动化线稿提取、动画方向和验证，它节省了大量时间和精力。无论您是希望将此集成到更大工作流程中的开发者，还是希望制作一致、高质量视频的内容创作者，该工具都是一个坚实的基础。

从克隆仓库、准备插图并遵循快速开始指南开始。通过一些配置，您可以将手绘故事转化为精美的短视频，随时可在社交媒体上分享。

来源

xiejunjie524/handdraw-story-video: 使用 HyperFrames 将手绘故事插图转化为 35–45 秒线条揭示和渐变着色视频。