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-v"

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，即使输入超出提供的范围，也将继续映射。

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

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

ease

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

这些必须是 JavaScript 函数。

<script setup>
import { cubicBezier, circOut, useTransform } from 'motion-v'

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) }
)
</script>

mixer

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

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

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