HyperFrames halftone-dissolve 组件基于种子阈值场的点阵溶解转场原理与实战【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames 是Write HTML, Render video的开放视频框架它的 registry 中收录了大量可复用的 HTML 视频组件而halftone-dissolve正是其中一款面向转场/纹理场景的过渡图元场景 A 通过一个不断扩张的半调halftone点阵溶解进场景 B网点以最小优先的顺序在固定错排网格上以强调色弹出随后每个网点开启一扇通向 B 的圆形窗口直至窗口合并、B 完全取代 A。读完本文你将掌握该组件的安装、双场景插槽装配、五个配置变量的取值语义以及它如何借助固定种子 LCG 阈值表和单一进度补间实现逐帧可复现的确定性渲染。核心文档位于 registry/components/halftone-dissolve/README.md完整实现见同目录下的 halftone-dissolve.html本文结合源码逐行展开。效果与设计目标从视觉呈现来看这一转场是一个墨水扩散过程网点先以强调色accent ink出现在固定网格格点上按阈值顺序最小优先生长每个墨点领先一拍地开启一扇窗口露出其后的场景 B——即每个格点先闪现强调色再被 B 填满窗口最终合并覆盖全屏clip-path释放B 完全静止展示。每个网点的半径是**网格位置, 进度 p的纯函数**由种子阈值表seeded threshold map驱动方向枚举direction决定阈值的读取顺序。该组件默认内置 3.5s 时长、在 B 上以弹性 HOLD结尾永不做 time-scale。概念澄清这里的A/B 场景都是插槽slot不是组件内固定的图片素材。调用方只需要在宿主页面任意位置放两个惰性template运行时会把内容搬进场景层缺省时组件会用纯设计令牌绘制的字母牌占位A 用中性色B 用强调色这一点在源码注释halftone-dissolve.html 第 11-20 行和 registry-item.json 的type: hyperframes:component、family: transitions、profile: texture元数据中均可印证。组件元数据还给出了它的定位jobs: [bridge]桥接两段画面tags为motion-primitive / transition / texture / halftone / dissolve并声明了唯一同步点syncPoints: [{ id: dissolve, phase: in, offset: 1.1 }]即溶解在 1.1s 处触发——这部分与运行时的事件对齐如为音效打点直接相关。安装与目录产物该组件通过 HyperFrames CLI 的 add 子命令安装npx hyperframes add halftone-dissolveCLI 的用法表在 docs/developers/cli.mdx 中登记为 Add a Catalog itemnpx hyperframes add name。命令会写入一个文件compositions/components/halftone-dissolve.html在仓库内组件源文件位于 registry/components/halftone-dissolve/halftone-dissolve.html随附的 registry-item.json 中files[0]记录了发布目标路径compositions/components/halftone-dissolve.html与 CLI 行为一致。安装后可把它粘贴进自己的 composition——组件本身没有自己的尺寸和时长二者都取自你所粘贴进的 composition。目录页 docs/catalog/components/halftone-dissolve.mdx 中同样说明了这一用法并指出每个变量都有默认值不设置任何参数也能原样工作。在宿主页面中挂载READ ME 给出的最小挂载结构是把组件当作宿主页面中的一个.clip元素div classclip >template>template>div >var duration ...parseFloat(root.dataset.duration || 3.5); var OUT exit none ? 0 : 0.45; // 可选离场 0.45s var DISSOLVE Math.min(1.3, Math.max(0.4, duration - OUT - 0.6)); // 溶解恒 ≤1.3s var maxAt Math.max(0.2, duration - DISSOLVE - OUT - 0.05); var dissolveAt num(vars.dissolve_at, 1.1, 0.2, maxAt); // 钳制到 maxAt 内 var OUT_START duration - OUT;实际时间线由三条 GSAP 结构组成一条锚点补间tl.to({t:0},{t:1, duration, ease:none},0)横跨整个创作时长目的是让onUpdate画图在 [0, D] 内任何一次事件式 seek都被触发同时让 HOLD 段保持tl.time()诚实一条进度补间tl.fromTo(P, {p:0},{p:1, duration:DISSOLVE, ease:power1.inOut}, dissolveAt)这是溶解本体的唯一驱动——power1.inOut让前锋两端都不仓促最小优先地弹出、不勉强的合并HOLD 不写任何补间仅当exit非 none 时在OUT_START追加 0.45s 的power2.in离场up同时上移-4cqh与淡出fade仅淡出。整条时间线paused: true最后tl.seek(0); paint()后注册到window.__timelines[halftone-dissolve]等待帧适配器逐帧 seek——这正符合 HyperFrames 的确定性模型见下节。确定性渲染原理README 的 Determinism 一节是理解该组件工程价值的关键网格与其阈值表在构建时用固定 LCG 种子只计算一次一个普通对象的进度补间喂给唯一一个画师该画师从零重绘墨点画布、并重建 B 的clip-path字符串——全部是 progress 的纯函数。因此任意顺序、任意方向的事件式 seek 都会落在完全相同的帧上。栅格与 clip-path 的基准是挂载时测量一次的宿主盒子。映射到源码halftone-dissolve.html固定种子 LCGvar state 0x4a17f03d;随后state (Math.imul(1664525, state) 1013904223) 0;第 273-277 行。这是标准的 Numerical Recipes 线性同余生成器参数种子是硬编码常量保证每次运行产生同一张抖动/散列序列只在构建时计算一次网格生成在一个 IIFE 中完成阈值th由方向决定的基础量center用到中心的归一化距离、noise直接取next()、否则用x/cssW叠加种子抖动(next()-0.5)*0.22并乘以0.62归一化后写入点表半径是 (位置, 进度) 的纯函数windowRadius(dot,p) R_MAX * smooth(clamp01((p - dot.th)/0.38))inkRadius则把进度前移0.07实现墨点领先窗口一拍第 310-315 行smooth()即三次平滑v²(3-2v)单一画师onUpdate: paint每帧清空墨点画布、按点表填充墨点圆并逐点拼出M..A..A..Z的 clip-pathpath()字符串赋给.htd-scene-b第 330-382 行。lastClip缓存仅用于跳过字符串相同的样式写入绝不用于跳过变化帧的重绘没有Math.random()时序依赖所有随机性来自种子 LCG渲染逐帧 seek、不播放因此无论 seek 方向与顺序如何帧内容都确定。这一节也是整个框架Same input, identical output保证的一个实例化框架级约定无墙钟、无未播种随机、无渲染中途 fetch、帧锁定 fps/宽/高记录在 docs/concepts/determinism.mdx每次渲染逐帧seekFrame(frame)、GSAP 时间线一律暂停并 seek见 docs/concepts/frame-adapters.mdx。对 halftone-dissolve 而言这意味着它的所有伪随机视觉都由0x4a17f03d这一个种子决定——任何对抖动排布的视觉调整本质上都要回到种子与dot_size网格密度这两处。其他网格与分辨率要点经典半调错排x (c (r%20 ? 0.25 : 0.75)) * cell第 282 行交替行错开半格正是经典 halftone 交错的网格形态行数/列数各多算 1-2 个以保证边界无洞。最大半径R_MAX cell * 0.78使相邻圆在满覆盖时互相重叠从而实现窗口合并后的无缝全屏。栅格基准与 DPR画布物理分辨率 CSS 尺寸 ×min(2, max(1, devicePixelRatio))cssW/cssH与 clip-path 的坐标系统一来自挂载时一次性测量的getBoundingClientRect()缺省回退 640×360避免逐帧测量导致的不确定性。快速对照仓库文件速查文件仓库根相对路径作用registry/components/halftone-dissolve/README.md组件权威说明挂载、插槽、变量、编排、确定性registry/components/halftone-dissolve/halftone-dissolve.html完整实现CSS、插槽解析、LCG 点表、GSAP 时间线、单画师registry/components/halftone-dissolve/demo.html1920×1080 浅色主题宿主示范非默认变量 双插槽装配registry/components/halftone-dissolve/registry-item.json目录元数据标签、family/profile、同步点、变量 schemadocs/catalog/components/halftone-dissolve.mdx站点目录页安装命令、变量表、完整源码展示docs/concepts/determinism.mdx框架级确定性渲染规则背景docs/developers/cli.mdxnpx hyperframes add等 CLI 用法小结halftone-dissolve演示了 HyperFrames 组件设计的一整套惯用法无自持尺寸与时长、内容走宿主插槽、外观全部消费设计令牌、时间线固定段 弹性 HOLD、随机性收敛到单一固定种子。安装后你只需要做三件事——把它的 HTML 内容并入 composition、按需在元素上覆盖dot_size / direction / dissolve_at / accent / exit、再在宿主里给出 A/B 两个场景模板——即可获得一段对逐帧渲染完全确定的半调点阵溶解转场若在 dissolve 触发的 1.1s 时间点有音效需求可直接对齐它声明的dissolve同步点。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考