交互篇--frame_基础篇1

framer

（一）点击变换

Code

Code

Design

box.states = 
    one:
        borderRadius: 14
        rotation: 15
        scale: 1.5
        backgroundColor: "rgba(255,255,255,1)"
        
    two:
        scale:.75
        rotation: -15
        x: 86
        y: 143
        width: 203
        height: 203
        backgroundColor: "rgba(255,185,0,1)"
        
    three:
        rotation: 0
        scale: 1
        backgroundColor: "rgba(255,255,255,1)"
        
box.animationOptions =
    curve: Spring(damping: 0.5)

box.onTap ->
    box.stateCycle("one","two","three")

• addButton弹性动画／列表滚动

code

design

list1.draggable.enabled =true
list1.draggable.horizontal = false
list1.draggable.constraints = 
    x: 0
    y: 50
    width: 200
    height: 200

status_bar.states.a =
    image:"images/Light Status Bar.png"

button1.states.a =
    opacity: 0
    y:button1.y+50
    x:button1.x+94
    
button2.states.a =
    opacity: 0
    y:button1.y+50
    x:button1.x+94
    
button3.states.a =
    opacity: 0
    y:button1.y+50
    x:button1.x+94
    
button4.states.a =
    opacity: 0
    y:button1.y+50
    x:button1.x+94

addbutton.states.a =
    rotation: 45
    backgroundColor: "rgba(4,120,247,1)"
    
button1.states.animationOptions = 
    curve: Spring

button2.states.animationOptions = 
    curve: Spring
    delay:0.05
    time: 1

button3.states.animationOptions = 
    curve: Spring
    delay:0.1
button4.states.animationOptions = 
    curve: Spring
    delay:0.15
addbutton.states.animationOptions = 
    curve: Spring
    delay:0.2
addbutton.onClick ->
    addbutton.stateCycle()
    button1.stateCycle()
    button2.stateCycle()
    button3.stateCycle()
    button4.stateCycle() 

code

buttonAll = [button1,button2,button3,button4]

shapes = [button1,button2,button3,button4]
shapesOption = []
for i in [0..3]
    shapesOption[i]= shapes[i].point
    shapes[i].x = 14
    shapes[i].y = 14
    shapes[i].states.Letover =
        point:shapesOption[i]
        rotation:360
        
    shapes[i].states.animationOptions = 
        curve:Spring
        delay:i*0.05
addbutton.states.a =
    rotation: 0
    backgroundColor: "rgba(64,94,247,1)"

#-------------用遍历写下面的代码可以更简单-------------       
# button1.states.animationOptions = 
#   curve: Spring
# 
# button2.states.animationOptions = 
#   curve: Spring
#   delay:0.05
#   time: 1
# 
# button3.states.animationOptions = 
#   curve: Spring
#   delay:0.1
#   
# button4.states.animationOptions = 
#   curve: Spring 
#   delay:0.15
addbutton.states.animationOptions = 
    curve: Spring
    delay:0.2
addbutton.onClick ->
    addbutton.stateCycle()
    button1.stateCycle()
    button2.stateCycle()
    button3.stateCycle()
    button4.stateCycle()

• drag

Code

Design

button1.states.a =
    options:
        time: 1
        curve: Spring(tension: 200,friction: 25)
    
    x: 304
    scale: 1.2
    
bj.states.a =
    backgroundColor: "rgba(84,161,253,1)"
    
button1.states.animationOptions = 
    curve: Spring(tension: 200,friction: 25)
    time: 1
    
bj.states.animationOptions = 
    curve: Spring(tension: 200,friction: 25)
    time: 1
    
button1.onClick ->
    button1.stateCycle()
    bj.stateCycle()
bj.onClick ->
    button1.stateCycle()
    bj.stateCycle() 

• 气泡

演示图.gif

layerA.states.rotate =
    rotation: 180
    animationOptions:
        time: 1
        curve: Spring
        
 
layer2.states.csale =
    scale: 0
    y: -74
    x: 257
    opacity: 0.00

layer2.states.animationOptions = 
    curve: Spring

layerA.states.animationOptions = 
    curve: Spring   
        
layerA.onTap ->
    layerA.stateCycle()
    layer2.stateCycle()

（二）快捷键