Coffee script for Framer - switch

※ 모든 예제는 여기 에서 진행됩니다.

※ Coffee Script 언어 설명은 여기서 확인할 수 있습니다.

※ Framer 의 클래스, 객체, 변수, 함수에 대한 설명은 여기서 확인할 수 있습니다.

1. 본론 - Switch

---

0. Switch 문 - Switch

: Switch 문은 여러개의 선택지가 있을때 사용합니다.

위와 같은 사용법 말고 다른 사용법도 있지만, 일단 이정도만 알아도 됩니다.

0. Switch 문 - 예제

switch_exam.txt

bg = new BackgroundLayer
bg.backgroundColor = "gray"
 
tap = new Layer
    width : Screen.width
    height : 80
    backgroundColor : "#2196F3"
    html : "Change Color Example"
    style : {"font-size" : "30px", "font-weight" : "100", "text-align" : "center","line-height":"#{tap.height}px"}
    
tapWidth = tap.width/4
tapHeight = 40
tapY = tap.height
 
tapRed = new Layer
    x: tapWidth*0
    y: tapY
    width : tapWidth
    backgroundColor : "Red"
    height : tapHeight
    html : "Red"
    style : {"font-size" : "20px", "font-weight" : "100", "text-align" : "center","line-height" : "#{tapHeight}px"}
    
tapYellow = new Layer
    x: tapWidth*1
    y: tapY
    width : tapWidth
    backgroundColor : "Yellow"
    height : tapHeight
    html : "Yellow"
    style : {"font-size" : "20px", "font-weight" : "100", "text-align" : "center","line-height" : "#{tapHeight}px","color" : "black"}
 
tapGreen = new Layer
    x: tapWidth*2
    y: tapY
    width : tapWidth
    backgroundColor : "Green"
    height : tapHeight
    html : "Green"
    style : {"font-size" : "20px", "font-weight" : "100", "text-align" : "center","line-height" : "#{tapHeight}px"}
 
tapBlue = new Layer
    x: tapWidth*3
    y: tapY
    width : tapWidth
    backgroundColor : "Blue"
    height : tapHeight
    html : "Blue"
    style : {"font-size" : "20px", "font-weight" : "100", "text-align" : "center","line-height" : "#{tapHeight}px"}
    
tapRed.onTap ->
    changeColor "red"
tapYellow.onTap ->
    changeColor "yellow"
tapGreen.onTap ->
    changeColor "green"
tapBlue.onTap ->
    changeColor "blue"
    
changeColor = (x) -> 
    print x
    switch x
        when "red" then bg.backgroundColor = "red"
        when "yellow" then bg.backgroundColor = "yellow"
        when "green" then bg.backgroundColor = "green"
        when "blue" then bg.backgroundColor = "blue"
        else bg.backgroundColor = "gray"
    

탭이 눌렸을 때 탭에 해당하는 색으로 배경이 바뀌는 예제 입니다. 웹 환경의 Framer에서는 잘 돌아가지 않으니, 프로그램에서 돌려보세요~