企业官网建设流程全解析

1. 从“hyperframes”这个词说起：它到底是什么

第一次看到“hyperframes”这个词，很多人会下意识地把它拆成“hyper”和“frames”两部分来理解。从字面看，hyper 有“超、高维、强化”的意思，frames 则是“帧、框架、结构”。组合在一起，它指向的其实是一类非常具体的技术思路：用更高维度、更密集的帧结构去承载和表达信息。这个词最近在技术社区里被频繁提起，不是因为它是一个现成的软件产品，而是因为它精准概括了一类正在快速演进的做法——无论是前端动画、数据可视化、视频处理，还是AI生成内容领域，大家都在用“hyperframes”这个说法来描述那种“把帧的密度和维度推到极致”的方案。

我最早接触这个概念是在做一套高帧率交互动画的时候。当时项目要求在一个页面上同时驱动上百个独立运动单元，每个单元都有自己的时间轴、缓动曲线和状态切换。用传统的逐帧或简单补间方案，性能直接崩掉，掉帧掉到没法看。后来换了一种思路，把每个运动单元抽象成“帧层”，再用一个统一的调度器去管理这些帧层的组合与切换，整个系统才稳下来。那次之后我才意识到，hyperframes 背后真正有价值的东西，不是某个具体工具，而是一套分层、分维、分时的帧管理哲学。

所以这篇文章想聊的，就是围绕 hyperframes 这个核心思路，把它的设计逻辑、实操要点、常见坑和排查方法一次讲透。不管你是做前端动效、视频后期、数据大屏，还是对AI生成内容里的帧控制感兴趣，这套思路都能直接拿去用。我会尽量用大白话把原理说清楚，再配上可以直接抄的参数和步骤，让刚入门的人也能跟上，有经验的人也能找到可优化的细节。

2. 核心设计思路拆解：为什么是“超帧”而不是“多帧”

2.1 传统帧方案的三个瓶颈

要理解 hyperframes 的价值，得先看清楚传统帧方案卡在哪里。我把它归纳为三个瓶颈，这三个问题在实际项目里几乎都会遇到。

第一个瓶颈是线性时间轴的刚性。传统动画或视频处理里，帧是按时间顺序排成一条线的，第1帧、第2帧、第3帧……这种结构简单直接，但一旦某个环节需要变速、循环、反向或者条件跳转，整条时间轴就得重新计算。我做过一个数据可视化项目，要求某段动画根据实时数据动态调整播放速度，用线性时间轴改起来非常痛苦，每次变速都要重新映射所有关键帧的位置。

第二个瓶颈是帧与帧之间的耦合。在很多实现里，帧不是独立的，后一帧依赖前一帧的状态。这就导致你没法单独修改某一帧而不影响其他帧。比如一个角色动画，你想让手臂在第50帧到第80帧之间做一个独立动作，但身体其他部分保持不变，传统方案往往需要把这段单独抽出来做，再合成回去，流程很碎。

第三个瓶颈是维度单一。传统帧只承载“某一时刻的画面或状态”，但实际项目里，一帧往往需要同时携带位置、透明度、旋转、颜色、音频、交互状态等多维信息。把这些信息全塞进一个帧对象里，代码会变得非常臃肿，维护成本极高。

2.2 hyperframes 的破局逻辑：分层、分维、分时

hyperframes 的思路，本质上是把上面三个瓶颈逐个拆解。它的核心做法可以概括为三个词：分层、分维、分时。

分层，是指把不同属性的帧拆成独立的层。比如一个运动单元，它的位置变化是一层，透明度变化是另一层，旋转又是一层。每一层有自己的时间轴和缓动曲线，互不干扰。这样你要改透明度，只动透明度那一层就行，位置层完全不受影响。这个思路其实和图像处理里的图层概念很像，只不过这里层的是“帧属性”而不是“像素”。

分维，是指把帧的维度拆开管理。传统方案里一帧就是一个大对象，hyperframes 则把帧拆成多个维度通道，每个通道独立更新。这样做的好处是，你可以只更新变化的维度，不变的维度直接复用上一帧的数据，性能开销大幅降低。我在一个实时渲染项目里用这个思路，把每帧的计算量从全量更新降到了增量更新，帧率直接翻了一倍多。

