HyperFrames FrameAdapter接口指南如何为自定义动画写帧适配器【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames 是一个「写 HTML、渲染视频」的开源框架其 FrameAdapter帧适配器接口正是把自定义动画接入渲染管线的扩展点。本指南带你理解帧适配器的工作原理与确定性契约学会为自定义动画编写帧适配器。帧适配器解决什么问题 帧适配器只回答一个问题第 N 帧时动画应该处于什么状态绝大多数创作者不需要亲自实现它——HyperFrames 的浏览器运行时已经能直接 seek定位GSAP、CSS、Anime.js、Lottie、Three.js、Web Animations 等常见动画。只有当你围绕一个可 seek 的自研动画对象构建宿主时才需要实现FrameAdapter。下图就是这类渲染动画中的一帧画面帧适配器要做的就是让这样的画面在任意帧号下都精确可复现渲染器如何逐帧取图init → seekFrame → destroy渲染从不播放动画而是要一帧 → 等待适配器落定 → 抓取像素 → 再要下一帧。生命周期严格遵循init(context)拿到底层上下文合成 ID、帧率、宽高、可选根元素getDurationFrames()告知总帧数seekFrame(frame)任意顺序、任意方向重复 seek每次必须落定在该帧的精确状态destroy()释放监听器与资源。同一个帧号反复请求必须得到同一状态——这正是「相同输入、相同像素」的确定性保证的来源。FrameAdapter 接口最小结构接口定义在 core 包中类型从hyperframes/core导出type FrameAdapter { id: string; // 唯一标识 init?: (ctx: FrameAdapterContext) void; // 可选初始化 getDurationFrames: () number; // 总帧数 seekFrame: (frame: number) void; // 定位到第 frame 帧 destroy?: () void; // 可选清理资源 };FrameAdapterContext包含合成 ID、fps、宽高和可选的 rootElement。完整类型见源码packages/core/src/adapters/types.ts。最快上手用官方 GSAP 辅助函数如果你的动画是 GSAP或类似时间轴hyperframes/core提供了现成的createGSAPFrameAdapter传入时间轴和帧率即可它会在init时暂停时间轴用totalDuration含 repeat/yoyo推导总时长并向上取整为帧数把每次帧请求换算成秒第90帧 30fps 3.0秒并自动把负数/非法帧号钳制为 0。import { createGSAPFrameAdapter } from hyperframes/core; const adapter createGSAPFrameAdapter({ id: intro, fps: 30, timeline, }); await adapter.init?.({ compositionId: intro, fps: 30, width: 1920, height: 1080, }); await adapter.seekFrame(90); // 定位到 3 秒处实现细节可参考packages/core/src/adapters/gsap.ts及其测试packages/core/src/adapters/gsap.test.ts。确定性契约自定义适配器必须遵守的 6 条规则 ✅无论底层动画引擎是什么你的适配器必须返回有限、非负的帧数支持前进、后退与随机seek同一帧号再次请求返回相同状态避免墙钟定时器Date.now()与未播种的随机数在帧被捕获之前完成所有异步工作在destroy()中释放监听器与资源。注意分工宿主负责抓帧与编码管线适配器只负责动画状态。更多规则细节见文档docs/concepts/determinism.mdx与docs/concepts/frame-adapters.mdx。小结 帧适配器 「第 N 帧该长什么样」的可 seek 答案常规创作者直接用内置运行时即可只有自研动画宿主才需实现接口记住init → seekFrame(任意顺序) → destroy生命周期与确定性六条你的适配器就能安全接入渲染管线。FrameAdapter目前是实验性 v0 API签名可能在 v1 前调整生产使用前请关注版本变更。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames FrameAdapter接口指南：如何为自定义动画写帧适配器
HyperFrames FrameAdapter接口指南如何为自定义动画写帧适配器【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames 是一个「写 HTML、渲染视频」的开源框架其 FrameAdapter帧适配器接口正是把自定义动画接入渲染管线的扩展点。本指南带你理解帧适配器的工作原理与确定性契约学会为自定义动画编写帧适配器。帧适配器解决什么问题 帧适配器只回答一个问题第 N 帧时动画应该处于什么状态绝大多数创作者不需要亲自实现它——HyperFrames 的浏览器运行时已经能直接 seek定位GSAP、CSS、Anime.js、Lottie、Three.js、Web Animations 等常见动画。只有当你围绕一个可 seek 的自研动画对象构建宿主时才需要实现FrameAdapter。下图就是这类渲染动画中的一帧画面帧适配器要做的就是让这样的画面在任意帧号下都精确可复现渲染器如何逐帧取图init → seekFrame → destroy渲染从不播放动画而是要一帧 → 等待适配器落定 → 抓取像素 → 再要下一帧。生命周期严格遵循init(context)拿到底层上下文合成 ID、帧率、宽高、可选根元素getDurationFrames()告知总帧数seekFrame(frame)任意顺序、任意方向重复 seek每次必须落定在该帧的精确状态destroy()释放监听器与资源。同一个帧号反复请求必须得到同一状态——这正是「相同输入、相同像素」的确定性保证的来源。FrameAdapter 接口最小结构接口定义在 core 包中类型从hyperframes/core导出type FrameAdapter { id: string; // 唯一标识 init?: (ctx: FrameAdapterContext) void; // 可选初始化 getDurationFrames: () number; // 总帧数 seekFrame: (frame: number) void; // 定位到第 frame 帧 destroy?: () void; // 可选清理资源 };FrameAdapterContext包含合成 ID、fps、宽高和可选的 rootElement。完整类型见源码packages/core/src/adapters/types.ts。最快上手用官方 GSAP 辅助函数如果你的动画是 GSAP或类似时间轴hyperframes/core提供了现成的createGSAPFrameAdapter传入时间轴和帧率即可它会在init时暂停时间轴用totalDuration含 repeat/yoyo推导总时长并向上取整为帧数把每次帧请求换算成秒第90帧 30fps 3.0秒并自动把负数/非法帧号钳制为 0。import { createGSAPFrameAdapter } from hyperframes/core; const adapter createGSAPFrameAdapter({ id: intro, fps: 30, timeline, }); await adapter.init?.({ compositionId: intro, fps: 30, width: 1920, height: 1080, }); await adapter.seekFrame(90); // 定位到 3 秒处实现细节可参考packages/core/src/adapters/gsap.ts及其测试packages/core/src/adapters/gsap.test.ts。确定性契约自定义适配器必须遵守的 6 条规则 ✅无论底层动画引擎是什么你的适配器必须返回有限、非负的帧数支持前进、后退与随机seek同一帧号再次请求返回相同状态避免墙钟定时器Date.now()与未播种的随机数在帧被捕获之前完成所有异步工作在destroy()中释放监听器与资源。注意分工宿主负责抓帧与编码管线适配器只负责动画状态。更多规则细节见文档docs/concepts/determinism.mdx与docs/concepts/frame-adapters.mdx。小结 帧适配器 「第 N 帧该长什么样」的可 seek 答案常规创作者直接用内置运行时即可只有自研动画宿主才需实现接口记住init → seekFrame(任意顺序) → destroy生命周期与确定性六条你的适配器就能安全接入渲染管线。FrameAdapter目前是实验性 v0 API签名可能在 v1 前调整生产使用前请关注版本变更。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考