Motion 值

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

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

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

<script setup>
  import { motion, useMotionValue } from "motion-v"
  const x = useMotionValue(0)
</script>

<template>
  <motion.div :style="{ x }" />
</template>

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

• 设置和获取它们的状态。

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

• 通过 useTransform 钩子链接 MotionValue。

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

• 订阅更新。

<script setup>
  import { useMotionValue, useTransform} from "motion-v"

  const x = useMotionValue(0)
  const opacity = useTransform(
    x,
    [-200, 0, 200],
    [0, 1, 0]
  )
</script>

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

用法

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

import { useMotionValue } from "motion-v"

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，而不会触发 Vue 重新渲染。Motion 值可以多次更新，但渲染将批处理到下一个动画帧。

一个 motion 值可以保存任何字符串或数字。我们可以使用 get 方法读取它。

x.get() // 100

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

const xVelocity = x.getVelocity()

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

事件

可以通过以下方式将侦听器添加到 motion 值：通过on方法或通过useMotionValueEvent钩子.

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

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

组合

除了 useMotionValue 之外，Motion 还提供了许多用于创建和组合 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 组件，或与更多钩子（如 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))

destroy()

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

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