SuperAPI AI 工具集

example-solid

前端与建站

查看项目

更新于 10-15 17:26

技能介绍

用途:将 Helios 集成到 SolidJS 组件中,用 SolidJS 信号管理帧状态,实现高性能的响应式动画合成。

主要能力:提供 createHeliosSignal 辅助函数,把 Helios 实例包装为 SolidJS 信号;通过 helios.subscribe 更新信号,并在 onCleanup 中取消订阅;结合 createEffect 触发命令式 canvas 绘制逻辑;可与 Three.js 渲染循环同步。

使用方式:先创建 Helios 实例(如 new Helios({ duration: 10, fps: 30, width: 1920, height: 1080 })),可按需调用 helios.bindToDocumentTimeline();再实现 createHeliosSignal(helios) 返回响应式访问器;在组件中用 createEffect 读取状态并绘制到 canvas;组件卸载时用 onCleanup 清理订阅与渲染器资源。官方示例文件:examples/solid-animation-helpers/src/lib/createHeliosSignal.js、examples/solid-canvas-animation/、examples/solid-threejs-canvas-animation/。

限制:因 Helios 每帧(30-60 次/秒)更新,通常将整个状态包在信号中;需确保正确清理订阅,避免内存泄漏。其他平台支持与收费信息暂未提供。