做互动影像、网页叙事或者数据可视化的人大概都经历过这种纠结素材明明准备好画面也都单独渲染过可一旦想做成一个让观众自由探索的作品就发现自己被传统时间轴死死捆住。Hyperframes 是我从这种反复沉淀出来的一个轻量项目——一个把“帧”重新理解为可组合、可跳转、可实时混合对象的交互框架。它不要求你按顺序播放素材而是用“超帧集合”来组织场景让每个画面既能独立存在也能通过条件、事件和过渡彼此连接。用一句话说Hyperframes 就是把线性视频的时间轴变成一张可自由行走的地图。这套思路很适合做网页互动、沉浸式展览、数据故事、交互式动画也很适合想突破剪辑逻辑、尝试动态叙事的创意开发者。你不用先学复杂引擎只要会一点 JavaScript就能在浏览器里搭出类似“点击切换场景、画面交叉淡化、按键盘触发分支”的效果。下面我会从设计思路、核心机制、最小实现到踩坑经验把 Hyperframes 这个项目完整拆一遍。1. 项目背景与设计思路1.1 为什么需要一个叫“超帧”的单位传统视频剪辑的逻辑是时间轴素材一个接一个排列观众只能跟随播放头前进。这种模型对宣传片、纪录片没问题可一旦碰到交互场景就会暴露两个短板第一分支无法自然表达即便用多轨嵌套或按钮跳转也是在跟时间轴较劲第二所有素材都必须接受一个严格的先后顺序但观众实际想要的是“这时点这里、那时按那里”的自由节奏。我最初做这类项目时也试过用普通状态机用一个 currentScene 变量到点切换画面。简单场景能跑但素材一多就乱套。比如一个城市交通数据作品用户点选不同路口画面要切换到对应热力图同时侧边栏还要播放一段语音解说背景音乐又要保持连续。用传统状态机会变成一堆 if 嵌套而且一旦要从场景 C 回到场景 A还得自己维护历史栈。Hyperframes 的出发点是把“一帧”这个概念抬升成“超帧”。超帧不是一个时间刻度而是一个独立对象它自己可以拥有素材、样式、动画时长甚至可以包含其他帧。多个超帧之间靠边edge连接边上写明什么条件可以出发、过渡要多久、用什么方式过渡。于是整个作品不再是时间线而是一张有向图。这就像把电影改成一本可跳读的立体书每一页都能单独存在翻页方式由读者决定。这个模型对讲故事特别有用因为它天然支持非线性。展览现场常见的需求是参观者靠近装置时播放一段影像按下实体按钮后切入另一个视角离开后回到默认画面。这些在时间轴里都很难干净地实现但在超帧图里只是一个“条件边”的事情。1.2 技术选型为什么放在浏览器里做Hyperframes 从第一版开始就锁定 Web 技术栈原因很简单浏览器是唯一不需要安装、跨系统、且自带 GPU 能力的交互媒体平台。Canvas 2D 和 WebGL 足够处理大多数实时画面音频可以用 Web Audio媒体文件用 video 和 audio 标签就能加载。作品做出来后扔到静态服务器就能访问不需要打包成 App也不需要担心系统环境差异。整体架构上我把项目拆成三层数据层用 JSON 描述所有帧、边、事件、过渡参数。媒体资源只存引用路径不把视频音频直接塞进 JSON。核心引擎层负责帧状态管理、事件分发、时间推进、过渡计算。这层不关心具体绘制只关心“现在该显示哪个帧、过渡到什么进度”。渲染层负责把帧内容画到 Canvas、WebGL 或 DOM 上。不同素材类型配不同渲染器但引擎层完全不碰绘图细节。这样拆分的好处很实际。很多互动作品卡在“数据和表现耦合太紧”想改一个画面效果结果把状态逻辑也牵动。Hyperframes 把艺术家和程序员的任务分开——你甚至可以先用 JSON 把叙事结构调好再补视觉渲染两边并行推进互不干扰。2. 核心机制拆解从帧到超帧2.1 帧模型与数据描述一个帧在 Hyperframes 里并不只是一张图片。它是一份完整的场景描述通常包含这些字段字段说明示例id帧的唯一标识sceneAtype渲染类型solid、video、image、canvasprops传给渲染器的参数颜色、图片地址、文字内容duration这个帧自己持续的时间60 表示 60 秒0 表示永久children嵌套的其他帧用于叠加图层[bgVideo, chartLayer]edges从这个帧出发的跳转规则点击后切换到 sceneB关键在 children一个帧可以包含多个子帧这些子帧同时渲染形成“图层”效果。比如背景播放城市夜景视频前景覆盖一个数据图表动画顶部再加字幕。每个子帧本身也能拥有自己的 edges这样互动可以发生在图层级别而不必把整幅画面当作一个不可分割的整体。举个例子一个简单作品的数据结构可能长这样{ meta: { title: demo, version: 0.1 }, root: sceneA, frames: { sceneA: { type: group, children: [ { id: bg, type: video, props: { src: /media/city.mp4 } }, { id: label, type: text, props: { text: 向左走向右走 } } ], duration: 0 } } }这种“帧中帧”的递归结构是名称里 hyper 的由来。你既能把它当普通场景投射也能把一整组场景打包成一个大帧作为一个更宏观作品的子模块。这种分层非常符合实际项目的搭建节奏先做小组件再做章最后组成完整作品。2.2 渲染调度requestAnimationFrame 的正确打开方式超帧作品的展示本质上是一帧一帧把当前场景画出来。最简单也最可靠的循环是 requestAnimationFrame而不是 setInterval。原因有两个它跟屏幕刷新率同步不会出现撕裂感浏览器在后台标签页会暂停它从而省电留给真正在前台运行的任务。一个基础的调度循环长这样let last 0; function loop(timestamp) { if (!last) { last timestamp; requestAnimationFrame(loop); return; } const delta Math.min((timestamp - last) / 1000, 0.1); last timestamp; engine.tick(delta); renderer.render(engine); requestAnimationFrame(loop); } requestAnimationFrame(loop);这里有个容易被忽略的细节delta 被限幅到 0.1 秒。因为浏览器切到后台一段时间再切回来timestamp 的差可能高达几十秒如果直接拿这个大 delta 去推进动画所有过渡会瞬间完成素材会跳变。限幅之后切换回来的第一帧最多只前进 0.1 秒画面不会“飞走”至少给用户一个回神的时间。引擎里的 tick 函数只需要做两件事推进全局时间推进正在进行的过渡。如果把每帧的逻辑写成“每帧都重新计算整个场景状态”很快就会遇到难以排查的时序问题。正确的姿势是让状态只随 delta 增量变化渲染只负责读状态。2.3 状态机过渡切换画面不只是换一张图Hyperframes 里最核心的运行机制是状态机状态就是我说的当前帧 id。所有跳转都通过 edge 来驱动基本流程是引擎收到一个事件比如 click、keydown、定时器触发。在数据中查找当前帧出发且匹配该事件的 edge。如果找到记录 previous 和 current并把过渡进度 progress 重置为 0。之后每个 tickprogress 按过渡时长递增。渲染层根据 progress 同时绘制 previous 和 current产生混合效果。我实现的精简版引擎核心大致如下export function createEngine(data) { const state { current: data.root, previous: null, progress: 1, transitionDuration: 0 }; function findEdge(event) { return data.edges.find( edge edge.from state.current edge.on event ); } function emit(event) { const edge findEdge(event); if (!edge) return false; state.previous state.current; state.current edge.to; state.progress 0; state.transitionDuration edge.duration ?? 0.8; return true; } function tick(delta) { if (state.progress 1) { state.progress Math.min( 1, state.progress delta / state.transitionDuration ); } } return { state, emit, tick }; }这里 only 做了 crossfade 的 progress 推进但思想上已经能解决“过渡过程中旧帧还能继续显示”的问题。过渡没完成之前previous 和 current 都保存在状态里渲染层就能同时拿到两个帧按 progress 做透明度和位置的插值。常见过渡有三种crossfade 交叉淡化、push 平移推入、instant 直接切换。具体实现时crossfade 只需要把当前帧按 progress 叠在旧帧上push 则要给新旧帧分别计算位移instant 则直接把 progress 设为 1。引擎层只提供数值具体怎么画由渲染层决定这保证了扩展性。2.4 事件与边让交互逻辑可测试、可回放在整个框架里交互逻辑不是散布在事件回调里的而是集中描述为 edges。这样做有一个明显好处整个作品的跳转规则变成了一份数据可以被测试、调试甚至可视化。事件名可以自定义比如clickkey:spacekey:arrowlefttimer:10item:entersensor:proximity引擎提供一个 emit 方法外部代码只管调用不需要知道内部状态细节canvas.addEventListener(click, () engine.emit(click)); window.addEventListener(keydown, (e) { if (e.code Space) engine.emit(key:space); });多事件同时命中同一帧时我给 edge 加了一个优先级字段数字小的先执行。这让分支更可控。比如背景动画的循环播放在第 10 秒自动切回首页但用户在第 9 秒点击了内容页这时 timer:10 和 click 都可能触发我一般把用户主动点击的优先级设得更高避免强制跳转打断体验。3. 上手实操搭一个能跑的最小 Hyperframes 播放器3.1 准备环境与项目结构这一步不需要任何重型工具。我建议用 Vite 搭一个 vanilla JavaScript 项目创建命令很简单npm create vitelatest hyperframes-demo -- --template vanilla cd hyperframes-demo npm install然后把项目结构整理成下面这样src/ main.js engine.js renderer.js frames.jsonframes.json 负责描述画面和跳转规则engine.js 是核心状态机renderer.js 负责画布绘制main.js 负责装配和启动循环。媒体资源放在 public/media 目录下需要时再引用。3.2 定义两张可切换的画布我先做一个最小但完整的示例两个场景一个红色一个蓝色点击画面就交叉过渡切换。frames.json 内容如下{ meta: { title: hyperframes-demo, version: 0.1 }, root: sceneA, frames: { sceneA: { type: solid, props: { color: #ff5d5d, label: RED }, duration: 0 }, sceneB: { type: solid, props: { color: #5d5dff, label: BLUE }, duration: 0 } }, edges: [ { from: sceneA, to: sceneB, on: click, transition: crossfade, duration: 1.2 }, { from: sceneB, to: sceneA, on: click, transition: crossfade, duration: 1.2 } ] }duration 为 0 表示这个帧没有主动结束时间一直等事件触发。这样就先不看自动播放场景把交互跳转这个核心机制跑通。3.3 引擎、渲染器和入口代码engine.js 直接复用上一节实现的状态机这里不再重复。真正需要写的是 renderer.js因为每种帧类型都有不同画法。对于 solid 类型画法很简单填充颜色再画一行文字标识当前帧。const COLORS { sceneA: #ff5d5d, sceneB: #5d5dff }; export function createRenderer(ctx, width, height) { function drawSolid(id, alpha) { ctx.globalAlpha alpha; ctx.fillStyle COLORS[id] || #202020; ctx.fillRect(0, 0, width, height); ctx.globalAlpha 1; ctx.fillStyle #ffffff; ctx.font bold 48px sans-serif; ctx.textAlign center; ctx.textBaseline middle; ctx.fillText(id.toUpperCase(), width / 2, height / 2); } function render(engine) { const { current, previous, progress } engine.state; ctx.clearRect(0, 0, width, height); if (previous progress 1) { drawSolid(previous, 1 - progress); drawSolid(current, progress); } else { drawSolid(current, 1); } } return { render }; }main.js 负责把三块代码拼起来import data from ./frames.json; import { createEngine } from ./engine.js; import { createRenderer } from ./renderer.js; const canvas document.querySelector(#stage); const ctx canvas.getContext(2d); canvas.width 800; canvas.height 450; const engine createEngine(data); const renderer createRenderer(ctx, canvas.width, canvas.height); canvas.addEventListener(click, () { engine.emit(click); }); let last 0; function loop(timestamp) { if (!last) { last timestamp; requestAnimationFrame(loop); return; } const delta Math.min((timestamp - last) / 1000, 0.1); last timestamp; engine.tick(delta); renderer.render(engine); requestAnimationFrame(loop); } requestAnimationFrame(loop);跑起来之后你会在画布里看到红色和蓝色两个画面点击一次会花 1.2 秒交叉淡化到另一个颜色。这个效果看起来简单但已经是一个完整的“超帧播放器”再往上加图片、视频、Shader、图表都只是扩展 frame type 而已。3.4 把图片和视频也接入超帧把一个 video 接进来也很快。在 frames.json 里新增一个类型为 video 的帧{ id: videoIntro, type: video, props: { src: /media/intro.mp4, autoplay: true, loop: true }, duration: 0 }renderer.js 里增加对 video 类型的处理const videoCache new Map(); function getVideo(src) { if (!videoCache.has(src)) { const video document.createElement(video); video.src src; video.autoplay true; video.loop true; video.muted true; video.playsInline true; videoCache.set(src, video); } return videoCache.get(src); }然后在 render 里发现当前帧是 video 类型就调用 canvas 的 drawImage(video, 0, 0, width, height)。用 Map 缓存 video 元素很关键如果每次切换都新建 video 元素浏览器会迅速积累大量解码线程内存压力会很大。4. 真实使用中踩过的坑与解决思路4.1 切换瞬间所有动画“归零”了怎么办第一次用 Hyperframes 做作品时我发现一个特明显的问题切到新帧之后新帧内部如果有动画总会从 0 开始播放。大多数时候这是预期行为但某些场景不该重新播。比如背景是一条循环的城市夜景视频从场景 A 切到场景 B 再切回 A观众会看到视频从开头重新播放特别突兀。问题根源是引擎切换帧时新帧的 localTime 被重置。解决思路是给每个帧加一个“记忆开关”叫 keepTime。如果为 true切换时不重置 localTime继续沿用之前的播放位置。媒体资源和动画状态都放到帧对象的缓存里而不是每次 render 都新创建。这样返回旧场景时视频能无缝续播。4.2 交叉淡化的透明度和叠加顺序Crossfade 看着简单但稍不注意就失真。比如上一帧是纯色块下一帧是半透明的 SVG 覆盖层直接用 globalAlpha 叠上去结果是两层颜色互相渗透显得脏。后来我给自己定了一条规则只要做画面过渡就把新旧两帧当作两个独立的图层先分别完整绘制到离屏 Canvas 上再对离屏 Canvas 做合成。这样每帧内部的效果不会被另一帧的半透明层级干扰合成结果才接近“整幅画面淡出、新画面淡入”的真实感。离屏 Canvas 的做法会增加一点内存开销但在大多数交互作品里可接受。如果要优化的场景可以用 WebGL 的纹理做同样的事情效率更高。4.3 媒体加载导致的白屏和卡顿超帧作品里媒体资源通常不是一次性加载。直接把几十段视频全放在页面里第一次打开基本会卡死因为浏览器要同时解析大量文件。我的做法是做一个简单的按需加载器当帧被激活时预加载它的直接相邻帧所需媒体等过渡开始资源通常已经就绪。离屏视频用 JS 控制 play 和 pause不要用 autoplay 属性依赖浏览器行为。进入新帧时如果视频还没加载完可以先渲染背景色或 loading 占位避免全黑。另外视频元素要被“碰过”才能播放声音所以互动作品里的视频大部分要 muted。声音通过 Web Audio 单独管理和画面解耦是更可靠的做法。4.4 分支太多作品“回不来”了非线性叙事往下做分支会越来越多。用户从一个分支点走到很深的地方突然想返回上一级很可能发现没有对应事件边或者按退格键回不到上一幕。这是做超帧作品最容易翻车的地方。我在引擎里加了一个 history 栈。每次正常跳转都把当前的帧 id、触发事件、被跳过帧的信息 push 进去。当事件名是 back 时优先从栈顶取上一帧做反向过渡。这样再复杂的流程至少有一个可控的“后退”通道。同时我给每个 edge 增加可选的 guard 条件比如只允许在某个状态集内跳转避免图结构里出现循环死锁。4.5 一个简单的调试小技巧如果你也在做类似的帧状态引擎我强烈建议把状态变化打印成一个可读文本。不要只打印 “switch scene”而是打印成[3.25s] click - sceneA - sceneB (crossfade 1.2s)这行日志能让你快速定位是事件没触发、边没匹配还是过渡计算出了问题。我甚至会把所有事件记录到一个数组里做完作品后回放事件序列用来验证整个交互流程是否符合预期。这一步在最终调试阶段能省下大量时间。用 Hyperframes 做作品最舒服的一点是叙事结构、交互规则和视觉表现被拆成了不同层次改起来不至于牵一发动全身。如果你近期也在憋一个互动影像或者数据叙事可以从一个两帧切换的小例子开始把状态机和过渡跑通再慢慢把图片、视频、Shader 都挂进去。这套思路不绑定任何特定技术栈核心想明白之后换成 WebGL、Three.js甚至 Unity 都只是换一层渲染表皮而已。