2.2 Hamburger 버튼 만들기 - States
States를 활용한 애니메이션 만들기
새해가 되자마자 기다렸다는 듯이 제안 일정이 잡히고 그 사이 스터디도 하나 더 늘리면서 브런치 업데이트가 늦어졌다. 새해 첫 포스팅은 지난번에 레이아웃 잡았던 햄버거 버튼에 움직임을 주고 클릭하면 반응하도록 만들어 완성할 예정이다.
1. 햄버거 버튼 레이아웃 잡기 : https://brunch.co.kr/@fish-soul/5
이런 아주아주 기본 움직임을 완성해보겠다.States
States는 레이어에 다른 옵션을 표현하는 데 사용한다. 하나의 레이어에 여러 states를 생성해서 경우에 따라 원하는 state를 골라 사용할 수도 있다. 기본적으로 반복하는 속성을 가지고 있기 때문에 햄버거 버튼처럼 반복적인 움직임을 주고자 할 때 쉽게 사용할 수 있다.
States 추가하기
layerA.states =
states1 :
Property : Value
states2 :
Property : Value
states를 추가하는 기본적인 구조다. layerA는 states를 적용할 레이어의 이름이다. 즉 layerA에 서로 다른 states1, states2라는 속성을 부여한 것이다. 물론 states1, states2도 원하는 이름을 변경해서 쓰면 된다. 햄버거 버튼 예제에 대입해서 보자.
레이아웃을 구성할 때 위와 같은 형태의 이름을 지정해줬었다. 햄버거 버튼의 삼선을 감싸주면서 클릭 영역이 될 레이어 HB, 삼선의 첫 번째 선 HBT, 중앙선 HBC, 마지막 선 HBB. 아래의 예제 코드에서는 해당 이름을 사용하니 참고.
HBC.states =
actived :
opacity: 0
options:
curve: 'linear'
time: 0.2
inactived :
opacity: 1
options:
curve: 'linear'
time: 0.2
HBC레이어에 states를 추가한 코드다. actived와 inactived라는 각각의 states를 설정해줬다. 위의 완성 gif를 보면 클릭했을 때 상단과 하단 선은 45도로 돌면서 X자를 이루고 중앙선은 fade out 된다.
HBC는 중앙선 레이어니까 opacity를 조절하여 fade out 되도록 설정한 것이다. 여기에 options을 주었다. curve는 가속도 같은 것을 나타내는 거라고 생각하면 된다. 다들 학창 시절 물리 시간에 배웠을 것이다. 중력이 있는 지구 상에서 대부분의 물체는 일정한 속도로도 움직이지 않는다는 것을. 그런 걸 표현하는 거라고 보면 될 것 같다. 이 curve에서는 easing curve, spring curve 등 다양한 값이 있는데 지금 사용한 "linear"는 easing curve의 하나로, 움직임의 시작부터 끝까지 일정한 속도로 움직이게 한다.
easing curve 참고 사이트 : http://easings.net/ko
spring curve 참고 사이트 : http://stakes.github.io/framerplayground/
time은 opacity가 0%에서 100% 혹은 100%에서 0%가 되기까지 걸리는 시간을 설정한 것이다.
하지만 States만 설정해준 다고 해서 바로 움직임을 눈으로 볼 수 있는 건 아니다. 이전 편에서도 얘기했지만 Layer + States / Animation + Event가 한쌍을 이뤄야 한다. Layer + States / Animation 까지 만들었으니 이를 실행해줄 Event를 만들어줘야 한다.
Event 만들기
여기서는 햄버거 버튼의 삼선을 감싸고 있는 HB 레이어를 클릭하면 삼선이 X가 되게 만들려고 하고 있다. 그러니 당연히 event는 HB에게 선언해줘야 한다. 쓸데없어 보이는 HB를 만든 이유도 여기에 있다. 레이어 영역이 얇은 삼선에게 event를 주면 저 얇은 선을 정확히 터치해야 하는데 두꺼운 손가락으로 저 얇은 선을 터치하려고 하면 속이 터지지 않겠는가.
Event를 만드는 방법은 간단하다.
레이어명.Event유형 ->
실행할 내용
이를 예제에 대입해보면
HB.onClick ->
HBC.stateCycle("actived", "inactived")
'HB'(레이어명)라는 레이어를 'Click'(event유형)하면 'HBC의 states 중 actived와 inactived를 반복하라'(실행할 내용)는 의미다.
이벤트 유형에는 onClick, onTap, onDrag, onMove 등 다양하게 있다. 이 부분은 framer에서 on이라고 쓰면 자동완성 기능에서 확인할 수 있다.
stateCycle은 위에서도 말했듯이 괄호 안에 들어가는 states 속성을 반복하라는 의미다.
이렇게 만들고 햄버거 버튼을 클릭하면 아래와 같이 움직일 것이다.
States 완성하기
이제 나머지 두 선도 States를 이용해서 햄버거 버튼을 완성해보자.
상단 선은 시계방향으로 45도 기울어져야 하고 하단 선은 시계 반대방향으로 45도 기울어진다. 그리고 중앙에서 만나야 비로소 X가 완성된다.
HBT.states =
actived :
rotation: 45
y: HBC.y
options:
curve: 'linear'
time: 0.2
inactived :
rotation: 0
y: (HBC.y-16)
options:
curve: 'linear'
time: 0.2
HBB.states =
actived :
rotation: - 45
y: HBC.y
options:
curve: 'linear'
time: 0.2
inactived :
rotation: 0
y: (HBC.y+16)
options:
curve: 'linear'
time: 0.2
상단선인 HBT는 시계방향으로 회전하기 때문에 rotation: 45로 주었고 세로 중앙 정렬을 위해서 HBC의 y값을 받아오도록 했다. 하단선인 HBB는 시계 반대방향으로 회전하므로 rotation: -45를 주고 마찬가지고 세로 중앙 정렬을 위해 HBC의 y값을 받아도록 했다.
이제 모든 움직임에 대한 정의가 끝났다. 이 역시 event로 실행에 대한 정의를 내려줘야 한다. 이미 HB에 대한 이벤트를 정의 내렸으니 거기에 위 내용을 추가만 하면 된다.
HB.onClick ->
HBC.stateCycle("actived", "inactived")
HBT.stateCycle("actived", "inactived")
HBB.stateCycle("actived", "inactived")
그러면 이제 햄버거 버튼 기본이 완성된다.
햄버거 버튼을 활용하여 이러한 변형도 가능하다.
물론 페이지를 좌우로 넘기는 건 layer와 states만으론 안되지만 그것만 빼곤 가능하다.다음 편에서는 다양한 component를 하나씩 사용해보려고 한다.
완성한 햄버거 버튼의 전체 코드는 아래 링크 참조.
기본 햄버거 버튼 : https://framer.cloud/LfIfi/
햄버거 버튼 응용 : https://framer.cloud/Fsngf/
instagram: https://www.instagram.com/fish0422/
facebook : https://www.facebook.com/fish0422
