用途 Helios Signals 是 Helios 提供的基于 Signal 的响应式系统,风格类似 SolidJS 或 Preact Signals,用于在动画场景中高效管理状态。该示例页面演示如何用它构建细粒度响应的动画。
主要能力
- 读取信号:可直接访问 helios.currentFrame 等信号,类型为 ReadonlySignal<number>。
- 派生状态:用 computed() 创建依赖其他信号的派生值,仅在依赖变化时重新计算。
- 副作用:用 effect() 执行 DOM 更新或渲染逻辑,首次立即运行,并在其内部访问的任何信号变化时重新运行。
- 性能:对于复杂依赖图,Signals 比 helios.subscribe() 更高效,因为它只更新细粒度依赖,而非整个状态树。
使用方式 示例给出快速上手代码:从 @helios-project/core 导入 Helios、computed、effect;创建 new Helios({ duration: 10, fps: 60 });读取 helios.currentFrame;用 computed 基于帧计算旋转角度(frame.value / 60 * 360);用 effect 将旋转值写入 DOM 元素的 transform 样式。页面还给出派生状态的写法:用 computed 计算进度(currentFrame / (duration * fps))和宽度(progress * 100 + '%')。
适用场景 适合需要复杂依赖图或性能优化的动画状态管理,例如逐帧驱动的变换、进度条与派生样式等。
限制 资料未提供安装命令、具体版本要求、浏览器兼容性和其他限制说明。