# 样式 · 动态效果

选择共享光照是跟随指针还是保持固定方向。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/motion/

<a id="choose-an-input-mode"></a>

## 选择动态效果

使用 `system` 可遵循减少动态效果设置。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置，界面在其下方移动时响应光照。再次触摸会更新位置。`dynamic` 会覆盖减少动态效果设置，应由用户主动选择。详情请参阅[动态效果](https://edge.bolerish.com/zh/docs/motion/)。

<a id="compare-motion"></a>

## 选择动态效果

试用以下模式。所选设置会更新全站的共享光照，包括示例卡片。

比较动态效果

```tsx
const light = useLight({ motion: "dynamic" });
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>
```

<a id="pointer-lighting"></a>

## 指针光照

toward 强调朝向指针的边缘，away 则强调相反方向。range 表示光照在表面外部逐渐消失的距离。例如，range: 40 会在指针移到卡片外侧、距离卡片达到 40 CSS 像素时使效果消失，而不是仅照亮指针周围 40 像素的圆形区域。请将指针移到卡片外部，比较不同数值的效果。这些设置不影响固定光照。

指针光照

```tsx
const light = useLight({ motion: 'dynamic', direction: "toward", range: 480 });
```

<a id="options"></a>

## 动态效果值

| 值 | 行为 |
| --- | --- |
| `system` | 遵循减少动态效果和输入偏好。库的默认值。 |
| `dynamic` | 即使开启减少动态效果，也跟随鼠标、笔输入或触摸接触。 |
| `static` | 保持固定方向，忽略指针移动。 |

更多选项请参阅[API 参考](https://edge.bolerish.com/zh/docs/react/provider/#lighting)。

<a id="system"></a>

## System

没有精确悬停设备时，光照以固定模式开始。关闭减少动态效果后，鼠标或笔输入可启用跟踪。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置，界面在其下方移动时响应光照。再次触摸会更新位置。

<a id="dynamic"></a>

## Dynamic

此模式会覆盖减少动态效果设置，应由用户主动选择。在鼠标、笔输入或触摸接触前，效果保持隐藏。

<a id="static"></a>

## Static

为 `staticDirection` 指定有限角度（单位为度）或 `"random"`。示例提供 0°、90°、180°、270° 和 315°。random 在挂载时选择一个共享方向，重渲染和外观变化不会改变该方向。重新挂载可选择新方向。

Static

```tsx
const light = useLight({ motion: 'static', staticDirection: "random" });
```

<a id="accessibility"></a>

## 尊重用户偏好

焦点、选择状态和验证结果不应依赖光照才能识别。输入方式和强制颜色模式的行为见[无障碍](https://edge.bolerish.com/zh/docs/integration/#preserve-native-interactions)。