文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

示例

开始使用

课程

动画

组件

Motion 值

钩子

集成

指南

JS

React

Vue

示例

开始使用

课程

动画

组件

Motion 值

钩子

集成

指南

React

useTransform

useTransform

useTransform 创建一个新的 motion 值，用于转换一个或多个 motion 值的输出。

const x = useMotionValue(1)
const y = useMotionValue(1)

const z = useTransform(() => x.get() + y.get()) // z.get() === 2

用法

从 Motion 导入

import { useTransform } from "motion/react"

useTransform 可以通过两种方式使用：使用转换函数和通过值映射

// Transform function
useTransform(() => x.get() * 2)

// Value mapping
useTransform(x, [0, 100], ["#f00", "00f"])

转换函数

转换函数是一个返回值的普通函数。

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

在此函数中通过 get() 方法读取的任何 motion 值都将自动订阅。

当这些 motion 值发生变化时，该函数将在下一个动画帧再次运行，以计算新值。

const distance = 100
const time = useTime()
const y = useTransform(() => Math.sin(time.get() / 1000) * distance)

值映射

useTransform 也可以将单个 motion 值从一个值范围映射到另一个值范围。

为了说明，请看这个 x motion 值

const x = useMotionValue(0)

我们可以使用 useTransform 创建一个新的 motion 值，名为 opacity。

const opacity = useTransform(x, input, output)

通过定义 input 范围和 output 范围，我们可以定义如下关系：“当 x 为 0 时，opacity 应为 1。当 x 为两侧 100 像素时，opacity 应为 0”。

const input = [-100, 0, 100]
const output = [0, 1, 0]

两个范围都可以是 任意长度，但必须彼此 长度相同。

输入范围必须始终是一系列递增或递减的数字。

输出范围必须是相同类型的值，但可以是任何顺序。它也可以是任何Motion 可以动画化的值类型，例如数字、单位、颜色和其他字符串。

const backgroundColor = useTransform(
  x,
  [0, 100],
  ["#f00", "#00f"]
)

通过设置 clamp: false，范围将永久映射。例如，在此示例中，我们说“每滚动 100px，再旋转 360deg”

const { scrollY } = useScroll()
const rotate = useTransform(
  scrollY,
  [0, 100],
  [0, 360],
  { clamp: false }
)

选项

通过值映射，我们可以设置一些附加选项。

clamp

默认值： true

如果为 true，则将输出限制在提供的范围内。如果为 false，即使输入超出提供的范围，也会继续映射。

const y = useTransform(x, [0, 1], [0, 2])
const z = useTransform(x, [0, 1], [0, 2], { clamp: false })

useEffect(() => {
  x.set(2)
  console.log(y.get()) // 2, input clamped
  console.log(z.get()) // 4
})

ease

一个缓动函数，或缓动函数数组，用于缓和每个值之间的混合。

这些必须是 JavaScript 函数。

import { cubicBezier, circOut } from "motion"
import { useTransform } from "motion/react"

// In your component
const y = useTransform(x, [0, 1], [0, 2], { ease: circOut })

const z = useTransform(
  x,
  [0, 1],
  [0, 2],
  { ease: cubicBezier(0.17, 0.67, 0.83, 0.67) }
)

mixer

用于混合每对输出值之间的函数。

此函数将使用每对输出值调用，并且必须返回一个新函数，该函数接受介于 0 和 1 之间的进度值，并返回混合值。

这可以用于注入比 Framer Motion 默认值更高级的混合器，例如Flubber用于变形 SVG 路径。

useTransform 创建一个新的 motion 值，用于转换一个或多个 motion 值的输出。

const x = useMotionValue(1)
const y = useMotionValue(1)

const z = useTransform(() => x.get() + y.get()) // z.get() === 2

用法

从 Motion 导入

import { useTransform } from "motion/react"

useTransform 可以通过两种方式使用：使用转换函数和通过值映射

// Transform function
useTransform(() => x.get() * 2)

// Value mapping
useTransform(x, [0, 100], ["#f00", "00f"])

转换函数

转换函数是一个返回值的普通函数。

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

在此函数中通过 get() 方法读取的任何 motion 值都将自动订阅。

当这些 motion 值发生变化时，该函数将在下一个动画帧再次运行，以计算新值。

const distance = 100
const time = useTime()
const y = useTransform(() => Math.sin(time.get() / 1000) * distance)

值映射

useTransform 也可以将单个 motion 值从一个值范围映射到另一个值范围。

为了说明，请看这个 x motion 值

const x = useMotionValue(0)

我们可以使用 useTransform 创建一个新的 motion 值，名为 opacity。

const opacity = useTransform(x, input, output)

通过定义 input 范围和 output 范围，我们可以定义如下关系：“当 x 为 0 时，opacity 应为 1。当 x 为两侧 100 像素时，opacity 应为 0”。

const input = [-100, 0, 100]
const output = [0, 1, 0]

两个范围都可以是 任意长度，但必须彼此 长度相同。

输入范围必须始终是一系列递增或递减的数字。

输出范围必须是相同类型的值，但可以是任何顺序。它也可以是任何Motion 可以动画化的值类型，例如数字、单位、颜色和其他字符串。

const backgroundColor = useTransform(
  x,
  [0, 100],
  ["#f00", "#00f"]
)