分时，是指帧的时间轴不再是单一线性，而是可以嵌套、并行、条件触发。一个 hyperframe 可以包含多个子时间轴，每个子时间轴有自己的播放速率、循环模式和触发条件。这就解决了线性时间轴的刚性问题。比如你可以定义一个主时间轴控制整体进度，再定义若干子时间轴分别控制不同部件的动作，子时间轴可以独立变速、循环或暂停，主时间轴只负责协调。

2.3 为什么这套思路值得投入

可能有人会问，搞这么复杂值得吗？我的答案是：取决于你的项目复杂度。如果你只是做一个简单的淡入淡出，那确实没必要上 hyperframes，用最基础的补间就够了。但一旦项目涉及多单元协同、动态变速、条件分支、实时响应，传统方案的维护成本会指数级上升，这时候 hyperframes 的分层分维分时思路就能把复杂度压下来。

我自己的经验是，当一个动画或帧控制系统里独立运动单元超过20个，或者时间轴需要支持3种以上的变速/循环模式，就应该考虑引入 hyperframes 的结构。否则后期改需求的时候，你会发现自己在一堆互相纠缠的帧数据里挣扎，改一处崩三处。

3. 核心细节解析与实操要点

3.1 帧层的定义与组织方式

实操 hyperframes 的第一步，是把帧层定义清楚。一个帧层至少需要包含这几个字段：层标识、属性类型、时间轴、缓动函数、当前值。层标识用来区分不同层，属性类型说明这层控制的是什么（位置、透明度、旋转等），时间轴定义这层的关键帧序列，缓动函数决定帧与帧之间的插值方式，当前值则是运行时计算出来的结果。

我通常会用这样的结构来组织：

const frameLayer = { id: 'position-x', property: 'x', timeline: [ { time: 0, value: 0, easing: 'easeOutCubic' }, { time: 500, value: 200, easing: 'easeInOutQuad' }, { time: 1200, value: 100, easing: 'linear' } ], currentValue: 0 };

这里有几个细节值得注意。时间单位我习惯用毫秒，因为和大多数动画库以及requestAnimationFrame的时间戳对齐，省去换算。缓动函数我建议每个关键帧单独指定，而不是整层统一，因为实际项目里不同段落的运动节奏往往不一样。当前值单独存一个字段，是为了避免每帧都去遍历时间轴重新计算，只在时间轴推进时更新。

层的组织方式我推荐用扁平数组加索引映射，而不是嵌套树。扁平数组遍历快，索引映射方便按 id 快速查找。嵌套树虽然结构上更“优雅”，但遍历和查找的开销在帧率敏感的场景下会变成负担。我试过两种方式，扁平数组在100层以上的场景里明显更稳。

3.2 时间轴的推进与插值计算

时间轴推进是 hyperframes 的心脏。每一帧渲染时，你需要根据当前时间戳，算出每个层在当前时刻的值。这个过程分两步：先定位当前时间落在哪两个关键帧之间，再做插值。

定位这一步，如果关键帧数量少，直接线性遍历就行。但如果关键帧很多（比如上百个），线性遍历会拖慢性能。这时候可以用二分查找，把定位复杂度从 O(n) 降到 O(log n)。我在一个关键帧超过300个的项目里做过对比，二分查找比线性遍历每帧省了大约0.3毫秒，看起来不多，但在60帧每秒的要求下，这0.3毫秒就是能不能稳住帧率的关键。

插值计算本身不复杂，核心公式是：

当前值 = 起始值 + (结束值 - 起始值) * 缓动进度

缓动进度由缓动函数根据时间比例算出来。这里有个容易踩的坑：时间比例要用实际时间差来算，不能用帧序号。因为帧率可能波动，用帧序号算会导致动画速度不稳定。我早期就犯过这个错，在低帧率设备上动画明显变慢，后来改成用时间戳差值才解决。

function interpolate(layer, currentTime) { const timeline = layer.timeline; let startFrame = timeline[0]; let endFrame = timeline[timeline.length - 1]; for (let i = 0; i < timeline.length - 1; i++) { if (currentTime >= timeline[i].time && currentTime <= timeline[i + 1].time) { startFrame = timeline[i]; endFrame = timeline[i + 1]; break; } } const duration = endFrame.time - startFrame.time; const elapsed = currentTime - startFrame.time; const progress = duration > 0 ? elapsed / duration : 1; const easedProgress = applyEasing(progress, startFrame.easing); return startFrame.value + (endFrame.value - startFrame.value) * easedProgress; }

注意：当 duration 为 0 时（两个关键帧时间相同），要直接返回结束值，否则会出现除以零的问题。这个边界情况在实际项目里真的会遇到，尤其是自动生成的关键帧数据。

