这款Skill用浏览器原生动效做视频

在 HyperFrames 中使用 Web Animations API。

HyperFrames 的 waapi Skill 指导 AI 用浏览器自带的 Web Animations API 编写视频动效。简单元素移动、分批入场或数据生成的关键帧,可以通过这条路径接入合成时间,不必额外使用 GSAP。

它的关键是把播放权交给渲染器。动画初始化后暂停,运行时设置当前时间,元素就显示那个时刻的状态;有限时长与重复次数也让系统能够确定需要渲染多长的视频。

片段开始时间要明确处理。文档提醒,这里的动画时间按整个文档计算,不会自动变成片段自己的局部时间。一个应该晚些出现的元素,需要正确设置延迟或由合成时序控制可见性。

适合已经在 HyperFrames 中制作轻量网页动效的作者。你提供元素和时序,AI 写出接入代码并检查;依赖计时器回调、动画播放完才修改内容的方式,不宜承担渲染关键状态。

分类:设计创作

来源仓库:heygen-com/hyperframes

适合用来做什么

  • 使用 Web Animations API 实现元素动画。
  • 如何查找动画的当前时间并同步其他动画?

安装 waapi

npx skills add https://www.iskills.cc/skills/heygen-com/hyperframes/waapi/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 waapi 的用途与原始说明

浏览全部 Skill 指南