用途:该技能面向需要在 SolidJS 组件中集成 Helios 动画引擎的开发者,提供一套可复用的组合模式,使 Helios 的帧状态变更能以 SolidJS 信号的形式参与响应式更新。
主要能力:
- 响应式状态封装:提供 createHeliosSignal 辅助函数,用 createSignal 保存 Helios 的 getState() 结果,并通过 helios.subscribe 在状态变化时更新信号,返回一个可读取当前帧状态的访问器。
- 自动清理订阅:在 onCleanup 中调用 unsubscribe,确保组件卸载时解除 Helios 订阅。
- Canvas 2D 绘制模式:示例展示在 createEffect 中读取信号的 currentFrame、width、height,并对 canvas 上下文执行清除与绘制。
- Three.js 集成模式:示例展示在 onMount 中初始化场景、相机、渲染器,并在 createEffect 中根据信号的 currentTime 更新物体旋转后调用 renderer.render,同时在 onCleanup 中释放渲染器、几何体与材质。
使用方式: 先创建 Helios 实例(示例中设置 duration: 10、fps: 30、width: 1920、height: 1080),可直接在模块级或通过上下文初始化,也可采用挂在 window 上的单例模式。随后用 createHeliosSignal(helios) 获取响应式访问器,在组件的 createEffect 中读取信号并执行命令式绘制或渲染逻辑;组件返回 canvas 元素,并通过 ref 绑定。示例中调用了 helios.bindToDocumentTimeline() 以绑定外部控制。
适用场景: 在 SolidJS 项目中制作逐帧动画、二维 Canvas 合成、Three.js 三维动画或需要与 Helios 时间轴同步的可视化组件。
关键概念与限制: SolidJS 信号本身是细粒度更新,但 Helios 每帧(30–60 次/秒)都会更新,因此常规做法是把整个状态包进一个信号,再由 createEffect 触发命令式绘制。渲染逻辑属于命令式操作,需要在 createEffect 中完成。组件卸载时必须使用 onCleanup 取消订阅并释放资源,否则可能造成泄漏。资料未提供包安装命令、版本要求、浏览器兼容性及其他平台支持信息,暂未提供。