用途:该技能提供在 Svelte 环境中集成 Helios 的模式,用于构建合成(composition)并利用 Svelte 的响应式机制处理帧更新。
主要能力:
- Store 模式:用 Svelte 的 readable store 包装 Helios 实例,通过 helios.subscribe 将状态同步到 store,再用响应式语句 $: 触发重绘。
- Svelte 5 Runes 模式:用 $state 创建响应式状态类,订阅 Helios 状态更新 currentFrame、isPlaying 等字段,配合 $effect 使用。
- 音频可视化模式:用 derived store 基于当前帧计算 RMS、波形等分析数据。
使用方式:
- 创建 Helios 实例:new Helios({ duration, fps }),可调用 helios.bindToDocumentTimeline()。
- 用 createHeliosStore(helios) 生成可读 store,在组件中通过 $heliosStore 访问状态。
- 在 canvas 上根据 $heliosStore.currentFrame 绘制。
- Svelte 5 中可定义 HeliosState 类,用 $state 声明字段并在构造函数中订阅。
适用场景:在 Svelte 项目中制作基于 Helios 的 canvas 动画、合成渲染或音频可视化。
限制:资料仅提供模式与示例代码,未说明 Helios 的安装方式、版本要求、收费或平台支持;音频分析部分仅给出框架与模拟结果,未提供完整 FFT 实现。