Framer 特训3
上一期我们讨论了 Framer 中我觉得最重要的 2 个概念 States 和 Events. 理解了之后，重要多多实战，如何使用 States 和 Events 实现你需要的交互效果。
本期介绍 2 个 Framer 内置的交互模式 Draggable(可拖曳) 和 Pinchable（可缩放旋转）。
Draggable 模式
越来越多的场景中具有拖曳的交互模式，尤其在手机端中。在 Framer 中，可以通过将一普通图层设置成可拖曳图层，在对齐拖曳效果进行进一步的设置。
操作重点：
- 拖曳的范围
- 拖曳的动效
- 拖曳的事件
# Layers
layerA = new Layer
borderRadius: 10
backgroundColor: '#fff'
height: height
width: width
layerA.center()
# Set draggable layer
# 设置图层可拖曳
layerA.draggable.enabled = true
# 设置图层可拖曳区域
layerA.draggable.constraints = canvas
# Set draggable event
# 拖曳开始，按钮变大
layerA.on Events.DragStart, (e) ->
layerA.animate
scale: 1.2
options:
time: .3
# 先快后慢，符合实际
curve: Bezier.easeOut
#拖曳结束，按钮还原
layerA.on Events.DragEnd, (e) ->
layerA.animate
scale: 1
options:
time: .3
Draggable
注意
- 拖曳元素有三个逻辑值属性(true || false)，overdrag, bounce, momentum. overdrag 用来设置元素能否拖出限定区域。bounce 用来设置元素能否弹回限定区域。momentum 用来设置元素拖动时是否具有动量（不会瞬移）。
- DragStart 和 DragEnd 事件用来判断用户是否开始拖动元素，和用户是否已经释放元素
Pinchable 模式
Pinchable 是另外一个经常用到的交互模式，用户可以旋转缩放某一元素，可限定仅可缩放或仅可旋转。比如图片浏览中就常用到该交互方式。
操作重点：
- 创建 Pinchable 图层
- 创建 Pinchable 事件
# Set pinchable layer
layerA.pinchable.enabled = true
# Pinch 结束，图层还原
layerA.on Events.PinchEnd, (e) ->
layerA.animate
scale: 1
rotation: 0
options:
curve: Bezier.easeInOut
time: .5
Pinchable
注意
- Pinchable 也有两个逻辑值属性，scale 和 rotate. 用来设置是否禁止某一操作，默认是都可以。
- PinchEnd 事件用于监听用户是否结束 Pinch 操作。如果不设置图层还原的话，图层会保留在 Pinch 之后的状态。
诚挚的希望您的反馈，我们下期见。