3.3 缓动函数的选择与自定义

缓动函数决定了动画的“手感”，是 hyperframes 里最影响观感的部分。内置的缓动函数一般够用，但有些场景需要自定义。我常用的几个缓动函数和适用场景如下：

自定义缓动函数时，我建议先用在线工具把曲线调好，再把公式抄进代码。直接手写弹性或回弹公式很容易出错，尤其是参数边界。另外，缓动函数的输入输出都应该是0到1之间的值，超出这个范围会导致插值结果异常。

还有一个经验：同一个动画里不要用太多种缓动函数。我见过一个项目用了七八种不同的缓动，结果整体观感很乱，像是拼凑出来的。一般来说，一个动画里保持两到三种缓动函数就够了，主运动用一种，辅助运动用一种，特殊效果再用一种。

3.4 帧层的启用与禁用策略

不是所有帧层都需要一直运行。有些层只在特定时间段或特定条件下才需要更新。这时候就需要启用/禁用机制。我的做法是给每个层加一个enabled标志，渲染循环里只处理启用的层。

但这里有个细节：禁用层的时候，要决定它的当前值是保持还是重置。如果这个层后面还会重新启用，通常应该保持当前值，避免重新启用时出现跳变。如果这个层是一次性的，用完就彻底不用了，那可以重置以释放内存。我在一个项目里因为没处理好这个，导致某个层重新启用时从0突然跳到之前的值，画面闪了一下，排查了半天才发现是重置逻辑写错了。

function updateLayers(layers, currentTime) { for (let i = 0; i < layers.length; i++) { const layer = layers[i]; if (!layer.enabled) continue; layer.currentValue = interpolate(layer, currentTime); } }

提示：如果层数量很多，可以考虑把启用和禁用的层分开存两个数组，这样渲染循环里连判断都省了。我实测在200层以上的场景里，分开存储比每次判断快大约15%。

4. 实操过程与核心环节实现

4.1 从零搭建一个 hyperframes 调度器

下面我以一个完整的例子，把 hyperframes 调度器从零搭起来。这个调度器要能管理多个帧层，支持时间轴推进、插值计算、启用禁用，并且能对接requestAnimationFrame。

第一步，定义调度器的数据结构：

class HyperFrameScheduler { constructor() { this.layers = []; this.layerMap = new Map(); this.startTime = 0; this.currentTime = 0; this.running = false; } addLayer(layerConfig) { const layer = { id: layerConfig.id, property: layerConfig.property, timeline: layerConfig.timeline, currentValue: layerConfig.timeline[0].value, enabled: true }; this.layers.push(layer); this.layerMap.set(layer.id, layer); return layer; } getLayer(id) { return this.layerMap.get(id); } }

第二步，实现时间轴推进和渲染循环：

HyperFrameScheduler.prototype.start = function() { this.startTime = performance.now(); this.running = true; this.tick(); }; HyperFrameScheduler.prototype.tick = function() { if (!this.running) return; this.currentTime = performance.now() - this.startTime; for (let i = 0; i < this.layers.length; i++) { const layer = this.layers[i]; if (!layer.enabled) continue; layer.currentValue = this.interpolate(layer, this.currentTime); } this.onUpdate && this.onUpdate(this.layers); requestAnimationFrame(() => this.tick()); };

第三步，实现插值和缓动：

HyperFrameScheduler.prototype.interpolate = function(layer, time) { const timeline = layer.timeline; if (timeline.length === 0) return 0; if (time <= timeline[0].time) return timeline[0].value; if (time >= timeline[timeline.length - 1].time) { return timeline[timeline.length - 1].value; } let start = timeline[0]; let end = timeline[1]; for (let i = 0; i < timeline.length - 1; i++) { if (time >= timeline[i].time && time <= timeline[i + 1].time) { start = timeline[i]; end = timeline[i + 1]; break; } } const duration = end.time - start.time; const elapsed = time - start.time; const progress = duration > 0 ? elapsed / duration : 1; const eased = this.applyEasing(progress, start.easing || 'linear'); return start.value + (end.value - start.value) * eased; }; HyperFrameScheduler.prototype.applyEasing = function(t, type) { switch (type) { case 'linear': return t; case 'easeOutCubic': return 1 - Math.pow(1 - t, 3); case 'easeInOutQuad': return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; case 'easeOutBack': { const c1 = 1.70158; const c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); } default: return t; } };

