[swift] 간단한 Typing animation 만들기
오늘은 유데미 강의에서 알게되자마자 올려벌이는,,,,! Typing Animation 만들기입니닷
🤦🏻♀️위에는 gif로 만들려고 시간간격을 0.4로 설정해서 많이 느리답니다 ㅎㅎ
오늘은 간단하게! for 반복문을 이용하여 Typing Animation 효과를 내는 법을 알아보도록 할거에요.
for 반복문만으로 이런 효과를 내다니!! 증말 대단해!! 어쒐!!한 저인데ㅎㅎㅎ 머쓱;;ㅎㅎ
오늘은 애니메이션을 보는 게 목표이기 때문에, 코드 말고 스토리보드에서 작업할게욧.
우선 메인.스토리보드에 레이블을 하나 추가할거에요.
command + shift + L을 눌러주시면 라이브러리 창이 뜨고, 거기서 Label을 검색하여 더블클릭하거나, 스토리보드로 드래그 해주시면 됩니다욧
그 후 레이블이 선택된채로,
1. indicator에서 레이블 안의 내용을 "⌨️TypingAnimation"으로 바꿔주고요
2. Color도 내가 좋아하는 색으로 바꿔주고요
3. 폰트도 크기 40의 볼드체로 바꿔줍니다요
그리고 저는 view의 정중앙에 뙇! 하고 싶으니까, 아래 align에서 Horizontally in Container, Vertically in Container 항목을 체크하고 Add Constraints를 눌러줍니다.
그러면, UI는 준비가 완료되었군여.
이제 코드만 치면 되는데, 세상 간단해요.
일단 메인스토리보드가 선택된 채로, command + option + control + return키를 눌러주세요!
그러면 현재 스토리보드와 연결된 뷰컨트롤러가 짠 뜹니다!
우리가 만든 레이블을 클릭 + control을 누른 채, viewDidLoad 위로 드래그 해주세여!!
그 후 mainLabel이라는 이름으로 아웃렛을 연결해주세요~
그 아래 두가지 변수를 선언해줍니다.
characterIndext 변수는 아래에서 왜 필요한지 알려드릴게요.
var characterIndex = 0.0
var titleText = "⌨️TypingAnimation"
그리고 ViewDidLoad에서는 일단 우리가 연결한 mainLabel을 빈 문자열로 선언해줘용.
override func viewDidLoad() {
super.viewDidLoad()
mainLabel.text = ""
}이 빈 문자열에 이제 하나씩 글자를 추가할 거거등여.
이제 본격적인 for 반복문을 작성해줄게요.
문자열은 결국 각 문자가 모여서 만든 배열과 유사하기 때문에 문자열도 배열처럼 추가, 삭제, 편집 등이 가능해요.
이번에도 그 기능을 써볼건데요.
일단 우리가 만든 titleText를 for 반복문을 통해 한 글자씩 뽑아내줍니당. 그리고 나서 빈문자열로 만들어둔 mainLabel에 append해주세요.
for char in titleText {
self.mainLabel.text?.append(char)
}그리고 실행을 해보면? 아무일도 일어나지 않아요 ㅎㅎㅎ
반복문을 통해 문자열을 하나씩 뽑아냈지만, 각 문자열을 더하는 것에 시간텀이 없다보니까, 한꺼번에 append가 되어버리는거죠?
그래서 Timer를 이용해 각 글자간의 간격을 둘 거에요.
아래 타입메서드를 이용해줄게요.
- withTimeInterval : 시간간격
- repeats : true면 타이머가 자동으로 rescheduled되고(타이머가 다시 시작된다는 의미같음), false면
타이머가 작동하면 무효화된다고 해요. (타이머가 끝난다는 의미같음)- block : 타이머가 끝나고 일어날 일 (클로저 형식)
for char in titleText {
Timer.scheduledTimer(withTimeInterval: 0.2, repeats: false) { timer in
self.mainLabel.text?.append(char)
}
}
시간 간격은 0.2 정도로, 반복은 없게, 그리고 클로저에서 위에서 했던 문자열 추가를 다시 해줘볼게요.
아니, 왜절해?
애니메이션은 커녕 알파벳 숫자는 왜절해?;; 정말;;;🤦🏻♀️
아마 반복이 0.2초라는 간격에 동시에 일어나기 때문이겠죠?
그래서 아까 만들어 둔 characterIndex 변수를 써줄게요.
for 반복에서 이 변수에 +1을 해주고, 이 값을 타이머의 간격 파라미터에 곱해줘볼게요.
for char in titleText {
Timer.scheduledTimer(withTimeInterval: 0.2 * characterIndex, repeats: false) { timer in
self.mainLabel.text?.append(char)
}
characterIndex += 1
}이제 제대로 잘 나오죠?!
혹시 몰라 for 반복문 아래 & 타이머 위에서 반복문에서 나온 글자(char)와 타이머의 간격(interval)을 프린트를 해보면
print(char)
print(0.2 * self.characterIndex)
print("======")이렇게 프린트 되는 걸 볼 수 있어요.
/*
⌨️
0.0
======
T
0.2
======
y
0.4
======
p
0.6000000000000001
======
i
0.8
======
n
1.0
======
g
1.2000000000000002
======
A
1.4000000000000001
======
n
1.6
======
i
1.8
======
m
2.0
======
a
2.2
======
t
2.4000000000000004
======
i
2.6
======
o
2.8000000000000003
======
n
3.0
======
*/⌨️가 append되고, 0.2초 뒤에 T가 append해지고, 0.4초 뒤에 y가 append되고,,,이런 흐름인거져!
생각보다 간단하지 않나요? (온갖 곳에 저 애니메이션 넣을 것 같은 느낌)
혹시 오늘도 틀린 게 있다면 많이들 알려주십셔 슨배님덜!