Motion Vue

Overview

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

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

通常，这些由运动组件自动创建。但对于高级用例，也可以手动创建。

<script setup lang="ts">
import { useMotionValue } from 'motion-v'

const x = useMotionValue(0)
</script>

<template>
  <Motion
    style:="{ x }"
  />
</template>

通过手动创建运动值，您可以：

  • 设置和获取其状态。
  • 传递给多个组件以同步它们之间的运动。
  • 通过 useTransform 组合器获取 MotionValues 链。
  • 更新视觉属性而不触发渲染周期。
  • 订阅更新。
<script setup lang="ts">
import { useMotionValue, useTransform } from 'motion-v'

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

<template>
  <Motion
    style:="{ x, opacity }"
  />
</template>

使用

运动值可以使用 useMotionValue 组合器创建。传递给 useMotionValue 的字符串或数字将作为其初始状态。

import { useMotionValue } from 'motion-v'

const x = useMotionValue(0)

运动值可以通过运动组件通过样式传递：

<Motion :style={{ x }} />

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

<Motion as="circle" :cx={{ x }} />

可以传递相同的动作值给多个组件。

运动值可以使用设置方法进行更新。

x.set(100)

修改运动值将更新 DOM 而不会触发重新渲染。运动值可以多次更新，但渲染将批量到下一个动画帧。

一个动作值可以包含任何字符串或数字。我们可以使用get方法来读取它。

x.get() // 100

运动值包含数字的可以通过getVelocity方法返回速度。此方法返回每秒计算的速度，以考虑设备之间帧率的差异。

const xVelocity = x.getVelocity()

对于字符串和颜色，getVelocity 总是返回 0。

事件

监听器可以通过on方法或useMotionValueEvent组合式添加到运动值中。

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

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

组成

超出useMotionValue，Motion Vue 提供了一系列用于创建和组合运动值的可组合组件，如useSpring和useTransform。

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

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

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

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

这些运动值可以进一步传递给运动组件，或者与更多可组合元素如useVelocity组合。

API

get()

返回运动值的最新状态。

getVelocity()

返回运动值的最新速度。如果值非数值，则返回 0。

set()

设置运动值到新状态。

x.set('#f00')

跳转()

将运动值跳转到新的状态，从而中断从先前值到当前值的连续性：

  • 重置速度为 0。
  • 结束活动动画。
  • 忽略附加效果（例如使用 Spring 的 spring）。
const x = useSpring(0)
x.jump(10)
x.getVelocity() // 0

isAnimating()

返回 true 如果当前值正在动画中。

停止()

停止活动动画。

开启()

订阅运动值事件。可用事件包括：

  • 更改
  • 动画开始
  • 动画取消
  • 动画完成

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

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

您可以在 vue 组件中使用on，或者使用useMotionValueEvent组合式代替。

destroy()

销毁并清理此动作值订阅者。

这通常会被自动处理，因此只有在您使用纯代码 motionValue 组合器在渲染周期外手动创建运动值时，此方法才是必要的。

Layout
useMotionValueEvent