Framer 10天交互动效特训 - 2

Framer 特训2

上一期我们讨论了 Framer 的特点，和 Layers，Animate 两个功能点，这期在覆盖2个新的知识点。

States 状态

对于状态，我的理解是在多个状态之间进行切换的 Animate。Animate 偏向于一次性展示，跟动画类似，看完就结束了。States 则诠释了对象的多个状态，且在特定的场景下显示特定的状态。

操作重点：

1. 状态的建立
2. 状态的切换

# Create states
layerA.states = 
    
    stateA:
        animationOptions:
            time: .6
            delay: .3
            curve: Bezier.ease
        
    stateB:
        x: 300
        y: 0
        borderRadius: '50%'
        animationOptions:
            time: .6
            delay: .3
            curve: Bezier.ease
        
    stateC:
        x: 300
        y: 300
        backgroundColor: orange
        animationOptions:
            time: .6
            delay: .3
            curve: Bezier.ease
        
    stateD:
        x: 0
        y: 300
        borderRadius: 0
        animationOptions:
            time: .6
            delay: .3
            curve: Bezier.ease

# Switch states

# 初识状态
layerA.stateSwitch("stateA")
# 每隔 time + delay, 循环状态
Utils.interval 1.1, ->
    layerA.stateCycle()

States

注意

1. 状态间切换也是可以添加 animationOptions 的，跟 Animate 是一样的。使用 stateSwitch() 方法可以做到瞬间无动画效果切换。
2. 状态的切换现实中一般不是自动的，而是由事件 Events 来触发的

Events 事件

Framer 内置了许多人和设备间的交互事件，如点击，滚动。和动画监听事件，如动画开始，动画结束。运用事件后，我们便可以创建交互动效了。

操作重点：

1. 事件的建立
2. 事件需要互斥，一次只触发一个事件，避免影响体验

# WRITTEN BY JOEY IN APRIL, 2017
# DEFIEN VARIABLES
height = 100
width  = 100
blue = 'rgba(40,175,250,.5)'
orange = 'rgba(238,186,0,.5)'

canvas = new Layer
    width: 400
    height: 400
    backgroundColor: '#fafafa'
    x: Align.center
    y: Align.center

# Layers 
layerA = new Layer
    x: 0
    y: 0
    parent: canvas
    backgroundColor: blue
    height: height
    width: width

# Create states
layerA.states = 
    
    stateA:
        x: 0
        y: 0
        animationOptions:
            time: .6
#           delay: .3
            curve: Bezier.ease
        
    stateB:
        x: 300
        y: 0
        borderRadius: '50%'
        animationOptions:
            time: .6
#           delay: .3
            curve: Bezier.ease
        
    stateC:
        x: 300
        y: 300
        backgroundColor: orange
        animationOptions:
            time: .6
#           delay: .3
            curve: Bezier.ease
        
    stateD:
        x: 0
        y: 300
        borderRadius: 0
        animationOptions:
            time: .6
#           delay: .3
            curve: Bezier.ease

# Create events
eventState = true
#单击元素事件
layerA.on Events.Tap, (e) ->
    # 判断动画是否结束
    if eventState
        # 事件只发生在触发元素，禁止上溯
        e.stopPropagation()
        layerA.animate('stateB')
        # 动画结束前禁止二次触发
        eventState = false

#长按画布事件
canvas.on Events.LongPress, (e) ->
    if eventState
        e.stopPropagation()
        layerA.animate('stateC')
        eventState = false

#左滑画布事件
canvas.on Events.SwipeLeft, (e) ->
    if eventState
        e.stopPropagation()
        layerA.animate('stateD')
        eventState = false

#上滑画布事件
canvas.on Events.SwipeUp, (e) ->
    if eventState
        e.stopPropagation()
        layerA.animate('stateA')
        eventState = false

#保证事件的单次触发，避免重复触发
layerA.onAnimationEnd ->
    eventState = true

Events

注意

1. e.stopPropagation()是防止父元素也触发事件，这是因为 Javascript 特殊的上溯机制
2. 设置一个变量 eventState 用来防止事件二次触发，不知道有没有更好的代码方式

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

Reference

特训2 Framer 源码