📦 Html Loop Render — Html 循环渲染

HTML 循环渲染 将自包含的 HTML 动画渲染为 GIF，通过在多个时间偏移处冻结页面并使用 ffmpeg 拼接帧。 工作流程 构建或编辑自包含的 HTML 文件。 添加 references/freeze-time-pattern.md 中的 freeze-time 查询参数模式。 首先使用 headless Chrome 在一个时间戳测试静态帧。 使用 scripts/render_html_loop.sh 渲染完整的循环。 如果资产是为 LinkedIn 准备的，首选正方形布局和更平静的动作。 快速开始 首先测试一个静态帧： google-chrome --headless=new --disable-gpu \ --screenshot=/tmp/preview.png \ --window-size=1080,1080 \ "file:///absolute/path/to/animation.html?t=3" 渲染完整的 GIF： bash skills/html-loop-render/scripts/render_html_loop.sh \ /absolute/path/to/animation.html \ /absolute/path/to/output.gif \ 6 8 1080 1080 参数是： 输入 HTML 输出 GIF 持续时间（秒），默认 6 帧率，默认 12 宽度，默认 1200 高度，默认 675 LinkedIn 指南 除非用户明确要求横向布局，否则使用 1080x1080 的正方形。 首选： 一个强烈的标题 一个中央焦点元素 平衡的左右组 大文本，少量副本 慢速、明显的动作 避免： 小标签 太多同时动画元素 细低对比度线 在 GIF 中抖动的复杂背景 适合 LinkedIn 的良好渲染设置： 持续时间：4 到 6 帧率：6 到 8 大小：1080 1080 故障排除 如果 GIF 是空白或静态的： 确认 HTML 读取 ?t= 并正确暂停/寻找动画 首先使用 ?t=3 渲染静态帧 确保所有资产都是本地或嵌入的，而不是被阻塞的远程 URL 如果渲染太慢： 首先减少帧率 缩短持续时间 减少画布大小，只作为最后的手段 如果 GIF 看起来有噪音： 减少运动复杂度 增加对比度 删除细微的渐变或小文本 资源 冻结时间实现：references/freeze-time-pattern.md 渲染器脚本：scripts/render_html_loop.sh