【免费下载链接】handdraw-story-videoTurn hand-drawn story illustrations into 35–45 second line-reveal and gradual-coloring videos with HyperFrames.项目地址https://gitcode.com/gh_mirrors/ha/handdraw-story-video点击查看免费下载handdraw-story-video 把 7–9 幅手绘故事图做成 35–45 秒竖屏视频黑白线稿先从左到右渐显低饱和色彩再沿同一方向渐进填色。整个效果只依赖两个技术——SVG 遮罩与 GSAP 时间轴。本文用三步完整拆解这条动画链路。 效果总览线稿渐显与渐进填色的五秒节奏先看凌晨四点的豆浆示例成片的多幕预览每幕都是从线稿到上色的同一套节奏整片默认 40 秒、720×960、30 fps切成 7–9 幕、每幕约 5 秒完整 8 幕配置可参考 examples/soy-milk-at-4am/story.json。每幕内部是严格的时间编排0.55–1.80 秒线稿从左向右扫出2.15–4.30 秒色彩从同一左侧起点继续填入4.78–5.00 秒纸白闪光 淡出切到下一幕这份每五秒镜头的节奏在 docs/story-spec.md 中有明确规范。️ 第一步从彩色母图提取像素对齐的线稿线稿被上色这个视觉错觉成立的前提是线稿和颜色绝对不能错位。所以项目定了一条铁律每幕只生成一张彩色母图线稿不单独调用生图模型而是用 scripts/make_lineart.py 从同一张图本地提取。彩色母图输入从上图提取出的对齐线稿提取算法在 make_lineart.py 中核心就三步不用任何模型暗度 × 中性度像素越暗、饱和度越低越可能是墨水彩色铅笔笔触因此被滤除极黑通道灰度极低的像素强制保留防止纯黑线条被 JPEG 色偏洗掉保留纸感背景不做纯白留一点纸纹灰度线稿叠在视频里才不突兀因为线稿和颜色出自同一批像素两层永远对齐——这是后文填色效果的地基。️ 第二步SVG 遮罩从左到右渐显的秘密scripts/build_story.py 为每幕生成一个svg内部叠放两张image底层线稿、上层彩色各自挂一个独立遮罩build_story.pymask idscene-1-line-mask rect width720 height960 fill#000/ !-- 黑底默认全部隐藏 -- rect classmask-surface line-wipe fill#fff/ !-- 白色笔刷白处才可见 -- /maskSVG 遮罩规则极简遮罩为白处图片可见为黑处隐藏。技巧在于那块白色 rect 的动画。GSAP 让它从scaleX: 0宽度缩为 0放大到 1关键是从哪条边放大由两行 CSS 决定build_story.py.mask-surface { transform-box: fill-box; } /* 以元素自身包围盒为基准 */ .line-wipe, .color-wipe { transform-origin: 0% 50%; } /* 锚点钉在左缘中点 */白色 rect 从左边缘向右刷开图像就被从左到右揭开——线稿渐显的全部机关就是这一下缩放。彩色层与线稿层机制相同但遮罩独立线稿遮罩在幕内 0.55 秒启动彩色遮罩 2.15 秒才启动。所以前 1.6 秒画面是纯线稿之后彩色层从左向右逐渐盖住线稿层由于两层像素对齐最终视觉是线稿被填色而不是两张图叠影。⏱️ 第三步用 GSAP 时间轴编排五秒节奏所有幕的动画写进同一条 GSAP 时间轴。它在 build_story.py 中被刻意创建为暂停状态const tl gsap.timeline({ paused: true });每幕的动画用start 偏移量定位在绝对时间点上幕内时点动画时长缓动0.04s整幕淡入0.16spower1.out0.08s画面 x 方向 0.8px 微漂移呼吸感贯穿全幕线性0.16s字幕逐行滑入stagger0.28s/行power2.out0.55s线稿左→右显现scaleX 0→11.25spower1.inOut2.15s颜色左→右填入scaleX 0→12.15s线性4.78s整幕淡出0.20spower1.in4.84s纸白闪光末幕除外0.09s × 2线性几个细节值得注意线稿用 power1.inOut两头快中间慢像笔锋的加速收尾更有手绘感填色用线性缓动匀速推进上色过程像稳稳的填涂而不是唰地闪出纸白闪光一块全屏白色div透明度 0→0.42→0yoyo 往返模拟翻开素描本那一闪柔化幕间切镜BGM 音量也挂在同一条时间轴上开头 0.8 秒从 0 淡入到 0.38结尾 1.2 秒淡出。所有幕的section以绝对定位叠放显隐完全由时间轴的 opacity 接管互不干扰。 暂停的时间轴如何变成视频HyperFrames 是这条流水线的渲染器它读取页面的声明式数据#root声明data-duration、data-width、data-height每幕section声明data-start起点、data-duration时长、data-track-index轨道号BGM 独占 20 号轨道GSAP 时间轴注册到window.__timelines[composition_id]后npx hyperframes render --workers 1用无头浏览器逐帧驱动时间轴到指定时间点截图最后由 FFmpeg 拼出 mp4。这种 scrub逐帧拖动方式保证帧精确成片不是录屏而是确定性渲染同一条时间轴可以反复重渲染、稳定复现。 文件地图与快速上手命令文件职责scripts/build_story.py校验 story.json生成含双 SVG 遮罩与 GSAP 时间轴的页面scripts/make_lineart.py从彩色母图本地提取像素对齐线稿scripts/one_click.py按主题一键生成 8 幕工程加--render直接出片templates/story-template.json故事配置模板幕数、字幕、裁切参数docs/story-spec.md八幕结构与每幕五秒节奏规范docs/image-generation.md生图模型接入说明docs/prompts.md固定画风提示词docs/usage.md中文使用手册examples/soy-milk-at-4am/story.json可运行的 8 幕配置示例快速体验环境要求 Python 3.10、Node.js 18、FFmpeggit clone https://gitcode.com/gh_mirrors/ha/handdraw-story-video cd handdraw-story-video pip install -r requirements.txt npm install gsappython scripts/make_lineart.py assets/images/scene-01-color.png assets/images/scene-01-line.png python scripts/build_story.py story.json hyperframes/index.html --check-assets npx hyperframes render hyperframes/index.html --output renders/story-v1.mp4 --workers 1总结动画原理的三个关键点对齐线稿由彩色母图本地提取两层像素级重合填色才有可信度遮罩SVG 遮罩的白色 rect 从scaleX: 0放大到 1transform-origin钉在左缘就得到从左到右的渐显节奏一条暂停的 GSAP 时间轴按绝对时点编排线稿、填色、字幕、闪光与音乐HyperFrames 逐帧 scrub 导出帧帧精确。理解这三点后显影时长、缓动曲线、转场闪白都可以按自己的故事任意调整。赞分享【免费下载链接】handdraw-story-videoTurn hand-drawn story illustrations into 35–45 second line-reveal and gradual-coloring videos with HyperFrames.项目地址https://gitcode.com/gh_mirrors/ha/handdraw-story-video点击查看免费下载相关推荐终极SVGR动画指南如何实现SVG渐进式颜色填充效果终极SVGR动画指南如何实现SVG渐进式颜色填充效果 SVGR是一个强大的工具能够将SVG文件转换为React组件特别适合实现SVG动画效果。如果你正在寻前端开发工具如何实现SVGR SVG填充动画7个渐进式颜色变化技巧如何实现SVGR SVG填充动画7个渐进式颜色变化技巧 SVGR是一个强大的工具能够将SVG转换为React组件为开发者提供了丰富的自定义选项。本文将分享前端开发工具Skills 仓库实战用 GSAP ScrollTrigger 实现滚动遮罩逐词渐显Masked Word RevealSkills 仓库实战用 GSAP ScrollTrigger 实现滚动遮罩逐词渐显Masked Word Reveal 本文以 Skills 仓库中 m上一篇TTFT延迟优化实战routatic-proxy多源代理的缓存命中率与Token计数缓存实现详解下一篇免费离线OCR软件Umi-OCR零成本教程告别手打截图识别、批量转文字与PDF文字提取全攻略创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考