第一种：onDrag的info.point.x

这种不能实时更新

视频：

代码：

import { Override, Data } from "framer"
const data = Data({
    handleX: 0,
})
export function Handle(): Override {
    return {
        drag: "x",
        dragConstraints: {
            right: 320,
            left: -320,
        },
        dragElastic: 0.1,
        onDrag(event, info) {
            data.handleX = info.point.x
        },
    }
}
export function LeftPanel(props): Override {
    return {
        width: props.width + data.handleX,
    }
}
export function RightPanel(props): Override {
    return {
        width: props.width - data.handleX,
    }
}
//当这种Drag或者是Scroll的时候，拖动或者滑动的速度快一点，
//通过onDrag传递的info.point.x的值和被驱动值不能实时同步。
//为了解决这个问题，framer推出了motionValue

第二种：motionValue 和 useTransform

视频

代码

import { Override, motionValue ,useTransform} from "framer"

const handleX = motionValue(0)

handleX.onChange( value => {
    console.log(value)
} )

export function Handle(): Override {
    return {
        drag: "x",
        dragConstraints: {
            right: 320,
            left: -320,
        },
        dragElastic: 0.1,
        x:handleX
    }
}

export function LeftPanel(props): Override {
    const width = useTransform(handleX, (value) => {
        return(
            props.width + value
        )
    })
    return {
        width: width
    }
}

export function RightPanel(props): Override {
    const width = useTransform(handleX, (value) => {
        return (
            props.width - value
        )
    })
    return {
        width: width
    }
}

源文件：

DragHandle_Starter.framerx.zip