文档

文档

React

useVelocity

useVelocity

useVelocity 接受一个motion 值并返回一个新的 motion 值,该值会随着提供的 motion 值的速度更新。

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

return <motion.div drag="x" style={{ x, scale }} />

用法

从 Motion 导入 useVelocity

import { useVelocity } from "motion/react"

将任何数值 motion 值传递给 useVelocity。它将返回一个新的 motion 值,该值会随着原始值的速度更新。

import { useMotionValue, useVelocity } from "framer-motion"

function Component() {
  const x = useMotionValue(0)
  const xVelocity = useVelocity(x)

  useMotionValueEvent(xVelocity, "change", latest => {
    console.log("Velocity", latestVelocity)
  })
  
  return <motion.div style={{ x }} />
}

任何数值 motion 值都有效。甚至是从 useVelocity 返回的值。

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

useVelocity 接受一个motion 值并返回一个新的 motion 值,该值会随着提供的 motion 值的速度更新。

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

return <motion.div drag="x" style={{ x, scale }} />

用法

从 Motion 导入 useVelocity

import { useVelocity } from "motion/react"

将任何数值 motion 值传递给 useVelocity。它将返回一个新的 motion 值,该值会随着原始值的速度更新。

import { useMotionValue, useVelocity } from "framer-motion"

function Component() {
  const x = useMotionValue(0)
  const xVelocity = useVelocity(x)

  useMotionValueEvent(xVelocity, "change", latest => {
    console.log("Velocity", latestVelocity)
  })
  
  return <motion.div style={{ x }} />
}

任何数值 motion 值都有效。甚至是从 useVelocity 返回的值。

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

useVelocity 接受一个motion 值并返回一个新的 motion 值,该值会随着提供的 motion 值的速度更新。

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

return <motion.div drag="x" style={{ x, scale }} />

用法

从 Motion 导入 useVelocity

import { useVelocity } from "motion/react"

将任何数值 motion 值传递给 useVelocity。它将返回一个新的 motion 值,该值会随着原始值的速度更新。

import { useMotionValue, useVelocity } from "framer-motion"

function Component() {
  const x = useMotionValue(0)
  const xVelocity = useVelocity(x)

  useMotionValueEvent(xVelocity, "change", latest => {
    console.log("Velocity", latestVelocity)
  })
  
  return <motion.div style={{ x }} />
}

任何数值 motion 值都有效。甚至是从 useVelocity 返回的值。

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

useVelocity

示例

超越基础

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

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

加载中...
保持关注

订阅以获取最新新闻和更新。

保持关注

订阅以获取最新新闻和更新。