运动

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

pnpm add glazejs motion

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" },
})

<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 本身：

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。

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

<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 播放、移除媒体查询监听器和观察器，并恢复原始内联样式。