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

hyperframes-animation

设计与创作

查看项目

更新于 10-19 18:58

技能介绍

HyperFrames Animation 是一个面向 HyperFrames 合成场景的动画知识技能，集中提供动效规则、场景蓝图、转场、设计技法与运行时适配器，用于在 HyperFrames 项目中编写和审查动画。

一、用途与定位 该技能把 HyperFrames 相关的动画知识收拢到一处，包括：rules（原子动效配方）、blueprints（多阶段场景模板）、transitions（场景与场景之间的转场）、techniques（更广泛的动效设计模式）以及 adapters（面向各运行时 API 的适配说明）。合成结构约定（数据属性、子合成、确定性）不在本技能内，需参考 hyperframes-core。

二、主要能力

  1. 原子规则：rules-index.md 可按触发方式或标签挑选动效模式，rules/<name>.md 提供完整的 HTML / CSS / GSAP 配方。
  2. 场景蓝图：blueprints-index.md 列出多阶段模板（如品牌揭示、社会证明等），blueprints/<id>.md 给出完整配方。
  3. 场景转场：transitions/overview.md 与 transitions/catalog.md 说明以 CSS 驱动的两个片段之间的转场。
  4. 设计技法：techniques.md 提供更广泛的动效设计模式；references/motion-blur.md 说明元素上的运动模糊（快门拖影）及不适用的情况。
  5. 运行时适配：GSAP（时间线、补间、位置参数、变换与性能、缓动与交错、时间线与标签、即用效果配方）、Lottie / dotLottie（After Effects 导出、window.__hfLottie，含角色动画如走路循环、吉祥物、关节木偶、手势）、Three.js / WebGL（3D 场景、AnimationMixer、hf-seek）、Anime.js（window.__hfAnime）、CSS 关键帧（animation-delay / play-state / fill-mode）、Web Animations API（element.animate()、currentTime 定位）、TypeGPU / WebGPU（navigator.gpu、WGSL、计算管线）、HTML-as-texture + WebGL/GLSL 后期特效（通过 drawElementImage 捕获实时 DOM）、命名文本动画效果（通过外部 animate-text 技能提供 24 个 ID）。
  6. 动画分析脚本：scripts/animation-map.mjs 读取 window.__timelines 上注册的所有 GSAP 时间线，枚举补间、采样包围盒、计算标志位并输出 animation-map.json，可用于审查编排中的空档区、交错一致性和生命周期警告。

三、使用方式 默认策略是组合原子规则：从 rules-index.md 挑选 2-4 条规则，用一条暂停的 GSAP 时间线把它们串起来，这比从蓝图起步更快、代码更少。只有当场景与已有的预设计多阶段模板匹配、复用其阶段流水线能真正节省编写时间，或需要复杂 4-5 阶段编排的可运行基准代码时，才加载蓝图，且不要盲目预先读取。 运行时选择上，GSAP 是约 95% 动效工作的默认选择，覆盖时间线编排、变换、缓动与交错，本技能所有原子规则均基于 GSAP；当素材自带预烘焙时间线（通常是 After Effects 导出）时使用 Lottie，包括走路、做手势或反应的字符动画；Three.js 用于 3D 场景、摄像机运动和着色器视觉；Anime.js 用于 GSAP 过重时的轻量补间；CSS 用于简单重复纹样、装饰、微光等，不产生 JavaScript 动画开销；WAAPI 用于不依赖 GSAP 的原生浏览器关键帧；TypeGPU / WebGPU 用于 GPU 渲染画布（粒子、液态玻璃、自定义着色器）。多个运行时可以在同一合成中共存，各自把实例注册到对应全局对象上，便于 HyperFrames 一次性定位全部实例。 动画分析脚本用法：node <SKILL_DIR>/scripts/animation-map.mjs <composition-dir> --out <composition-dir>/.hyperframes/anim-map。该脚本会先从当前项目解析辅助包，再回退到内置的 HyperFrames 包版本引导；仅在技能运行于内置 CLI/技能安装之外且需显式固定引导版本时，设置 HYPERFRAMES_SKILL_PKG_VERSION=<version>。

四、适用场景 适合在 HyperFrames 合成中挑选并实现动效、复用多阶段场景模板、编写场景转场、查询某运行时的 API 用法与效果配方、以及动画完成后审查编排质量。

五、限制与约束 使用前需满足 hyperframes-core 的前置约定：一条暂停时间线；data-duration 决定时长；禁止 Math.random / Date.now / performance.now；没有有限的根 data-duration 时不能用 repeat: -1；不要在页面加载时对后续场景片段执行 gsap.set；不要对 display 或原始 visibility 做补间；时间线须在完全构建后再注册，包括构建发生在其异步回调（如 document.fonts.ready）中的情况。core 允许 GSAP 的 autoAlpha 与在显式时间线边界处的零时长 visibility 设置，但仅可用于片段内的非片段元素或包装元素，.clip 生命周期由框架管理。在 core 约定之上，本技能补充：布局常量须预先计算，绝不在补间时用 getBoundingClientRect() 推导位置，因为渲染器并行采样会导致补间时测量失步；空间运动只能使用 GSAP 变换别名（x、y、scale、rotation），core 的白名单还允许对非空间属性补间 opacity / color / backgroundColor / borderRadius，但绝不能对 width / height / top / left 做布局变化补间。

六、相关技能 hyperframes-core 负责合成结构、数据属性、子合成与确定性渲染约定；hyperframes-creative 负责调色板、排版、旁白、节拍规划等非动画创意方向；hyperframes-cli 提供 npx hyperframes lint / check / snapshot / preview / render 等命令。插件安装时，在运行 setup 或 freshness 命令前，若技能位于 HyperFrames 插件内，需遵循插件执行规则；独立安装则保留上述更新说明。