# 运动

Motion 适配器使用 Motion 的 DOM 动画序列。请安装公共包和 Motion：

```sh
pnpm add glazejs motion
```

```ts
import glaze from "glazejs"
import { createMotionAdapter } from "glazejs/motion"
import { animate, stagger } from "motion"

const animations = glaze({
  adapter: createMotionAdapter({ animate, stagger }),
  breakpoints: { md: "(min-width: 768px)" },
  defaults: { element: "duration-0.6" },
  presets: { rise: "from:opacity-0|y-24" },
})
```

```html
<div data-animate="preset-rise"></div>
<div data-animate="from:opacity-0 to:opacity-1|x-120"></div>
<div data-animate="@md:from:rotate-180|scale-0.5"></div>
```

此设置不需要 GSAP。核心解析、默认值、选择器、预设、监听和生命周期方法在两种引擎中通用。

Motion 14.6 的 DOM 类型声明引用了由 `@types/react` 提供的类型。对于会检查依赖项声明的严格 TypeScript 项目，还应将这些类型作为开发依赖项安装。无需安装 React 本身：

```sh
pnpm add -D @types/react
```

如果你的 TypeScript 配置限制了环境类型包，请在 `compilerOptions.types` 中加入 `"react"`。

## 支持的值

- Motion DOM 属性，值可以是数字或字符串，包括不透明度、变换和颜色。
- `from`、`to` 以及成对的 `from`/`to` 状态。如果没有提供 `to` 值，`from` 动画会以元素的自然样式结束。
- 以秒为单位的数字 `duration`、`delay`、`repeatDelay` 和 `stagger` 值。
- 范围为 0 到 19 的元素 `repeat` 值和布尔型 `yoyo`。如需更长时间或无限重复，请使用时间线重复设置。
- 时间线 `defaults`、`delay`、`repeatDelay`、`repeat` 和 `yoyo`；时间线 `repeat--1` 会无限重复。
- 数字时间线位置、顺序放置、`<`、`>`，以及诸如 `+=0.2`、`-=0.2` 和 `<+=0.2` 的相对偏移量。
- Motion 命名缓动、`linear`/`none` 和常见的 GSAP 缓动名称：`power0` 到 `power4`、`sine`、`expo`、`circ` 和 `back`，并带有 `.in`、`.out` 或 `.inOut` 后缀。
- GSAP 旋转别名，例如映射到 Motion 的 `rotate` 的 `rotation`。

例如，让子元素按顺序播放动画并产生重叠：

```html
<div data-animate="tl defaults:duration-0.6">
  <div data-animate="from:opacity-0|y-24"></div>
  <div data-animate="from:opacity-0|y-24 tl:[-=0.2]"></div>
</div>
```

## 引擎特定限制

对于仅适用于 GSAP 的设置，适配器会抛出错误，包括 ScrollTrigger、GSAP 插件、`autoAlpha`、如 `xPercent` 这样的百分比变换、回调实用工具、嵌套的 `attr`/`css` 对象，以及如 `x-+=100` 这样的相对属性值。百分比时间线位置和对象形式的错开设置也不受支持。需要这些功能时，请使用 GSAP 适配器。

支持相同的实用工具并不意味着两种引擎的插值方式完全相同。Motion 负责自身的动画播放和属性插值。

## 清理

DOM 更新后使用 `animations.refresh()`，或启用 `watch`。拆卸时调用 `animations.destroy()`。它会取消 Motion 播放、移除媒体查询监听器和观察器，并恢复原始内联样式。