SuperAPI AI 工具集

example-signals-animation

前端与建站

查看项目

更新于 10-22 08:07

技能介绍

用途 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 + '%')。

适用场景 适合需要复杂依赖图或性能优化的动画状态管理,例如逐帧驱动的变换、进度条与派生样式等。

限制 资料未提供安装命令、具体版本要求、浏览器兼容性和其他限制说明。