交互篇--frame_初中级篇（过渡）1

framer

http://www.framercn.com/docs/layer#sepia
Docs中文对照网站

（一）animationHome

code

image.png

part1

flow = new FlowComponent
flow.showNext(home)

#------------点击button按钮显示button_list，显示header为topbar，显示footer为footer，并激活头部和底部的可见性------------
button.onTap ->
    flow.showNext(button_list)
    flow.header = topbar
    flow.footer = footer
    flow.header.visible = true
    flow.footer.visible = true
    
button_menu.onTap ->
    flow.showOverlayLeft(menu)
        
button_close.onTap ->
    flow.showPrevious()
    

button_list.onTap ->
    flow.showNext(detal)
    footer.visible = false

part2

#------------底部浮层boxmmm的状态------------

boxmmm.states = 
    show:
        y:402
        options: 0
        opacity: 
            curve:"Spring"
            delay:.2
        backgroundColor: "rgba(255,221,0,0.9)"
        
#------------把红黄蓝三个图片放到images这个盒子里，用i遍历盒子中的每个图片,[0..2]就是一共三张图片0，1，2，@相当于images／this------------

images = [m1,m2,m3]
for i in [0..2]
    images[i].states = 
        show :
            frame : Screen.frame
            options: 
                curve:"Spring"      
    images[i].onTap  ->
        @.bringToFront()
        @.stateCycle()
        boxmmm.bringToFront()
        boxmmm.stateCycle()
        
#------------boxmmm.bringToFront()相当于把boxmmm图层置顶------------

part3

#--------悬浮鼠标时按钮周边元素的状态，（遍历）把这8个元素放到盒子里，再准备一个名为shapesOption的筐---------

#---------用i遍历让盒子里的每个元素的xy值为120/25，把这些xy拿出来放到刚开始准备好的筐shapesOption中---------
shapes = [s1,s2,s3,s4,s5,s6,s7,s8,s9]
shapesOption = []
for i in [0..8]
    shapesOption[i]= shapes[i].point
    shapes[i].x = 120
    shapes[i].y = 25
    shapes[i].states.Letover =
        point:shapesOption[i]
        rotation:360
#--------------再给每个元素定义状态名为Letover，shapesOption[i]拿的是筐中每个元素的xy，旋转360---------------
button_go.states =
    zoomin:
        scale:1.05
        options:
            curve:"Spring" 
    zoomout:
        scale:0.95
        options:
            curve:"Spring" 

button_go.onMouseOver ->
    button_go.stateCycle("zoomin","zoomout")
    for i in [0..8]
        shapes[i].animate "Letover"
        curve:"Spring(200,15) "
            
            
button_go.onMouseOut ->
    button_go.stateCycle("zoomin","zoomout")
    for i in [0..8]
        shapes[i].stateCycle()

https://framer.cloud/apicM