hyperframes-animation

**插件安装：**在运行设置或检查更新命令之前，如果此技能位于 HyperFrames 插件中，请遵循插件执行规则。独立安装请继续遵循下方的更新说明。

HyperFrames 动画

目录

• 默认方式：组合原子规则
• 以下情况加载蓝图
• 路由
• 选择运行时
• 关键约束
• 脚本
• 另请参阅
• 参考文件

此技能汇集了所有动画知识：规则（原子配方）、蓝图（多阶段场景模板）、转场（场景间转换）、技巧（更广泛的动画设计模式）和适配器（各运行时的 API）。

有关组合约定（数据属性、子组合、确定性），请参阅 hyperframes-core。

默认方式：组合原子规则

从 rules-index.md 中挑选 2-4 条规则，用一个暂停的 GSAP 时间线将它们组合起来即可。这比从蓝图开始更快，生成的代码也更少。

以下情况加载蓝图

• 场景符合现有的预设计多阶段模板（品牌亮相、社交证明等），且复用其阶段流程确实能节省编写时间
• 你需要可运行的真实参考代码，来实现复杂的 4-5 阶段编排

蓝图位于 blueprints-index.md 中。每个条目都指向 blueprints/<id>.md（配方）。不要预先加载；只有在确定需要场景级编排后再加载。

路由

想要……	阅读
按触发条件 / 标签选择原子运动模式	rules-index.md
阅读单条规则的完整 HTML / CSS / GSAP 配方	rules/<name>.md
选择多阶段场景模板	blueprints-index.md
阅读单个蓝图的完整配方	blueprints/<id>.md
编写场景转场（由 CSS 驱动，在两个片段之间）	transitions/overview.md、transitions/catalog.md
查阅更广泛的运动设计技巧	techniques.md
运动模糊——元素上的快门拖影，以及何时不该使用	references/motion-blur.md
分析现有合成的动画映射	scripts/animation-map.mjs
GSAP API——时间轴 / 补间 / 位置参数	adapters/gsap.md
GSAP——即插即用的效果配方	rules/gsap-effects.md
GSAP——变换 / 性能	adapters/gsap-transforms-and-perf.md
GSAP——缓动 / 错开	adapters/gsap-easing-and-stagger.md
GSAP——时间轴 / 标签	adapters/gsap-timeline-and-labels.md
Lottie / dotLottie（After Effects 导出、window.__hfLottie）	adapters/lottie.md
角色动画（行走循环、吉祥物、关节木偶、手势）	adapters/lottie.md → Characters
Three.js / WebGL（3D 场景、AnimationMixer、hf-seek）	adapters/three.md
Anime.js（window.__hfAnime）	adapters/animejs.md
CSS 关键帧（animation-delay / play-state / fill-mode）	adapters/css-animations.md
Web Animations API（element.animate()、currentTime 定位）	adapters/waapi.md
TypeGPU / WebGPU（navigator.gpu、WGSL、计算管线）	adapters/typegpu.md
HTML 作为纹理 + WebGL/GLSL 后期特效（通过 drawElementImage 捕获实时 DOM）	adapters/html-in-canvas-patterns.md
命名文本动画效果（通过外部 animate-text 技能提供 24 个 ID）	adapters/animate-text.md

选择运行时

• GSAP 是 95% 动效工作的默认选择，支持时间轴编排、变换、缓动和错开播放。本技能中的所有原子规则都基于 GSAP。
• Lottie 适用于资源本身带有预烘焙时间轴的情况（通常由 After Effects 导出），包括行走、做手势或做出反应的角色。
• Three.js 适用于 3D 场景、摄像机运动和着色器驱动的视觉效果。
• Anime.js 适用于 GSAP 功能过剩时的轻量级补间。
• CSS 适用于简单的重复图案、装饰和微光效果，无需承担 JavaScript 动画开销。
• WAAPI 适用于无需依赖 GSAP 的浏览器原生关键帧。
• TypeGPU / WebGPU 适用于 GPU 渲染的画布（粒子、液态玻璃、自定义着色器）。

同一组合中可以共存多个运行时。每个运行时都会将其实例注册到对应的全局对象，以便 HyperFrames 一次性跳转到所有实例的指定位置。

关键约束

前置要求：hyperframes-core → 单个暂停的时间轴 + 不可协商的规则（单个暂停的时间轴、由 data-duration 决定时长、不得使用 Math.random / Date.now / performance.now、没有有限的根级 data-duration 时不得使用 repeat: -1、不得对后续场景片段使用页面加载时的 gsap.set、不得对 display 或原始 visibility 属性做补间，并且只有在时间轴完全构建完成后才能注册，包括在 document.fonts.ready 等异步回调中构建的情况）。根据 core，GSAP autoAlpha 和位于明确时间轴边界的零时长可见性设置仍然允许。仅对非片段元素或片段内的包装元素使用这些例外；.clip 的生命周期由框架管理。此处无需重述完整约定。

在 core 约定基础上的动画制作补充规则：

