@hyperframes /核心
用于超帧视频框架的类型、解析器、生成器、编译器、筛选器、运行时和帧适配器。
安装
npm install @hyperframes/core
里面有什么
| 模块 | 描述 |
|---|---|
| 类型 | TimelineElement， CompositionSpec， Asset，画布尺寸，默认值 |
| 解析器 | parseHtml -从HTML中提取时间轴元素； parseGsapScript -解析GSAP动画 |
| 发电机 | generateHyperframesHtml -从组合规范中生成有效的超框架HTML |
| 编译器 | compileTimingAttrs ——解决 data-start / data-duration 变成绝对时间 |
| 剥绒机 | lintHyperframeHtml -验证超帧HTML（缺少属性，重叠轨道等） |
| 运行时 | IIFE脚本注入到浏览器-管理查找，媒体播放，和 window.__hf 协议 |
| 帧适配器 | 可插入的动画驱动程序（GSAP、Lottie、CSS或自定义） |
生成的组合信任
组合生成器需要受信任的作者提供承载代码的输入。 styles 和
generateHyperframesStyles 保留可加载外部资源的编写CSS。
animations 可能包含 __raw: 作为JavaScript发出的值；
includeScripts: true 包括可执行的时间线代码。 serializeGsapAnimations
也接受raw preamble， postamble，以及密码方位 timelineVar。永远不要把
这些输入包含不可信的数据。属性编码和结束标记包含
不是沙盒；以适当隔离的方式呈现不可信的组合
执行环境，永远不要在特权源上为它们提供服务。
文本内容保留支持的内联格式清理程序契约。的剪辑 Parser有意将内部格式扁平化为文本，因此parse/generate不会 编辑源HTML的无损替代品。
帧适配器
帧适配器告诉引擎如何将你的动画寻找到一个特定的帧：
import { createGSAPFrameAdapter } from "@hyperframes/core";
const adapter = createGSAPFrameAdapter({
getTimeline: () => gsap.timeline(),
compositionId: "my-video",
});
实现 FrameAdapter 对于自定义动画运行时：
import type { FrameAdapter } from "@hyperframes/core";
const myAdapter: FrameAdapter = {
id: "my-adapter",
getDurationFrames: () => 300,
seekFrame: (frame) => {
/* seek your animation */
},
};
解析和生成HTML
import { parseHtml, generateHyperframesHtml } from "@hyperframes/core";
const { elements, metadata } = parseHtml(htmlString);
const html = generateHyperframesHtml(spec);
产品毛羽
import { lintHyperframeHtml } from "@hyperframes/core/lint";
const result = lintHyperframeHtml(htmlString);
// result.findings: { severity, message, elementId }[]
文档
完整的文档: hyperframes.heygen.com/packages/core
相关的包
@hyperframes/engine-驱动浏览器的渲染引擎@hyperframes/producer-完整的渲染管道（捕获+编码）hyperframes- - - - - - CLI