transform
transform 可以将输入值从一个值范围映射到另一个值范围。
const numberToColor = transform( [0, 100], // Input ["#000", "#fff"] // Output ) numberToColor(50) // rgba(128, 128, 128, 1)
用法
从 Motion 导入 transform。
import { transform } from "motion"
注意：React 用户也可以使用useTransformHook 用于motion values.
可以通过传递两个范围来创建转换函数，一个是输入范围，另一个是输出范围
const transformer = transform([0, 100], [0, 360])
现在可以使用输入值调用转换器
transformer(50) // 180
注意
两个范围必须始终具有相同的长度。
输入范围必须始终是线性的数字序列，可以是递增或递减。
输出范围可以是数字、颜色或复杂字符串的非线性序列。
输入和输出范围可以接受任意数量的值
const x = [-100, 0, 100, 200] const opacity = [0, 1, 1, 0] const transformer = transform(x, opacity) transformer(-50) // 0.5 transformer(50) // 1 transformer(150) // 0.5
如果提供 clamp: false，则返回的函数将无限映射
const transformer = transform([0, 100], [0, 360], { clamp: false }) const rotation = transformer(200) // 720
Motion+ 示例
Motion+是一次性付款、终身会员资格，可让您访问不断增长的高级示例的源代码，以及高级组件，例如 Cursor 和 AnimateNumber 以及诸如splitText.
以 transform 为特色的示例包括
transform 可以将输入值从一个值范围映射到另一个值范围。
const numberToColor = transform( [0, 100], // Input ["#000", "#fff"] // Output ) numberToColor(50) // rgba(128, 128, 128, 1)
用法
从 Motion 导入 transform。
import { transform } from "motion"
注意：React 用户也可以使用useTransformHook 用于motion values.
可以通过传递两个范围来创建转换函数，一个是输入范围，另一个是输出范围
const transformer = transform([0, 100], [0, 360])
现在可以使用输入值调用转换器
transformer(50) // 180
注意
两个范围必须始终具有相同的长度。
输入范围必须始终是线性的数字序列，可以是递增或递减。
输出范围可以是数字、颜色或复杂字符串的非线性序列。
输入和输出范围可以接受任意数量的值
const x = [-100, 0, 100, 200] const opacity = [0, 1, 1, 0] const transformer = transform(x, opacity) transformer(-50) // 0.5 transformer(50) // 1 transformer(150) // 0.5
如果提供 clamp: false，则返回的函数将无限映射
const transformer = transform([0, 100], [0, 360], { clamp: false }) const rotation = transformer(200) // 720
Motion+ 示例
Motion+是一次性付款、终身会员资格，可让您访问不断增长的高级示例的源代码，以及高级组件，例如 Cursor 和 AnimateNumber 以及诸如splitText.
以 transform 为特色的示例包括
transform 可以将输入值从一个值范围映射到另一个值范围。
const numberToColor = transform( [0, 100], // Input ["#000", "#fff"] // Output ) numberToColor(50) // rgba(128, 128, 128, 1)
用法
从 Motion 导入 transform。
import { transform } from "motion"
注意：React 用户也可以使用useTransformHook 用于motion values.
可以通过传递两个范围来创建转换函数，一个是输入范围，另一个是输出范围
const transformer = transform([0, 100], [0, 360])
现在可以使用输入值调用转换器
transformer(50) // 180
注意
两个范围必须始终具有相同的长度。
输入范围必须始终是线性的数字序列，可以是递增或递减。
输出范围可以是数字、颜色或复杂字符串的非线性序列。
输入和输出范围可以接受任意数量的值
const x = [-100, 0, 100, 200] const opacity = [0, 1, 1, 0] const transformer = transform(x, opacity) transformer(-50) // 0.5 transformer(50) // 1 transformer(150) // 0.5
如果提供 clamp: false，则返回的函数将无限映射
const transformer = transform([0, 100], [0, 360], { clamp: false }) const rotation = transformer(200) // 720
Motion+ 示例
Motion+是一次性付款、终身会员资格，可让您访问不断增长的高级示例的源代码，以及高级组件，例如 Cursor 和 AnimateNumber 以及诸如splitText.
以 transform 为特色的示例包括
