交互篇--frame_基础篇3

framer.jpg

（一）scroll-list

Code

Design

code

scroll = new ScrollComponent
    width: 375
    height: 551
    y: 58
scroll.contentInset =
    top: -59
    bottom:0
    right: 0
    left: 0
        
scroll.scrollHorizontal = false 
layerA.parent = scroll.content
layerB.parent = scroll.content
layerCD.parent = scroll.content

layerB.states.second = 
    height: 268
jast.states.second = 
    height: 100
    y: 80
layerCD.states.second =
    y: 510
    x: 17

textA.states.a =
    scale: 1.46
    invert: 0
    y: 30
         
layerB.onClick ->
            
    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) 
    
    textA.stateCycle(options:
            time: 0.3
            curve: Bezier.easeOut)

（二）pinchable/draggable

code

design

#多拽开关，各轴向开关
layerA.draggable.enabled = true
layerA.draggable.horizontal = true
layerA.draggable.vertical = false

#拖拽速度
layerA.draggable.speedX = 1
layerA.draggable.speedY = 1

#拖拽限制
layerA.draggable.constraints =
    x: 0
    width: 375
    
#物体拖拽开始和结束后的大小
layerA.onDragStart ->
    layerA.animate
        scale: 1.1
        backgroundColor: "rgba(221,245,255,1)"

        
layerA.onDragEnd ->
    layerA.animate
        scale: 1
        backgroundColor: "rgba(194,221,255,1)"
        

layerA.states.animationOptions = 
    curve: Spring

code

design

slider = new SliderComponent
    
    min: 0
    max: 100
    value: 50
    knobSize: 40
    y: 270
    x: 30
    backgroundColor: "rgba(194,221,255,1)"
    height: 14
        
# Customize fill color 
slider.fill.backgroundColor = "rgba(101,168,255,1)"

（三）page

code

design

page = new PageComponent
    y:0
    width: 375
    height: 220

layerB.parent = page.content

layerC.parent = page.content

layerD.parent = page.content

page.scrollVertical = false

layerC.x = 375
layerD.x = 375*2