SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场hyperframes-keyframes

hyperframes-keyframes

设计与创作

查看项目

更新于 10-28 21:24

技能介绍

用途

HyperFrames Keyframes 用于在 HyperFrames 合成中为视觉元素编写关键帧动画，覆盖推进/拉远(punch-in/punch-out)、缩放、重新取景、Ken Burns 运镜、镜头移动、视觉匹配或甩镜(vsso)切换等场景。其核心主张是：关键帧是一份“姿态契约”——包含可见状态、连续的主体身份、可定位的运行时以及经过验证的像素。

该技能有明确的边界：关键帧只负责视觉运动，不负责剪辑拼装。源范围硬切、裁剪、拼接、重排属于 /hyperframes-core；跨轨重叠剪辑加不透明度关键帧可实现交叉淡化，声音淡入淡出使用 /hyperframes-audio。视觉过渡或裁切处理不等于时间轴上的源裁剪或拼接。

主要能力

资料按“创作者请求—真实机制”列出了对应关系：

  • 推进/拉远：在剪辑内的非计时视觉或裁切包裹层上，用 x/y 或百分比位移配合 scale 关键帧；硬推进用 set/短 tween，平滑移动用 tween。
  • 平滑多状态缩放或重新取景：保持一个主体包裹层存活，以带分段缓动的“姿态阶梯”编写多个缩放/取景状态。
  • 平移、重新取景或 Ken Burns 运镜：对包裹层做位移加缩放；几何由作者编写，不是人脸跟踪或自动语义取景。
  • 链式镜头运动：在一条注册的可定位时间轴上串联带标签的变换节拍。
  • 匹配剪辑或甩镜：视觉交接由 /hyperframes-animation 负责，基础组件由 /hyperframes-registry 提供；关键帧保留作者编写的几何、方向与速度，无自动匹配帧发现。
  • 裁切与遮罩取景：在内层视觉包裹层上插值 clip-path 或 mask，在不改变源时间的前提下裁切/取景；多边形关键帧可形成多边形/遮罩过渡。
  • 方向性擦除或光圈/揭示剪辑：在重叠视觉剪辑上动画化遮罩/裁切边界。
  • 分屏交接：由 core 放置两个视觉剪辑，再对其内层裁切/遮罩包裹层和分隔线几何做关键帧。
  • 定速源重定时：由 /hyperframes-core 提供归一化的 data-playback-rate (0.1..10)，对整个媒体元素恒定。
  • 源速度渐变：在 <video>/<audio> 的 data-automation 中放置速率通道(t 为剪辑秒，v 0.1..10，对数插值)，优先级高于恒定速率。
  • 冻结/保持：视觉姿态、源最终帧或已完成的子合成可以保持；不支持任意源中间帧冻结，需预处理静帧/派生片段并作为单独剪辑放置，再用另一源范围继续。

使用方式

流程为：识别动画主体、可见状态、最终状态与运行时；选择能证明提示的最小机制；在声明的运行时内编写可定位关键帧；构建完成后才注册运行时实例；用 hyperframes check、hyperframes keyframes、聚焦 --shot 和快照验证；若验证失败则修正源关键帧并重跑最小失败诊断再渲染。

运行时规则：

  • GSAP：页面加载时或 document.fonts.ready 内构建，构建完成后再注册；使用 gsap.timeline({ paused: true })；注册为 window.__timelines[compositionId]；注册键需与 data-composition-id 匹配；渲染关键运动不要调用 tl.play()；重复次数有限。
  • CSS keyframes：有限时长与迭代次数；确定性延迟；animation-fill-mode: both；时间属于剪辑时使用 data-start。
  • Anime.js：同步创建；autoplay: false；有限时长与循环；每个实例推入 window.__hfAnime。
  • WAAPI：有限时长；fill: "both"；确定性构建；文本界面不列出 WAAPI，需用 --shot(可定位 WAAPI)和快照验证。

渲染关键运动严禁使用：Date.now()、performance.now()、未播种的 Math.random()、hover/scroll 触发、定时器、异步构建完成前注册的时间轴、未注册的 requestAnimationFrame、无限循环。

资料提供了 GSAP 骨架代码示例(含 tl.addLabel 与 keyframes 数组写法)，并提示用标签表示语义状态、用位置参数代替链式延迟、对后续触碰同一属性的 from()/fromTo() 使用 immediateRender: false。关键帧形式包括数组关键帧、百分比关键帧、属性数组、父级 ease: "none" 配合逐停缓动、easeEach。不应照抄示例中的数值距离或时长，应据实际合成几何与时长推导。

通道选择上，优先合成器/视觉通道(x/y/z、xPercent/yPercent、scale、rotationX/Y/Z、skew、transformOrigin、svgOrigin、opacity、autoAlpha、clip-path、masks、CSS 变量、SVG path/dash 值、相机变换、着色器 uniform)，避免布局/生命周期通道(top/left/right/bottom、width/height、margin/padding、display、visibility、延迟 DOM 创建等)。可见性变化应使用注册在可定位 GSAP 时间轴上的 autoAlpha，或在明确边界处用零时长 tl.set()；只针对非剪辑元素或剪辑内包裹层，绝不针对 .clip 本身，不要对原生 visibility 做时长 tween，也不要 tween display。

机制选择上按需选用：同一主体换框或换层级用共享元素/FLIP；沿可见路径运动用 path travel；描边生长用 stroke draw；形状变形用 shape interpolation；可见揭示边界用 clip、mask 或着色器 uniform；多项有序运动用 stagger/索引延迟；文字自身运动用行/词/字符/条带细分；表面弯曲拉伸或裁切用父/子反向变换；UI 有状态用显式状态机；场景有深度用 DOM 3D、Three.js 或 WebGL 相机/对象关键帧。

适用场景与限制

适用于需要在 HyperFrames 合成中实现镜头感视觉运动的编辑任务，包括缩放、取景、镜头链、遮罩过渡、速度渐变等。限制包括：不负责剪辑拼接与声音处理；不支持自动匹配帧发现、人脸跟踪或自动语义取景；不支持任意源中间帧冻结；Canvas/WebGL 内部运动需用 --ghost 验证；文本需快照可读帧。平台、收费、价格等信息资料暂未提供。