01 dragConstraints 可拖动范围

设置可拖动的范围，left 为负，right 为正，top 为负，bottom 为正。

export function Dragable(): Override {
    return {
        // 水平和垂直都能拖动
        // drag: true,
        // 仅水平方向可以拖动
        drag: "x",
        // 向左右最大仅能拖动 100 的距离
        dragConstraints: {
            left: -100,
            right: 100,
        },
        // 拖动时弹性大小(默认为 0.5)
        dragElastic: 0.3,
    }
}

02 dragElastic 拖动弹性

拖动到极限值以外后松手回弹的弹性，值在 0-1 之间，默认为 0.5。设置为 0 时不可回弹，值越大弹性越大。

从左至右参数分别为 0、0.1 和 1

03 dragMomentum

控制拖动松手后有无惯性，默认有惯性（true）。

从左至右参数分别为 false 和 true（默认）

04 dragTransition

Allows you to change dragging inertia parameters. When releasing a draggable Frame, an animation with type inertia starts. The animation is based on your dragging velocity. This property allows you to customize it. See Inertia for all properties you can use.

允许您更改拖动惯性参数，释放可拖动的帧时，将启动具有惯性类型的动画。动画基于您的拖动速度。此属性允许您自定义它。有关可用的所有属性，请参见惯量。

export function dragTransition(): Override {
    return {
        drag: true,
        dragConstraints: {
            left: -100,
            right: 100,
            top: -100,
            bottom: 100,
        },
        dragTransition: { bounceStiffness: 600, bounceDamping: 10 },
    }
}

05 onDrag

拖拽过程中可获得对象的特定信息。同 onPan(event,info){}

// onDrag 同 onPan
export function onDrag(): Override {
    return {
        drag: "x",
        dragConstraints: {
            left: -100,
            right: 100,
        },
        onDrag(event, info) {
            console.log({ point: info.point.x })
            // 从上次位置开始移动的距离
            console.log({ delta: info.delta.x })
            // 从第一次拖动后开始移动的距离
            console.log({ offset: info.offset.x })
            // 速度
            console.log({ velocity: info.velocity.x })
        },
    }
}

06 onDragStart&onDragEnd

同 onDrag

07 motionValue&usetransform

让圆的大小跟随方形的左右拖动改变，[-20,0,20] 对应scale 的[0.5,1,1.5]

import * as React from "react"
import { Frame, Override, motionValue, useTransform } from "framer"

const offsetX = motionValue(0)

export function Dragable(): Override {
    return {
        drag: "x",
        dragConstraints: {
            left: 0,
            right: 0,
        },
        x: offsetX,
        onDrag(event, info) {
            console.log({
                point: info.point.x,
                delta: info.delta.x,
                offset: info.offset.x,
                velocity: info.velocity.x,
            })
            // 从上次位置开始移动的距离
            // console.log({ delta: info.delta.y })
            // 从第一次拖动后开始移动的距离
            // console.log({ offset: info.offset.y })
            // 速度
            // console.log({ velocity: info.velocity.y })
        },
    }
}

export function OpacityChange(): Override {
    const scale = useTransform(offsetX, [-20, 0, 20], [0.5, 1, 1.5])
    return {
        scale: scale,
    }
}

08 useAnimation

当对象向上拖动距离大于 20 时，自动动画到向上 100 的位置。

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

let controls

export function DragStop(): Override {
    const controls = useAnimation()
    return {
        drag: "y",
        dragConstraints: {
            top: 0,
            bottom: 0,
        },
        animate: controls,
        onDragEnd(event, info) {
            if (info.point.y < -20) {
                controls.start({
                    y: -100,
                })
            }
        },
    }
}

09 tabs

import * as React from "react"
import { Override, motionValue, useTransform, useAnimation, Data } from "framer"

const appState = Data({
    originX: 0,
})

const dragX = motionValue(0)
let controlsPage1,controlsPage2,controlsShow,controlsFade,controlsShow1,controlsFade1

export function DragPage1(): Override {
    controlsPage1 = useAnimation()
    return {
        x: dragX,
        drag: "x",
        animate: controlsPage1,
        dragConstraints: {
            left: 0,
            right: 0,
        },
        onDrag(event, info) {
            console.log(info.point.x, appState.originX)
            if (info.point.x < -187) {
                appState.originX = 1
            }
        },
        onDragEnd(event, info) {
            if (info.point.x < -187) {
                controlsPage1.start({
                    x: -375,
                    transition: {
                        duration: 0.2,
                    },
                }),
                    controlsShow.start({
                        opacity: 1,
                        transition: {
                            duration: 0.2,
                        },
                    }),
                    controlsFade.start({
                        opacity: 0,
                        transition: {
                            duration: 0.2,
                        },
                    }),
                    controlsShow1.start({
                        opacity: 1,
                        transition: {
                            duration: 0.2,
                        },
                    }),
                    controlsFade1.start({
                        opacity: 0,
                        transition: {
                            duration: 0.2,
                        },
                    })
            }
        },
    }
}

export function DragPage2(): Override {
    const x = useTransform(dragX, [0, -375], [375, 0], { clamp: true })
    return {
        x: x,
    }
}

export function Indicator(): Override {
    const widthIndicator = useTransform(dragX, [0, -187, -375], [56, 162, 60])
    const x = useTransform(dragX, [0, -187, -375], [20, 20, 125])
    return {
        width: widthIndicator,
        left: x,
        originX: appState.originX,
    }
}

export function Show(): Override {
    controlsShow = useAnimation()
    return {
        animate: controlsShow,
    }
}

export function Fade(): Override {
    controlsFade = useAnimation()
    return {
        animate: controlsFade,
    }
}

export function Show1(): Override {
    controlsShow1 = useAnimation()
    return {
        animate: controlsShow1,
    }
}

export function Fade1(): Override {
    controlsFade1 = useAnimation()
    return {
        animate: controlsFade1,
    }
}

02 Drag_20200315.framerx.zip
02 Drag_20200317.framerx.zip