交互篇--frame_基础篇2

framer

（一）flow

• 点击按钮弹窗弹出

flow-window

flow-window

Code.gif

Design

flow = new FlowComponent
flow.showNext(box1)

buttonModle.states.a =
    backgroundColor: "rgba(194,221,255,1)"
    
    
buttonModle.states.animationOptions = 
    curve: Spring
    time: 0.1
    
buttonModle.onClick ->
    buttonModle.animate("a")
    flow.showOverlayCenter(modle)

modle.onClick ->
    flow.showPrevious()
    buttonModle.stateCycle()

（二）flow screen

Code

Design

flow = new FlowComponent
flow.showNext(screenA)

tasks.onClick ->
    flow.showNext(screenB)
back1.onClick ->
    flow.showPrevious()
    
tasks1.onClick ->
    flow.showNext(screenC)
back2.onClick ->
    flow.showPrevious()

scroll = new ScrollComponent
    width: 375
    height: 551
    y: 58
scroll.contentInset =
    top: -59
    bottom:0
    right: 0
    left: 0

layerB.animate

layerB.onClick (event, layer) ->
    

    
scroll.scrollHorizontal = false 
layerA.parent = scroll.content
layerB.parent = scroll.content
layerCD.parent = scroll.content
    
layerB.onClick ->
    layerB.animate
        height: 268
        options:
            time: 0.3
            curve: Bezier.easeOut
    
    jast.animate
        height: 133
        options:
            time: 0.3
            curve: Bezier.easeOut
    
    layerCD.animate
        y: 510
        x: 17
        options:
            time: 0.3
            curve: Bezier.easeOut
            
    jast.stateCycle(options:
            time: 0.3
            curve: Bezier.easeOut) 
    layerB.stateCycle(options:
            time: 0.3
            curve: Bezier.easeOut) 
    layerCD.stateCycle(options:
            time: 0.3
            curve: Bezier.easeOut)