01 使用 motionValue 和 useTransorm 传递参数

import * as React from "react"
import { motionValue, useTransform, Override } from "framer"
const position = motionValue(0)
// 拖动把手
export function Knob(): Override {
    return {
        x: position,
        drag: "x",
        dragConstraints: {
            left: 0,
            right: 130,
        },
        dragElastic: 0,
        dragMomentum: false,
    }
}
// 填充区
export function Fill(): Override {
    return {
        width: position,
    }
}
// 拖动范围在 0-130 之间时，缩放在 1-1.5
export function DragScale(): Override {
    const scale = useTransform(position, [0, 130], [1, 1.5])
    return {
        scale: scale,
    }
}

02 数字跟随滑块改变

import * as React from "react"
import { Override, Data } from "framer"
const appState = Data({
    number: "50",
})
//滑块移动时取其值
export function Slider(): Override {
    return {
        onChange: number => {
            //toString() 方法可把一个逻辑值转换为字符串，并返回结果
            appState.number = Math.floor(number).toString()
            console.log(number)
        },
    }
}
//将滑块的值赋予文本
export function Number(): Override {
    return {
        text: appState.number,
    }
}

https://framer.com/projects/Slider-DEhdALNtch1LOUtLqhuG?_ga=2.172530211.129919046.1591273569-105504521.1556699041