이번에는 간단하게 toggle switch button을 만들어보았다.
#Layer
먼저 레이어는 토글버튼의 bg와 핸들링 할 수 있는 스위치 버튼의 두 가지다. 이때 버튼의 크기는 고정 좌표로 하지 않고 계산하는 방식을 택했다. 스위치 버튼의 크기에 따라서 toggleBG 의 사이즈도 조절되도록 짜 보았다. toggleBG의 가로사이즈는 switchBtn의 사이즈의 두배에 패딩값의 두 배를 더한 값이다. 그리고 switchBtn의 maxX를 toggleBG width값의 2분의 1로 설정하면, 토글 스위칭의 on/off위치는 toggleBG의 2분의 1기준에서 좌,우로 이동하게 설정하기 편하다.
#States
이번에도 역시 stateCycle()을 이용한다. default와 다른 한 개의 state가 필요하므로, 간단하게 bg 컬러만 변경 되도록 설정했다. background의 경우, 디폴트를 제외한 두 가지의 state가 돌도록 했다. 버튼의 애니메이션 옵션에는 time을 짧게 주고, bg는 해가 뜨고 질 때의 느낌으로 조금 느리게 변하도록 했다.
#Events
이벤트는 정말 간단하다. 클릭 시 스테이트가 돌도록 하면 끝. 이때 switchOn이라는 변수를 지정 해주고 시작은 true로 한다.
switchOn = !switchOn 의 의미는 토글의 두 가지 상태가 다른 상황이라는 것에 대한 정의를 내려 주는 것 같다. 같은 버튼이지만 각 state로 전환되었을 때 다른 기능을 한다는 뜻인 듯. designhow라는 사이트에서 해 준 튜토리얼 강의를 보고 알게 되었는데, 스터디를 통해 좀 더 자세히 알아봐야겠다.
'DeVsign' 카테고리의 다른 글
| 워드프레스 HTTP error 500문제 해결 (0) | 2019.02.23 |
|---|---|
| Framer 도전기 #번외편 Framer X Beta 와의 만남 (0) | 2019.02.23 |
| Framer 도전기 #8 stateCycle()로 Toggle Switch버튼 만들기 (0) | 2019.02.23 |
| Framer 도전기 #7 stateCycle()로 두더지 잡기 (0) | 2019.02.23 |
| Framer 도전기 #6 Medium의 박수치기 버튼 만들기 (0) | 2019.02.23 |
| Framer 도전기 #5 클릭했을 때 숫자 카운트가 증가하는 버튼 만들기 (0) | 2019.02.23 |
