Motion 值概览

Motion 值跟踪动画值的状态和速度。

它们是可组合的、类似信号的值，性能出色，因为 Motion 可以使用其优化的 DOM 渲染器来渲染它们。

通常，这些值由 motion 自动创建组件。但是对于高级用例，可以手动创建它们。

import { motion, useMotionValue } from "motion/react"

export function MyComponent() {
  const x = useMotionValue(0)
  return <motion.div style={{ x }} />
}

通过手动创建 motion 值，您可以

• 设置和获取其状态。

• 传递给多个组件以同步它们之间的 motion。

• 通过 useTransform Hook 链接 MotionValue。

• 更新视觉属性，而无需触发 React 的渲染周期。

• 订阅更新。

const x = useMotionValue(0)
const opacity = useTransform(
  x,
  [-200, 0, 200],
  [0, 1, 0]
)

// Will change opacity as element is dragged left/right
return <motion.div drag="x" style={{ x, opacity }} />

用法

Motion 值可以使用 useMotionValue Hook 创建。传递给 useMotionValue 的字符串或数字将作为其初始状态。

import { useMotionValue } from "motion/react"

const x = useMotionValue(0)

Motion 值可以通过 style 传递给 motion 组件

<motion.li style={{ x }} />

或者对于 SVG 属性，通过属性 prop 本身传递

<motion.circle cx={cx} />

可以将相同的 motion 值传递给多个组件。

Motion 值可以使用 set 方法更新。

x.set(100)

对 motion 值的更改将更新 DOM，而不会触发 React 重新渲染。Motion 值可以多次更新，但渲染将被批量处理到下一个动画帧。

Motion 值可以容纳任何字符串或数字。我们可以使用 get 方法读取它。

x.get() // 100

包含数字的 Motion 值可以通过 getVelocity 方法返回速度。这会返回按 每秒 计算的速度，以考虑不同设备之间的帧速率变化。

const xVelocity = x.getVelocity()

对于字符串和颜色，getVelocity 将始终返回 0。

事件

可以通过以下方式将监听器添加到 motion 值：通过on方法或通过useMotionValueEventHook.

useMotionValueEvent(x, "change", (latest) => console.log(latest))

可用的事件有 "change"、"animationStart"、"animationComplete" "animationCancel"。

组合

除了 useMotionValue 之外，Motion 还提供了许多 Hook，用于创建和组合 motion 值，例如 useSpring 和 useTransform。

例如，使用 useTransform，我们可以获取一个或多个 motion 值的最新状态，并使用结果创建一个新的 motion 值。

const y = useTransform(() => x.get() * 2)

useSpring 可以创建一个通过弹簧附加到另一个 motion 值的 motion 值。

const dragX = useMotionValue(0)
const dragY = useMotionValue(0)
const x = useSpring(dragX)
const y = useSpring(dragY)

然后，这些 motion 值可以继续传递给 motion 组件，或与更多 Hook（如 useVelocity）组合使用。

API

get()

返回 motion 值的最新状态。

getVelocity()

返回 motion 值的最新速度。如果该值不是数字，则返回 0。

set()

将 motion 值设置为新状态。

x.set("#f00")

jump()

以一种打破与先前值连续性的方式将 motion 值跳转到新状态

• 将 velocity 重置为 0。

• 结束活动动画。

• 忽略附加的效果（例如 useSpring 的弹簧）。

const x = useSpring(0)
x.jump(10)
x.getVelocity() // 0

isAnimating()

如果该值当前正在动画，则返回 true。

stop()

停止活动动画。

on()

订阅 motion 值事件。可用的事件有

• change

• animationStart

• animationCancel

• animationComplete

它返回一个函数，调用该函数将取消订阅监听器。

const unsubscribe = x.on("change", latest => console.log(latest))

在 React 组件内部调用 on 时，应使用 useEffect Hook 包裹，或者改用通过useMotionValueEventHook.

destroy()

销毁并清理此 motion 值的订阅者。

这通常是自动处理的，因此仅当您使用 vanilla motionValue Hook 在 React 渲染周期之外手动创建 motion 值时，此方法才是必要的。