[iOS] FireBase를 이용한 간단한 Chat app 만들기(1) - Timer로 애니매이션

안녕하세요!!

오늘은 제목을 애니메이션으로 만들기 편으로 한번 글을 써보려고합니다.

애니매이션은 기본적으로 어떤것일까 생각을 해보면 초등학교때로

돌아가게 됩니다. 

 

공책에 졸라맨을 그려놓고 맨위에서 아래로 떨어트리고

마지막에 죽는 장면을 그려놓고 맨 끝에서 맨앞으로 촤라락 넘기면서 했던 기억이있는데,

이게 결국 애니메이션의 원리라고 할 수 있죠

우리는 그러니깐!! Timer를 쓰면된다 이겁니다.!!

        for letter in titleText {
            Timer.scheduledTimer(withTimeInterval: 0.1 * charIndex, repeats: false) { (timer) in
                self.titleLabel.text?.append(letter)
            }
            charIndex += 1
        }

 

우선적으로  이 코드를 살펴보기 위해서, Timer.SchduledTimer라는 것을 한번 알아보도록 하겠습니다.

타이머는

클로저를 활용한 타이머

selector를 활용한 Timer

scheduledTimer를 사용해서 만들 수 있습니다.

 

1. 여기서 TimeInterval은 말 그대로 시간 간격이라는 뜻입니다.

2. repeats은 반복을 할 것인지? 라는 뜻으로 TImerinterval이 지나면 다시 반복할 것인지 묻는 것입니다. 

3. block은 내에  timeInterval마다 실행될 코드 블럭을 적어주면 됩니다!!

아래 selector를 이용한 timer에서

1. target은 

이런 의미로 셀렉터가 메세지를 보내는 target이라는 뜻입니다. timer은 target-action 메커니즘을 따르기 때문에, 위에서 target을 정해준것입니다. 뷰컨트롤러에서 진행되기 바란다면, target은 self가 될 것입니다.

2. selector는 타이머가 실행될 때마다, 실행될 메세지라고 봐도 됩니다. 하지만 selector은 objective-c의 잔재이기 때문에 selector로 쓸 함수 앞에는 @objc 를 붙어줘야 합니다.!!

3. userInfo는

타이머의 userinfo라는 데 apple document에도 nil을 쓰라니 그냥 nil을 쓰면 될 것 같습니다.. ㅎㅎㅎ

 

그렇다면 이제 진짜로 애니메이션이 어떻게 진행되느냐??

override func viewDidLoad() {
        super.viewDidLoad()

        titleLabel.text = ""
        var charIndex = 0.0
        let titleText = K.appName
        for letter in titleText {
            Timer.scheduledTimer(withTimeInterval: 0.1 * charIndex, repeats: false) { (timer) in
                self.titleLabel.text?.append(letter)
            }
            charIndex += 1
        }
    }

viewDidLoad() 함수 내에 들어가서 vc가 처음 실행될 때  나타나도록 해야하는데요!!

titleText를 for Loop로 돌면서 조금씩 timeinterval을 주는방식으로 진행을 할 겁니다!!

근데 여기서 0.1초마다 진행되면 되는것인데, 왜 timeInterval이 0.1*charIndex일까 라는 것을 생각해본다면,

우선 타이머 안에 우리는 textlabel에 append해주는 형식이고, append 된것이 계속 반영될것입니다.

위의 제목이 타자치는것처럼 나오기 위해서는 하나씩 칠때마다 0.1초가 아닌, 0.1초에 맨앞글자, 다음은 0.2초있다가 2번째 글자, 다음은 0.3초 있다가 다음 글자 이렇게 해야지만, 애니매이션이 진행되는 것이죠!!

그렇기 때문에, charIndex를 썻다고 생각하면 되고, 계속 가중치를 주면서 첫번째 글자는 바로 나오고, 다음부터 넌 0.1초, 그담 넌 0.2초 ....이렇게 나오게 되는 겁니다. 

결국!!!