F#6 medium 박수치기 버튼 만들기

카운트 올리는 코드를 완성하고, 미디엄 박수 버튼에 응용해 보기로 했다.

미디엄의 박수치기 버튼은 일반적으로 사용하는 좋아요 버튼(좋아요/ 좋아요 취소의 두 가지 케이스 토글 스위칭)과는 달리, 내가 마음에 드는 대로 박수치는 횟수를 더해줄 수 있다는 것이 특징이다. 아주 마음에 드는 포스트에는 열 번이고 스무 번이고 박수를 쳐 주는데, 메타포의 의미와도 잘 부합하는 것이 상당히 매력적인 기능이라 생각한다.

#Layer

일단 프레이머 디자인 탭에서는 손 모양을 만들어준다. 미디엄과 같은 모양은 아니지만, 대략 박수를 치는 의미에 접근만 가능할 정도로 만들어 주었다. hands로 이름을 지었다.
화면은 일반 canvas로 사용하고, 애니메이션 영역을 캔버스 전체로 지정해준다. 버튼을 가운데로 정렬시켜주고 카운트가 올라갈 때 기준점을 버튼으로 해 주기 위해서다.
여기서 새로 알게된 점. framer의 design 탭에서 직접 그림을 그리고 나면 반드시 frames 로 그룹핑을 시켜줘야 properties가 적용된다.

animationArea = new Layer
backgroundColor: “”
size: Screen.size
animationArea.center()
clapBtn = new Layer
borderRadius: 50
width: 100
height: 100
backgroundColor: “white”
borderColor: “efefef”
borderWidth: 1
parent: animationArea
clapBtn.center()
#shape은 frames에 넣어줘야 속성이 적용됨.
hands.parent = clapBtn
hands.x = Align.center
hands.y = Align.center

다음으로, 박수 카운트를 표출할 영역을 만들어준다. 버튼을 클릭했을 때 시작점은 버튼의 중심으로 잡아야 하므로 midY는 clapBtn의 midY와 동일하게 잡아주고 clapBtn의 뒤쪽으로 숨김. 카운트 숫자에 대한 표현은 F#5에서 공부한 방법으로 세팅했다.

countBox = new Layer
x: Align.center
width: 40
height: 35
borderRadius: 35
backgroundColor: “3f3cab”
midY: clapBtn.midY
opacity: 0
count = 0
countNum = new TextLayer
text: “+” + count
textAlign: “center”
parent: countBox
color: “white”
fontSize: 12
fontWeight: 800
x: Align.center
y: Align.center
countBox.sendToBack()

지금까지는 애니메이션을 구현할 때 state를 쓰는 방법을 사용했지만 이번에는 new animationLayer를 이용해보았다. DOCS에서 찾으면서 응용하며 공부하는 게 가장 좋은 방법이 아닐까 한다. clapBtn의 애니메이션은 버튼이 확대되었다가 축소되는 것으로, 애니메이션이 끝나면 거꾸로 재생되도록 해 주었다.

clapBtnScaling = new Animation clapBtn,
scale: 1.15
borderColor: “3f3cab”
borderWidth: 1.5
options:
time: 0.2
curve: Bezier.ease
clapBtnDefault = clapBtnScaling.reverse()
# Alternate between the two animations
clapBtnScaling.on Events.AnimationEnd, clapBtnDefault.start

카운트 영역은 fade in 효과로 올라왔다가 0.4초 후 fade out효과로 사라지도록 하였는데 이것은 투명도를 활용했다. y값은 70 씩 감소하도록 설정해주었다.

countRaise = new Animation countBox,
minY : clapBtn.minY – 70
opacity: 1
options:
time: 0.4
curve: Bezier.easeOut
countFadeOut = new Animation countBox,
minY : clapBtn.minY – 70 – 70
opacity: 0
options:
time: 0.5
curve: Bezier.easeIn
delay: 0.4
countRaise.on Events.AnimationEnd, countFadeOut.start

이 버튼에서 잔상이 남는 애니메이션에 대한 states를 세팅한 부분이 있는데, 이번 포스팅에서는 클릭 시 반응에 대해서만 글을 올려 본다. 잔상 효과는 나중에 기회가 있을 때 포스팅 해 보도록 하겠다.

#Events

이제 박수 버튼을 클릭했을 때의 동작들을 구현해본다. countNum이 증가할 때마다 countBox의 패딩을 지정해주고, countBox는 무조건 가운데로 배치되게 설정했다. 클릭할 때 버튼이 살짝 커졌다 작아지는 애니메이션과, 카운트 표출 영역이 솟아오르는 애니메이션을 재생한다. 이때 카운트 숫자는 누를 때마다 1씩 증가하게 설정했다.
모든 애니메이션이 끝나면 다음 클릭 시 원 좌표부터 시작하기 위해 countBox의 minY값과 opacity를 처음 값과 동일하게 세팅한다.

clapBtn.onClick ->
countBox.width = countNum.width + 23
countBox.x = Align.center
clapBtnScaling.start()
countRaise.start()
count += 1
countNum.text = “+” + count
countFadeOut.on Events.AnimationEnd, ->
countBox.minY = clapBtn.minY
countBox.opacity = 0

이렇게 해서 완성했다. 클릭 시의 반응에 대해 작업하다 보니, 왠지 두더지 게임을 만들고 싶어졌다.
두더지 게임을 만들 때는 Lottie를 이용해서 두더지가 망치로 맞을 때(히익 잔인한 느낌 무엇…)의 표정 등을 같이 만들어보면 재미있을 것 같다.

구현 화면 보러 가기 >

댓글 남기기

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