通过设置 clamp: false，范围将永久映射。例如，在此示例中，我们说“每滚动 100px，再旋转 360deg”

const { scrollY } = useScroll()
const rotate = useTransform(
  scrollY,
  [0, 100],
  [0, 360],
  { clamp: false }
)

选项

通过值映射，我们可以设置一些附加选项。

clamp

默认值： true

如果为 true，则将输出限制在提供的范围内。如果为 false，即使输入超出提供的范围，也会继续映射。

const y = useTransform(x, [0, 1], [0, 2])
const z = useTransform(x, [0, 1], [0, 2], { clamp: false })

useEffect(() => {
  x.set(2)
  console.log(y.get()) // 2, input clamped
  console.log(z.get()) // 4
})

ease

一个缓动函数，或缓动函数数组，用于缓和每个值之间的混合。

这些必须是 JavaScript 函数。

import { cubicBezier, circOut } from "motion"
import { useTransform } from "motion/react"

// In your component
const y = useTransform(x, [0, 1], [0, 2], { ease: circOut })

const z = useTransform(
  x,
  [0, 1],
  [0, 2],
  { ease: cubicBezier(0.17, 0.67, 0.83, 0.67) }
)

mixer

用于混合每对输出值之间的函数。

此函数将使用每对输出值调用，并且必须返回一个新函数，该函数接受介于 0 和 1 之间的进度值，并返回混合值。

这可以用于注入比 Framer Motion 默认值更高级的混合器，例如Flubber用于变形 SVG 路径。

useTransform 创建一个新的 motion 值，用于转换一个或多个 motion 值的输出。

const x = useMotionValue(1)
const y = useMotionValue(1)

const z = useTransform(() => x.get() + y.get()) // z.get() === 2

用法

从 Motion 导入

import { useTransform } from "motion/react"

useTransform 可以通过两种方式使用：使用转换函数和通过值映射

// Transform function
useTransform(() => x.get() * 2)

// Value mapping
useTransform(x, [0, 100], ["#f00", "00f"])

转换函数

转换函数是一个返回值的普通函数。

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

在此函数中通过 get() 方法读取的任何 motion 值都将自动订阅。

当这些 motion 值发生变化时，该函数将在下一个动画帧再次运行，以计算新值。

const distance = 100
const time = useTime()
const y = useTransform(() => Math.sin(time.get() / 1000) * distance)

值映射

useTransform 也可以将单个 motion 值从一个值范围映射到另一个值范围。

为了说明，请看这个 x motion 值

const x = useMotionValue(0)

我们可以使用 useTransform 创建一个新的 motion 值，名为 opacity。

const opacity = useTransform(x, input, output)

通过定义 input 范围和 output 范围，我们可以定义如下关系：“当 x 为 0 时，opacity 应为 1。当 x 为两侧 100 像素时，opacity 应为 0”。

const input = [-100, 0, 100]
const output = [0, 1, 0]

两个范围都可以是 任意长度，但必须彼此 长度相同。

输入范围必须始终是一系列递增或递减的数字。

输出范围必须是相同类型的值，但可以是任何顺序。它也可以是任何Motion 可以动画化的值类型，例如数字、单位、颜色和其他字符串。

const backgroundColor = useTransform(
  x,
  [0, 100],
  ["#f00", "#00f"]
)

通过设置 clamp: false，范围将永久映射。例如，在此示例中，我们说“每滚动 100px，再旋转 360deg”

const { scrollY } = useScroll()
const rotate = useTransform(
  scrollY,
  [0, 100],
  [0, 360],
  { clamp: false }
)

选项

通过值映射，我们可以设置一些附加选项。

clamp

默认值： true

如果为 true，则将输出限制在提供的范围内。如果为 false，即使输入超出提供的范围，也会继续映射。

const y = useTransform(x, [0, 1], [0, 2])
const z = useTransform(x, [0, 1], [0, 2], { clamp: false })

useEffect(() => {
  x.set(2)
  console.log(y.get()) // 2, input clamped
  console.log(z.get()) // 4
})

ease

一个缓动函数，或缓动函数数组，用于缓和每个值之间的混合。

这些必须是 JavaScript 函数。

import { cubicBezier, circOut } from "motion"
import { useTransform } from "motion/react"

// In your component
const y = useTransform(x, [0, 1], [0, 2], { ease: circOut })

const z = useTransform(
  x,
  [0, 1],
  [0, 2],
  { ease: cubicBezier(0.17, 0.67, 0.83, 0.67) }
)

mixer

用于混合每对输出值之间的函数。

此函数将使用每对输出值调用，并且必须返回一个新函数，该函数接受介于 0 和 1 之间的进度值，并返回混合值。

这可以用于注入比 Framer Motion 默认值更高级的混合器，例如Flubber用于变形 SVG 路径。

useTransform

示例

进阶

Motion+是一次性费用，终身会员资格。

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

正在加载...
正在加载...
正在加载...

获取 Motion+

获取 Motion+

获取 Motion+

useTime

useVelocity

保持关注

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

©2025 Motion Division Ltd.
网站

关于

博客

文档

示例

Motion+

赞助

社交媒体

Discord

GitHub

X/Twitter

Bluesky

保持关注

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

©2025 Motion Division Ltd.
网站

关于

博客

文档

示例

Motion+

赞助

社交媒体

Discord

GitHub

X/Twitter

Bluesky