useLight
创建并配置光照句柄。
useLight(options?)
返回引用稳定的 Light 句柄,用于在不使用 Edge.Provider 时自行管理光照。选项变化会更新现有光照。将句柄传给 useSurface(light, options) 即可。普通组件树使用 Edge.Provider 就足够了。
useLight 签名
function useLight(options?: LightOptions): Light;| Prop / 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
motion | 'system' | 'dynamic' | 'static' | 'system' | system 遵循减少动态效果和设备偏好。dynamic 即使在减少动态效果开启时也跟随鼠标或笔。static 保持固定方向。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置,界面在其下方移动时响应光照。再次触摸会更新位置。 触摸跟随也遵循所选动态模式:static 保持固定,system 在开启减少动态效果时保持固定。 |
staticDirection | number | 'random' | 315 | 固定光照的方向,单位为度。random 每次挂载选择一个共享方向,并在普通重渲染时保持。数值必须有限。 |
direction | 'toward' | 'away' | 'toward' | toward 使高光朝向指针,away 将方向反转 180 度。所有表面样式均保持这一选择。仅影响跟随指针的光照;固定方向由 staticDirection 控制。 |
range | number | 480 | 动态光照在表面外衰减的距离,以视口 CSS 像素为单位。必须为有限正数。 |
intensity | number | 0.75 | 共享光照强度。必须为 0 到 1 之间的有限值;无效值抛出 RangeError。 |
range 仅影响动态光照。固定光照不随距离衰减,方向由 staticDirection 决定。
light.refresh()
在下一帧重新测量表面的位置和尺寸,即使指针静止也会更新。如果元素的位置或边框粗细发生变化,但未触发尺寸变更通知,请在 React 提交这些更改后调用。
refresh 签名
interface Light { refresh(): void;}尺寸变化和滚动会自动检测。详情请参阅布局更新。