SuperAPI AI 工具集

example-signals-animation

前端与建站

查看项目

更新于 10-16 03:42

技能介绍

用途:该示例演示如何用 Helios 的 Signal 响应式系统(类似 SolidJS 或 Preact Signals)高效管理动画状态,适合复杂依赖图或性能优化场景。

主要能力:可从 Helios 实例直接读取 Signal,例如 helios.currentFrame 为 ReadonlySignal<number>;用 computed() 创建派生状态,仅在依赖变化时重新求值;用 effect() 执行 DOM 更新或渲染逻辑,effect 立即运行,并在其内部访问的任何 Signal 变化时重新运行。示例中根据帧率计算旋转角度与进度宽度。

必要用法:从 @helios-project/core 导入 Helios、computed、effect;创建 Helios 实例(如 new Helios({ duration: 10, fps: 60 }));在 computed 与 effect 中通过 .value 读取 Signal。

适用场景:需要细粒度更新、复杂依赖关系的动画或状态派生场景。相比 helios.subscribe(),Signals 只更新细粒度依赖,而非整棵状态树,因此在复杂图中更高效。

限制:资料仅提供示例与 API 位置(示例 examples/signals-animation/,API packages/core/src/signals.ts),未说明安装方式、收费、平台与完整 API 细节,这些暂未提供。