拖动 Draggable丨Framer 文档 Code

Code

拖动包括物理属性以及很多其他的自定义属性。一个开放性的属性，可以创造很多新的可能。通过计算物体的速度和方向，可以对拖动交互进行更多的控制。

开始 Get Started

用 draggable.enabled 和 true 标签创造一个拖动图层。现在你可以把图层捡起来，拖到别的地方，放在那里。

拖动的方向同样可以限制，通过禁用水平或垂直拖动，默认是都启动的。拖动速度也可以指定，速度可以给拖动交互添加加速度或这减缓拖动速度。

# 创建拖动图层 
layerA.draggable.enabled = true
 
# 禁用垂直拖动 
layerA.draggable.horizontal = true
layerA.draggable.vertical = false
 
#设置速度 
layerA.draggable.speedX = 1
layerA.draggable.speedY = 0

dragging

约束 Constraints

一般来说，需要限制在一个图层可拖动范围，比如拉动刷新手势，只能拖动到一定距离。约束可以实现这种效果，约束有x, y, width and height 这些属性。把约束想象成一个图层，其中包含要拖动的图层。

# 添加一个拖动图层
layerA.draggable.enabled = true
 
# 设置约束框架 
layerA.draggable.constraints =
    x: 0
    y: 0
    width: 160
    height: 80

dragging-constraints

Overdrag，弹性和动量

很可能你已经知道这些术语了，即便你不知道他们的名字。
一个拖动图层可以超出约束范围，虽然会弹回去，这就叫 Overdrag，类似iOS里的Safari，你可以拖动网页超出顶部或底部。
当图层向一个方向移动时，也可以超出约束，这就是 bounce，有点像橡皮筋。
最后，将动量设置为 false 会禁用可拖动层的默认物理。图层仍然可以移动，但是不能再被抛出（大概是说不能再超出约束？）。动量和反弹属性也可以自定义。
可以看下这个例子自定义有约束的拖动图层

# 禁用overdrag 
layerA.draggable.overdrag = false
 
# 禁用弹性 
layerA.draggable.bounce = false
 
# 禁用动量 
layerA.draggable.momentum = false

事件 Events

DragStart、DragMove、DrageEnd是拖动的三个基本事件。当拖动图层移动时事件就被触发了，与 DragMove 事件不同，这些事件包括动量和反弹动画。

# 开始拖动 
layerA.onDragStart ->
    layerA.animate
        scale: 1.1
 
# 拖动后 
layerA.onDragEnd ->
    layerA.animate
        scale: 1

dragging-events

拖动动画 Drag Animation

启用动量和反弹时会出现两个特定事件：DragAnimationDidStart 和 DragAnimationDidEnd。图层动画发生在拖动结束后（DragEnd）。

# 拖动结束后开始动画
layerA.onDragAnimationStart ->
    layerA.animate
        scale: 0.8
 
# 使用动量和弹力
layerA.onDragAnimationEnd ->
    layerA.animate
        scale: 1

dragging-didstart