01 MotionValue

追踪动画中值的状态和速度。

By manually creating MotionValues you can:

• Set and get their state.
• Pass to multiple components to synchronise motion across them.
• Chain MotionValues via the useTransform hook.
• Update visual properties without triggering React’s render cycle.

通过创建 motionValue，你可以：

• 设置并获取对象的状态
• 将状态传递到多个组件中以便在他们中间同步动作
• 通过 useTransform方法连接两个motionValue
• 不用触发 React 的渲染流程即可更新视觉参数

02 useTransform

2.1 变换关系

通过此方法创造一个可更改另一个 MotionValue 值的MotionValue

useTransform(parent,transform):MotionValue

const x = motionValue(0)
// y 的值永远是 x 的 2 倍
const y = useTransform(x, value => value*2)

2.2 区间对应

示例：对象在-100 到 100 之间拖动时，其缩放值从 1.5 到 0.5 对应变化：

Here, we’re using two custom Hooks in Framer to transform values from one range to another. The useMotionValue provides an animatable and shareable value, which we’ll use for the x position. Then, we’ll transform that value from a range of [-200, 200] to a range that makes sense for scale.

在 Framer 中我们使用两个 Hook 函数将值从一个范围到另一个范围转换——motionValue 和 useTransform。motionValue 函数提供一个可动画并共享的值，我们可以用作 x 值，然后，我们将这个值从 -200 到 200 的范围转换到对缩放有意义的值 1.5 到 0.5。

import * as React from "react"
import { Override, motionValue, useTransform } from "framer"
export function dragScale(): Override {
    // 创造一个能在多个地方传递的值 x
    const x = motionValue(0)
    // x在 -100 到 100 之间变化时，scale 在 1.5 到 0.5 之间变化
    const scale = useTransform(x, [-100, 100], [1.5, 0.5])
    return {
        x: x,
        drag: "x",
        dragConstraints: {
            left: -100,
            right: 100,
        },
        scale: scale,
    }
}