这套代码可以直接跑起来。你只需要创建一个调度器实例，添加若干层，设置onUpdate回调去更新实际画面，然后调用start()就行。

4.2 参数计算：时间轴长度与关键帧密度

关键帧的密度直接影响动画质量和性能。太稀，动画会显得生硬；太密，计算量上升，而且文件体积变大。我的经验是：在运动方向或速度发生明显变化的地方放关键帧，匀速段可以少放甚至不放。

具体怎么判断？我通常先用一个粗略的时间轴跑一遍，观察哪些时间段运动不自然，再在这些地方补关键帧。补的时候注意，两个关键帧之间的时间间隔不要小于16毫秒（约一帧），否则在60帧每秒的渲染下根本体现不出来，纯属浪费。

时间轴总长度的计算也有讲究。如果动画是循环的，总长度应该是循环周期的整数倍，否则循环衔接处会跳。我一般会把总长度设成循环周期的倍数，再在末尾补一个和开头相同的关键帧，保证无缝循环。

// 计算循环时间轴的总长度 function calcLoopDuration(baseDuration, loopCount) { return baseDuration * loopCount; } // 生成无缝循环的关键帧 function makeSeamlessTimeline(keyframes, loopDuration) { const first = keyframes[0]; const last = { ...first, time: loopDuration }; return [...keyframes, last]; }

4.3 与渲染层的对接

调度器算出来的值，最终要作用到实际画面上。对接方式取决于你的渲染层是什么。如果是 DOM 元素，直接改 style；如果是 Canvas，改绘制参数；如果是 WebGL，改 uniform 或 attribute。

我以 DOM 为例：

const scheduler = new HyperFrameScheduler(); scheduler.addLayer({ id: 'box-x', property: 'x', timeline: [ { time: 0, value: 0, easing: 'easeOutCubic' }, { time: 800, value: 300, easing: 'easeInOutQuad' }, { time: 1600, value: 150, easing: 'easeOutBack' } ] }); scheduler.addLayer({ id: 'box-opacity', property: 'opacity', timeline: [ { time: 0, value: 0, easing: 'linear' }, { time: 400, value: 1, easing: 'linear' }, { time: 1200, value: 1, easing: 'linear' }, { time: 1600, value: 0, easing: 'linear' } ] }); const box = document.getElementById('box'); scheduler.onUpdate = function(layers) { const xLayer = scheduler.getLayer('box-x'); const opacityLayer = scheduler.getLayer('box-opacity'); box.style.transform = `translateX(${xLayer.currentValue}px)`; box.style.opacity = opacityLayer.currentValue; }; scheduler.start();

这段代码跑起来，你会看到一个方块先向右移动，再回弹一点，同时透明度先淡入再淡出。整个过程由两个独立的帧层驱动，互不干扰。如果你想改移动曲线，只动box-x的时间轴就行，透明度完全不受影响。

注意：onUpdate里不要做太重的计算，因为它是每帧都调用的。如果需要复杂计算，提前算好缓存起来，或者放到单独的层里用时间轴驱动。

4.4 性能优化：减少每帧的计算量

当层数多起来之后，性能优化就变得重要。我总结了几个实测有效的优化手段。

第一个是增量更新。不是每帧都重新计算所有层的值，而是只计算那些时间轴有推进的层。判断方法很简单：如果当前时间还没到下一关键帧的时间，这层的值就不需要重新插值，直接用上次的结果。这个优化在关键帧稀疏的场景下效果特别明显。

第二个是批量 DOM 操作。如果多个层控制的是同一个元素的属性，尽量合并成一次 style 更新，而不是分多次。浏览器对 style 的读写有开销，合并能省不少。

第三个是避免布局抖动。读取布局属性（如 offsetWidth）和写入样式交替进行，会触发强制同步布局，性能极差。我的做法是把所有读取操作集中到一帧的开头，写入操作集中到后面。

// 不好的做法：读写交替 for (const layer of layers) { const width = element.offsetWidth; // 读 element.style.width = width + layer.currentValue + 'px'; // 写 } // 好的做法：先读后写 const width = element.offsetWidth; // 集中读 for (const layer of layers) { element.style.width = width + layer.currentValue + 'px'; // 集中写 }

5. 常见问题与排查技巧实录

5.1 动画抖动或跳变

这是最常见的问题，表现是动画过程中突然闪一下或者位置跳一下。原因通常有三个：关键帧时间不连续、缓动函数在边界处不连续、或者当前值被意外重置。

