文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

示例

开始使用

动画

组件

Motion 值

Hooks

集成

JS

React

Vue

示例

开始使用

动画

组件

Motion 值

Hooks

集成

Vue

useVelocity

useVelocity

useVelocity 接受一个motion 值并返回一个新的 motion 值，该值会根据提供的 motion 值的速度进行更新。

<script setup>
const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const scale = useTransform(
  xVelocity,
  [-3000, 0, 3000],
  [2, 1, 2],
  { clamp: false }
)
</script>

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

用法

从 Motion 导入 useVelocity

import { useVelocity } from "motion-v"

将任何数值类型的 motion 值传递给 useVelocity。它将返回一个新的 motion 值，该值会根据原始值的速度进行更新。

<script setup>
import { useMotionValue, useVelocity, useMotionValueEvent } from 'motion-v'

const x = useMotionValue(0)
const xVelocity = useVelocity(x)

useMotionValueEvent(xVelocity, 'change', (latest) => {
  console.log('Velocity', latest)
})
</script>

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

任何数值类型的 motion 值都适用。即使是从 useVelocity 返回的值也可以。

const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const xAcceleration = useVelocity(xVelocity)

useVelocity 接受一个motion 值并返回一个新的 motion 值，该值会根据提供的 motion 值的速度进行更新。

<script setup>
const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const scale = useTransform(
  xVelocity,
  [-3000, 0, 3000],
  [2, 1, 2],
  { clamp: false }
)
</script>

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

用法

从 Motion 导入 useVelocity

import { useVelocity } from "motion-v"

将任何数值类型的 motion 值传递给 useVelocity。它将返回一个新的 motion 值，该值会根据原始值的速度进行更新。

<script setup>
import { useMotionValue, useVelocity, useMotionValueEvent } from 'motion-v'

const x = useMotionValue(0)
const xVelocity = useVelocity(x)

useMotionValueEvent(xVelocity, 'change', (latest) => {
  console.log('Velocity', latest)
})
</script>

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

任何数值类型的 motion 值都适用。即使是从 useVelocity 返回的值也可以。

const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const xAcceleration = useVelocity(xVelocity)

useVelocity 接受一个motion 值并返回一个新的 motion 值，该值会根据提供的 motion 值的速度进行更新。

<script setup>
const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const scale = useTransform(
  xVelocity,
  [-3000, 0, 3000],
  [2, 1, 2],
  { clamp: false }
)
</script>

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

用法

从 Motion 导入 useVelocity

import { useVelocity } from "motion-v"

将任何数值类型的 motion 值传递给 useVelocity。它将返回一个新的 motion 值，该值会根据原始值的速度进行更新。

<script setup>
import { useMotionValue, useVelocity, useMotionValueEvent } from 'motion-v'

const x = useMotionValue(0)
const xVelocity = useVelocity(x)

useMotionValueEvent(xVelocity, 'change', (latest) => {
  console.log('Velocity', latest)
})
</script>

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

任何数值类型的 motion 值都适用。即使是从 useVelocity 返回的值也可以。

const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const xAcceleration = useVelocity(xVelocity)

useVelocity

示例

超越基础

Motion+是一次性付费，终身会员。

除了高级 Motion 功能、抢先体验内容和私密的 Discord 社区外，您还将解锁访问 90 多个高级示例的源代码，这些示例将此页面上的 API 提升到新的水平。

加载中...
加载中...

获取 Motion+

获取 Motion+

获取 Motion+

useTransform

useAnimate

保持关注

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
站点

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky

保持关注

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
站点

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky