Framer 10天交互动效特训 - 3

Framer 特训3

上一期我们讨论了 Framer 中我觉得最重要的 2 个概念 States 和 Events. 理解了之后，重要多多实战，如何使用 States 和 Events 实现你需要的交互效果。

本期介绍 2 个 Framer 内置的交互模式 Draggable(可拖曳) 和 Pinchable（可缩放旋转）。

Draggable 模式

越来越多的场景中具有拖曳的交互模式，尤其在手机端中。在 Framer 中，可以通过将一普通图层设置成可拖曳图层，在对齐拖曳效果进行进一步的设置。

操作重点：

1. 拖曳的范围
2. 拖曳的动效
3. 拖曳的事件

# 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

注意

1. 拖曳元素有三个逻辑值属性(true || false)，overdrag, bounce, momentum. overdrag 用来设置元素能否拖出限定区域。bounce 用来设置元素能否弹回限定区域。momentum 用来设置元素拖动时是否具有动量（不会瞬移）。
2. DragStart 和 DragEnd 事件用来判断用户是否开始拖动元素，和用户是否已经释放元素

Pinchable 模式

Pinchable 是另外一个经常用到的交互模式，用户可以旋转缩放某一元素，可限定仅可缩放或仅可旋转。比如图片浏览中就常用到该交互方式。

操作重点：

1. 创建 Pinchable 图层
2. 创建 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

注意

1. Pinchable 也有两个逻辑值属性，scale 和 rotate. 用来设置是否禁止某一操作，默认是都可以。
2. PinchEnd 事件用于监听用户是否结束 Pinch 操作。如果不设置图层还原的话，图层会保留在 Pinch 之后的状态。

诚挚的希望您的反馈，我们下期见。

Reference

特训3 Framer 源码