AI Skills
hyperframes-animation

hyperframes-animation

热门

HyperFrames 的所有动画知识——原子运动规则、多阶段场景蓝图、场景过渡、更广泛的动效设计技巧，以及七种运行时适配器（默认 GSAP，外加 Lottie、Three.js、Anime.js、CSS 关键帧、Web Animations API、TypeGPU）。用于任何动效或动画任务：选择 2-4 条规则进行组合，或加载蓝图，或查询运行时特定 API（例如 GSAP 缓动函数 / Lottie 播放器 / Three.js 混合器）。HyperFrames 原生特性：单一暂停时间线，可安全定位，确定性。

3.1万Star
3036Fork
更新于 2026/6/25
获取 Skill源代码

相关 Skills

nodejs-keccak25624万weather38万everything-claude-code-conventions23万
SKILL.md
只读
名称
hyperframes-animation
描述

HyperFrames 的所有动画知识——原子运动规则、多阶段场景蓝图、场景过渡、更广泛的动效设计技巧，以及七种运行时适配器（默认 GSAP，外加 Lottie、Three.js、Anime.js、CSS 关键帧、Web Animations API、TypeGPU）。用于任何动效或动画任务：选择 2-4 条规则进行组合，或加载蓝图，或查询运行时特定 API（例如 GSAP 缓动函数 / Lottie 播放器 / Three.js 混合器）。HyperFrames 原生特性：单一暂停时间线，可安全定位，确定性。

HyperFrames 动画

所有动效知识集中在一个技能中：规则（原子配方）、蓝图（多阶段场景模板）、过渡（场景间切换）、技巧（更广泛的动效设计模式）和适配器（各运行时 API）。

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

默认：组合原子规则

从 rules-index.md 中选择 2-4 条规则，用一条暂停的 GSAP 时间线将它们组合在一起，完成。这比从蓝图开始更快，代码量更少。

何时加载蓝图

  • 场景与现有的预设计多阶段模板匹配（品牌展示、社交证明、演示页面滚动高亮等），并且重用其阶段流水线能节省实际创作时间
  • 你需要一个复杂 4-5 阶段编排的可运行真实代码

蓝图位于 blueprints-index.md。每个条目指向 blueprints/<id>.md（配方）和 examples/<id>.html（可运行示例）。不要随意读取；只有在已经决定需要场景级编排时才加载。

路由

想要… 读取
按触发条件/标签选择原子运动模式 rules-index.md
阅读某条规则的完整 HTML / CSS / GSAP 配方 rules/<name>.md
选择多阶段场景模板 blueprints-index.md
阅读某个蓝图的完整配方 blueprints/<id>.md + examples/<id>.html
编写场景过渡（CSS 驱动，在两个片段之间） transitions/overview.md, transitions/catalog.md
查找更广泛的动效设计技巧 techniques.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
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，无 repeat: -1，无对后续场景片段的 gsap.set，无 display / visibility 动画，无在 async / setTimeout / Promise 内构建时间线）。此处不再赘述。

在核心契约基础上增加的动画制作要求：

  • 预计算布局常量——绝不在补间时从 getBoundingClientRect() 推导位置。补间时的 DOM 测量会不同步，因为渲染器并行采样；在组合设置时一次性计算坐标并复用。
  • 空间运动仅使用 GSAP 变换别名（x、y、scale、rotation）。核心的允许列表也允许 opacity / color / backgroundColor / borderRadius 用于非空间属性补间——但绝不允许 width / height / top / left 用于布局变化。

脚本

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

读取注册在 window.__timelines 上的每条 GSAP 时间线，枚举补间，采样边界框，计算标志，输出 animation-map.json。用于在创作后审计编排（死区、交错一致性、生命周期警告）。

另请参阅

  • hyperframes-core — 组合结构、数据属性、子组合、确定性渲染契约
  • hyperframes-creative — 调色板、排版、叙事、节拍规划（非动画创意方向）
  • hyperframes-cli — npx hyperframes lint / validate / inspect / preview / render