F#8 stateCycle()로 Toggle Switch Button 만들기

좀 있으면 Framer X Beta를 받아볼 수 있다. 이미 받아서 사용하고 있는 사람들도 있다. 인터랙션을 바로 사용 가능하게 하는 라이브러리가 생겼더라. 그걸 바로 끌어다 사용하는 예고편 영상을 보았다. 드래그 앤 드롭을 했을 뿐인데 그냥 움직인다. 나는 그런 걸 수동으로 코드 짜는 재미를 이제야 맛보고 있는데, 동적인 요소를 키트로 만든 라이브러리라니 약간 김이 샌다. 뭐 간편하게 인터랙티브 프로토타입을 구현할 수 있다는 점에서는 어마어마한 장점이 될 거라 생각한다. 그래도 컴포넌트의 동작에 관해서는 직접 코드로 짜 보고 싶었는데, 아쉽다.

그래서 간단하게 toggle switch button을 만들어보았다.

#Layer

먼저 레이어는 토글버튼의 bg와 핸들링 할 수 있는 스위치 버튼의 두 가지다. 이때 버튼의 크기는 고정 좌표로 하지 않고 계산하는 방식을 택했다. 스위치 버튼의 크기에 따라서 toggleBG 의 사이즈도 조절되도록 짜 보았다. toggleBG의 가로사이즈는 switchBtn의 사이즈의 두배에 패딩값의 두 배를 더한 값이다. 그리고 switchBtn의 maxX를 toggleBG width값의 2분의 1로 설정하면, 토글 스위칭의 on/off위치는 toggleBG의 2분의 1기준에서 좌,우로 이동하게 설정하기 편하다.

background = new BackgroundLayer
switchBtn = new Layer
width: 40
height: 40
borderRadius: 40
backgroundColor: “white”
padding = 4
toggleBG = new Layer
width: switchBtn.width * 2 + padding * 2
height: switchBtn.height + padding * 2
borderRadius: switchBtn.width
backgroundColor: “rgba(150, 150, 150, 0.2)”
toggleBG.center()
switchBtn.parent = toggleBG
switchBtn.maxX = toggleBG.width / 2
switchBtn.y = Align.center()

#States

이번에도 역시 stateCycle()을 이용한다. default와 다른 한 개의 state가 필요하므로, 간단하게 bg 컬러만 변경 되도록 설정했다. background의 경우, 디폴트를 제외한 두 가지의 state가 돌도록 했다. 버튼의 애니메이션 옵션에는 time을 짧게 주고, bg는 해가 뜨고 질 때의 느낌으로 조금 느리게 변하도록 했다.

background.states =
day :
backgroundColor: “#70B9DF”
night :
backgroundColor: “#19265A”
toggleBG.states.on =
backgroundColor: “#99CC66”
switchBtn.states.on =
minX: toggleBG.width / 2
toggleBG.animationOptions =
time: 0.3
switchBtn.animationOptions = toggleBG.animationOptions
background.animationOptions =
time: 3

#Events

이벤트는 정말 간단하다. 클릭 시 스테이트가 돌도록 하면 끝. 이때 switchOn이라는 변수를 지정 해주고 시작은 true로 한다.
switchOn = !switchOn 의 의미는 토글의 두 가지 상태가 다른 상황이라는 것에 대한 정의를 내려 주는 것 같다. 같은 버튼이지만 각 state로 전환되었을 때 다른 기능을 한다는 뜻인 듯. designhow라는 사이트에서 해 준 튜토리얼 강의를 보고 알게 되었는데, 스터디를 통해 좀 더 자세히 알아봐야겠다.

switchOn = true
“}”>switchBtn.onClick (event, layer) ->
switchOn = !switchOn
background.stateCycle([“day”, “night”])
toggleBG.stateCycle()
switchBtn.stateCycle()

구현 화면 보러 가기 >

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다