• 预先计算布局常量——绝不要在补间时通过 getBoundingClientRect() 推导位置。补间时测量 DOM 会导致不同步，因为渲染器会并行采样；应在组合初始化时计算一次坐标并重复使用。
• 空间运动只能使用 GSAP 变换别名（x、y、scale、rotation）。core 的允许列表还允许对非空间属性进行补间：opacity / color / backgroundColor / borderRadius，但绝不能使用 width / height / top / left 进行布局更改。

脚本

node <SKILL_DIR>/scripts/animation-map.mjs <composition-dir> \
  --out <composition-dir>/.hyperframes/anim-map

读取在 window.__timelines 上注册的所有 GSAP 时间轴，枚举补间、采样边界框、计算标记，并输出 animation-map.json。编写完成后，可用它审核编排（空白区段、错开播放一致性、生命周期警告）。

animation-map.mjs 会优先从当前项目解析辅助包，然后再引导加载捆绑的 HyperFrames 包版本。仅当在捆绑的 CLI / 技能安装之外运行本技能，且需要显式指定引导版本时，才设置 HYPERFRAMES_SKILL_PKG_VERSION=<version>。

另请参阅

• hyperframes-core — 组合结构、数据属性、子组合、确定性渲染约定
• hyperframes-creative — 配色方案、字体排版、旁白、节拍规划（非动画创意指导）
• hyperframes-cli — npx hyperframes lint / check / snapshot / preview / render

参考文件

主题适用时，直接阅读对应文件；索引仍可用于选择不同的方案。

适配器

• 文本效果 — 参考 — 使用此动画运行时或适配器 API 时阅读。
• 用于 HyperFrames 的 Anime.js — 使用此动画运行时或适配器 API 时阅读。
• 用于 HyperFrames 的 CSS 动画 — 使用此动画运行时或适配器 API 时阅读。
• 缓动、交错和基于函数的值 — 使用此动画运行时或适配器 API 时阅读。
• 时间线和标签 — 使用此动画运行时或适配器 API 时阅读。
• 变换和性能 — 使用此动画运行时或适配器 API 时阅读。
• HyperFrames GSAP — 使用此动画运行时或适配器 API 时阅读。
• Canvas 中的 HTML 模式 — 使用此动画运行时或适配器 API 时阅读。
• 用于 HyperFrames 的 Lottie — 使用此动画运行时或适配器 API 时阅读。
• 用于 HyperFrames 的 Three.js — 使用此动画运行时或适配器 API 时阅读。
• 用于 HyperFrames 的 TypeGPU / WebGPU — 使用此动画运行时或适配器 API 时阅读。
• 用于 HyperFrames 的 Web Animations API — 使用此动画运行时或适配器 API 时阅读。

蓝图

• agent-progress-theater — Agent 进度剧场 — 编排这一多阶段场景时阅读。
• camera-journey — 镜头旅程 — 编排这一多阶段场景时阅读。
• comparison-split — 对比卡片分屏 — 编排这一多阶段场景时阅读。
• constellation-hub — 星座 / 中心与卫星 — 编排这一多阶段场景时阅读。
• cta-morph-press — CTA 变形与按压 — 编排这一多阶段场景时阅读。
• cursor-ui-demo — 光标驱动的 UI 演示 — 编排这一多阶段场景时阅读。
• dataviz-countup — 数据可视化 / 数字递增 — 编排这一多阶段场景时阅读。
• device-surface-showcase — 设备 / 界面展示 — 编排这一多阶段场景时阅读。
• fixed-anchor-cycle — 固定锚点，世界轮转 — 编排这一多阶段场景时阅读。
• grid-card-assemble — 网格 / 卡片组装 — 编排这一多阶段场景时阅读。
• kinetic-type-beats — 动态文字节拍 — 编排这一多阶段场景时阅读。
• logo-assemble-lockup — Logo 组装 → 组合标志 — 编排这一多阶段场景时阅读。
• overwhelm-surround — 压迫 / 逼近 — 编排这一多阶段场景时阅读。
• panel-edit-live-sync — 面板编辑，实时同步 — 编排这一多阶段场景时阅读。
• prompt-type-submit-generate — 输入提示词、提交并生成 — 编排这一多阶段场景时阅读。
• spatial-pan-stations — 空间平移 / 场景站点 — 编排这一多阶段场景时阅读。
• ticker-takeover — 滚动字幕移位 / 接管 — 编排这一多阶段场景时阅读。
• titlecard-reveal — 标题卡 / 单卡揭示 — 编排这一多阶段场景时阅读。
• transcript-scroll-artifact-reveal — 转录文本滚动与成果揭示 — 编排这一多阶段场景时阅读。
• typewriter-reveal — 打字机式揭示 — 编排这一多阶段场景时阅读。
• video-text-pivot — 视频 → 文本转换 — 编排这一多阶段场景时阅读。
• zoom-out-workspace-reveal — 缩小镜头揭示工作区 — 编排这一多阶段场景时阅读。

指南