排查方法：先把时间轴数据打印出来，检查关键帧的 time 是否严格递增，有没有重复或倒序。然后检查缓动函数在 t=0 和 t=1 处的输出是否分别是0和1，有些自定义缓动函数在边界处会偏。最后检查有没有在动画过程中修改了层的 timeline 或 currentValue。

我遇到过一次跳变，最后发现是两个关键帧的 time 相同，导致插值时分母为0，算出了 NaN，渲染层拿到 NaN 就跳到了默认位置。加上 duration 为0的判断之后就解决了。

5.2 低帧率设备上动画变慢

这个问题我在早期项目里经常遇到。根本原因是用了帧序号而不是时间戳来计算进度。帧序号在低帧率设备上增长慢，导致动画进度落后。改成用performance.now()的时间戳差值之后，无论帧率高低，动画速度都一致。

还有一个相关问题是requestAnimationFrame在后台标签页会被暂停，切回来的时候时间戳会跳一大截。如果动画是循环的，这一跳会导致动画瞬间跳到很后面的位置。解决办法是在切回前台时重置 startTime，或者对时间差做上限截断。

// 对时间差做上限截断，避免后台切回时跳变 const MAX_DELTA = 100; // 毫秒 let lastTime = performance.now(); function tick(now) { let delta = now - lastTime; if (delta > MAX_DELTA) delta = MAX_DELTA; lastTime = now; // 用 delta 推进时间轴 }

5.3 层数多时性能下降

层数超过一定数量后，每帧遍历所有层的开销会变得明显。优化方向有两个：减少遍历次数，或者减少每层的计算量。

减少遍历次数的方法是分层管理，把启用和禁用的层分开，只遍历启用的。还可以按更新频率分组，高频更新的层和低频更新的层分开处理，低频层不用每帧都算。

减少每层计算量的方法是缓存插值结果，如果当前时间还在同一对关键帧之间，直接复用上次的结果。这个优化需要记录上次命中的关键帧索引，实现起来稍微复杂一点，但效果很好。

5.4 循环动画衔接不自然

循环动画最容易在衔接处出问题，表现是循环一圈回到开头时画面跳一下。原因通常是开头和结尾的关键帧值不一致，或者缓动函数在结尾和开头的斜率不匹配。

解决办法是让结尾关键帧的值和开头完全一致，并且缓动函数在结尾的斜率尽量接近开头。如果做不到斜率匹配，可以在结尾和开头各加一个过渡关键帧，让过渡更平滑。

我个人的习惯是，做循环动画时先把开头和结尾的关键帧定死，确保值一致，然后再往中间填内容。这样从结构上就避免了衔接问题。

5.5 缓动函数选错导致观感差

缓动函数选错是很主观的问题，但有几个常见的错误可以避免。比如该用 easeOut 的地方用了 easeIn，会导致动画启动很慢，结束很突然。该用 linear 的地方用了弹性函数，会显得过于花哨。

我的经验是：入场动画用 easeOut，出场动画用 easeIn，循环动画用 linear 或 easeInOut。特殊效果如回弹、弹性，只在需要强调的地方用，不要滥用。如果不确定用哪个，先用 easeInOutQuad 跑一遍，大多数场景下它都不会太差。

6. 进阶玩法：把 hyperframes 用到更复杂的场景

6.1 条件触发与状态机结合

hyperframes 的时间轴如果只是线性播放，那还只是基础用法。真正强大的是把时间轴和状态机结合，让帧层的启用、禁用、变速由状态驱动。

比如一个交互组件，有“空闲”“悬停”“点击”“禁用”四个状态，每个状态对应一组帧层的配置。状态切换时，不是重新创建层，而是切换层的启用状态和时间轴参数。这样切换开销很小，而且状态之间的过渡可以做得非常平滑。

const stateConfig = { idle: { layers: ['idle-glow'], speed: 1 }, hover: { layers: ['hover-scale', 'hover-glow'], speed: 1.2 }, click: { layers: ['click-ripple'], speed: 2 }, disabled: { layers: [], speed: 0 } }; function switchState(newState) { const config = stateConfig[newState]; scheduler.layers.forEach(layer => { layer.enabled = config.layers.includes(layer.id); }); scheduler.timeScale = config.speed; }

6.2 多时间轴嵌套

