Transfrom

transform(inputValue, inputRange, outputRange, options): T

这个方法能把传入的inputValue转换成inputRange和outputRange映射后的在outputRange范围内的映射值。返回一个数据的类型决定于你传入数据的类型。

当你传入的inputRange是一个[0,200]的数组，同时你传入的outputRange是[0,1]，那么这个函数返回的是就是0到1范围内的一个数，当然，前提是你传入的数据是在0-200范围内的。你传入的值必须是这个连续范围内一个数。outputValue范围类型支持数字、颜色、投影、数组和对象以及更多。每一个返回的值的类型都和输入的inputValue值保持一致。

import * as React from "react"
import { Frame, transform } from "framer"

export function MyComponent() {
   const inputRange = [0, 200]
   const outputRange = [0, 1]
   const output = transform(100, inputRange, outputRange)

   // Returns 0.5
   return <Frame>{output}</Frame>
}

inputValue: number 一个需要被转换的数据
inputRange: number[] inputValue的值的范围
outputRange: T[] 支持多种数据类型，比如numbers, colors, shadows, arrays和objects
options: TransformOptions<T> Clamp: 是否现在数据在给定的范围内，默认是true
returns: T

Ranges

transform方法同样也支持传入的范围数组包含的数据超过2个。比如说下面这个例子，当inputValue是[ -200, -100, 100, 200 ]，outputValue 范围是[ 0, 1, 1, 0 ]，那么这个函数会返回：

- 当inputValue的值在 -200 到 -100之间，那么返回一个值是0到1范围的

- 当inputValue的值在-100 到 100之间，那么返回的值都是1

- 当inputValue的值在100 到 200之间，那么返回的值是1到0的范围

import * as React from "react"
import { Frame, transform } from "framer"

export function MyComponent() {
  const inputRange = [-200, -100, 100, 200]
  const outputRange = [0, 1, 1, 0]
  const output = transform(150, inputRange, outputRange)
  // output equals 0.5
  return <Frame>{output}</Frame>
}

transform(inputRange, outputRange, options): (inputValue: number) => T

为了提高运行效果，可以先将inputRange和outputRange传入到transform函数中，这将回返回一个函数。然后再将要转换的数据，在需要转换时传进去。

import * as React from "react"
import { Frame, transform } from "framer"

export function MyComponent() {
    const inputRange = [-200, -100, 100, 200]
    const outputRange = [0, 1, 1, 0]
    const convertRange = transform(inputRange, outputRange)
    const output = convertRange(-150)

    // Returns 0.5
    return <Frame>{output}</Frame>
}

inputRange: number[] 连续的数据值范围
outputRange: T[] 支持多种数据类型，比如numbers, colors, shadows, arrays和objects
options: TransformOptions<T> Clamp: 是否现在数据在给定的范围内，默认是true
returns: (inputValue: number) => T