• 蓝图（经过验证的形式） — 选择场景蓝图时阅读。
• 规则索引 — 根据触发条件或标签选择原子级动态规则时阅读。
• 视觉技巧参考 — 选择更广泛的动态设计技巧时阅读。

参考资料

• 动态模糊 — 为任意动画元素添加快门拖影 — 选择元素级动态模糊及其限制时阅读。

规则

• 3D Camera Flight — 应用此原子运动配方时请阅读。
• 3D Page Scroll — 应用此原子运动配方时请阅读。
• 3D Text Depth Layers — 应用此原子运动配方时请阅读。
• AI Tracking Box — 应用此原子运动配方时请阅读。
• Ambient Glow Bloom — 应用此原子运动配方时请阅读。
• Anchored Layout Expand — 应用此原子运动配方时请阅读。
• ASR Keyword Glow — 应用此原子运动配方时请阅读。
• Avatar Cloud Network — 应用此原子运动配方时请阅读。
• Two-Phase Camera Cursor Tracking — 应用此原子运动配方时请阅读。
• Card Morph Anchor — 应用此原子运动配方时请阅读。
• Center-Outward Expansion — 应用此原子运动配方时请阅读。
• Chart Scrub Readout — 应用此原子运动配方时请阅读。
• Chromatic Glitch — 应用此原子运动配方时请阅读。
• Context-Sensitive Cursor — 应用此原子运动配方时请阅读。
• Control-Target Sync — 应用此原子运动配方时请阅读。
• Coordinate Target Zoom — 应用此原子运动配方时请阅读。
• Counting with Dynamic Scale — 应用此原子运动配方时请阅读。
• CSS Patterns for Marker Highlighting — 应用此原子运动配方时请阅读。
• Cursor Click Ripple — 应用此原子运动配方时请阅读。
• Cursor Drag — 应用此原子运动配方时请阅读。
• Depth-of-Field Blur (Selective Focus / Rack Focus) — 应用此原子运动配方时请阅读。
• Depth Scatter ↔ Assemble — 应用此原子运动配方时请阅读。
• Discrete Text Sequence — 应用此原子运动配方时请阅读。
• Dynamic Content Sequencing — 应用此原子运动配方时请阅读。
• Gradient Text Sweep — 应用此原子运动配方时请阅读。
• GSAP Effects for HyperFrames — 应用此原子运动配方时请阅读。
• Hacker Flip 3D Reveal — 应用此原子运动配方时请阅读。
• Kinetic Beat Slam — 应用此原子运动配方时请阅读。
• Motion-Blur Streak — 应用此原子运动配方时请阅读。
• Multi-Cursor Choreography — 应用此原子运动配方时请阅读。
• Multi-Phase Camera — 应用此原子运动配方时请阅读。
• Nudge Curve — 应用此原子运动配方时请阅读。
• Orbit with 3D Entry — 应用此原子运动配方时请阅读。
• Particle Burst — 应用此原子运动配方时请阅读。
• Physics Press Reaction (Cursor + Element Synced) — 应用此原子运动配方时请阅读。
• Press-Release Spring Chain — 应用此原子运动配方时请阅读。
• Reactive Displacement — 应用此原子运动配方时请阅读。
• Scale-Swap Transition — 应用此原子运动配方时请阅读。
• Sine Wave Loop (subtle jitter / bounded ambient) — 应用此原子运动配方时请阅读。
• Split Tilt Cards — 应用此原子运动配方时请阅读。
• Spring-Pop Entrance — 应用此原子运动配方时请阅读。
• Stat Bars & Fills — 应用此原子运动配方时请阅读。
• SVG Icon Enrichment — 应用此原子运动配方时请阅读。
• SVG Path Draw — 应用此原子运动配方时请阅读。
• Theme Crossfade Morph — 应用此原子运动配方时请阅读。
• Vertical Spring Ticker (Slot Machine) — 应用此原子运动配方时请阅读。
• Viewport Change (Virtual Camera) — 应用此原子运动配方时请阅读。
• Waterfall Entry — 应用此原子运动配方时请阅读。

转场

• 转场注册表 — 机器可读的事实来源 — 选择或实现此场景转场时阅读。
• 转场目录 — 选择或实现此场景转场时阅读。
• 3D — 选择或实现此场景转场时阅读。
• 模糊 — 选择或实现此场景转场时阅读。
• 覆盖 — 选择或实现此场景转场时阅读。
• 破坏 — 选择或实现此场景转场时阅读。
• 溶解 — 选择或实现此场景转场时阅读。
• 扭曲 — 选择或实现此场景转场时阅读。
• 网格 — 选择或实现此场景转场时阅读。
• 光效 — 选择或实现此场景转场时阅读。
• 机械 — 选择或实现此场景转场时阅读。
• 其他 — 选择或实现此场景转场时阅读。
• 线性 / 推动 — 选择或实现此场景转场时阅读。
• 径向 / 形状 — 选择或实现此场景转场时阅读。
• 缩放 / 放大 — 选择或实现此场景转场时阅读。
• 场景转场 — 选择或实现此场景转场时阅读。