复杂动画往往需要多个时间轴协同。比如一个主时间轴控制整体进度，子时间轴控制各个部件的细节动作。子时间轴可以有自己的循环、变速、暂停逻辑，主时间轴只负责协调它们的启动和停止。

实现上，可以给每个子时间轴单独一个调度器实例，主调度器在特定时间点调用子调度器的 start 或 stop。子调度器的时间独立计算，互不干扰。这样即使某个子动画循环很多次，也不会影响主时间轴的进度。

6.3 与数据驱动结合

hyperframes 的另一个进阶用法是数据驱动。时间轴的关键帧不是写死的，而是根据数据动态生成。比如一个图表动画，柱子的高度关键帧根据实际数据算出来，这样同一套动画逻辑可以适配不同的数据集。

数据驱动时要注意，动态生成的关键帧数量可能很多，需要做抽稀处理。我的做法是先用 Douglas-Peucker 算法对数据点做简化，保留变化明显的点作为关键帧，变化平缓的段用直线连接。这样既保留了数据特征，又控制了关键帧数量。

function simplifyKeyframes(points, tolerance) { if (points.length <= 2) return points; let maxDist = 0; let maxIndex = 0; const first = points[0]; const last = points[points.length - 1]; for (let i = 1; i < points.length - 1; i++) { const dist = perpendicularDistance(points[i], first, last); if (dist > maxDist) { maxDist = dist; maxIndex = i; } } if (maxDist > tolerance) { const left = simplifyKeyframes(points.slice(0, maxIndex + 1), tolerance); const right = simplifyKeyframes(points.slice(maxIndex), tolerance); return left.slice(0, -1).concat(right); } return [first, last]; }

这套抽稀逻辑我在一个实时数据大屏项目里用过，原始数据每秒上百个点，抽稀后关键帧降到十几个，动画依然流畅，而且数据特征保留得很好。

6.4 跨平台适配的注意事项

hyperframes 的思路是跨平台的，但具体实现要适配不同平台。Web 上用requestAnimationFrame，移动端原生用各自的帧回调，服务端渲染则可能需要手动推进时间轴。

跨平台时最大的坑是时间精度和帧率差异。Web 上performance.now()精度通常是微秒级，但有些环境只有毫秒级。移动端帧率可能是60、90或120，不同帧率下动画的观感会有差异。我的做法是把时间轴推进和渲染解耦，时间轴按固定步长推进，渲染按实际帧率插值。这样无论帧率多少，动画的逻辑速度都是一致的。

提示：固定步长推进时，步长不要设得太小，否则在低帧率设备上会累积大量未处理的时间步，导致卡顿。我一般设成16毫秒左右，和60帧每秒对齐。

7. 我踩过的坑和最后分享的几个技巧

做 hyperframes 相关的项目这些年，踩过的坑不少，挑几个最有代表性的说说。

第一个坑是过度设计。刚开始接触这套思路时，觉得什么都能用 hyperframes 管，结果一个简单的按钮动画也搞了五六个层，代码量翻了好几倍，维护起来反而更累。后来才明白，hyperframes 的价值在于管理复杂度，如果本身不复杂，硬上反而增加负担。现在的原则是：单元少、时间轴简单、不需要动态变速的场景，直接用基础补间；只有复杂度上来了，才引入 hyperframes 结构。

第二个坑是忽略内存回收。层用完不禁用也不销毁，时间一长内存越占越多。尤其是单页应用里，页面切换后旧的层还在，新页面又创建新层，很快就卡了。现在的习惯是，页面或组件销毁时，把对应的层从调度器里移除，该置空的引用置空。

第三个坑是缓动函数参数写错。弹性、回弹这类函数的参数很敏感，差一点效果就完全不对。我现在的做法是，自定义缓动函数先在独立的小页面里调好，确认效果后再抄进项目，不在项目里直接调。

最后分享几个实用技巧。一是给层加调试标记，开发阶段可以在页面上显示每个层的当前值，方便定位问题。二是时间轴数据用 JSON 存，方便热更新和版本管理，改动画不用重新编译。三是保留一个最小可复现示例，遇到问题时把相关层抽出来单独跑，比在完整项目里排查快得多。

这套 hyperframes 的思路，从最初为了解决一个动画性能问题，到现在成了我处理各类帧控制场景的默认方案。它的核心其实不复杂，就是分层、分维、分时这六个字，但真正用起来，能省下的维护成本和性能开销是实打实的。如果你也在做类似的东西，不妨从一个小场景开始试试，跑通了再往复杂场景推。