Project 14 - Animation

이와 같은 로딩 화면을 본 적이 많을 것이다.
"••••" 부분은 animate 함수를 이용해 간단히 구현할 수 있다.

이미지 세팅

image1.transform = CGAffineTransform(scaleX: 0.01, y: 0.01)
image2.transform = CGAffineTransform(scaleX: 0.01, y: 0.01)
image3.transform = CGAffineTransform(scaleX: 0.01, y: 0.01)

먼저 이미지를 View Controller에 위치하고 이미지의 배율을 0.01로 매우 작게 만든다.

Animation

각각의 이미지를 다음과 같이 animte를 이용해 설정해준다.

UIView.animate(withDuration: 0.6, delay: 0.0, options: [.repeat, .autoreverse], animations: {
    self.image1.transform = CGAffineTransform.identity
}, completion: nil)

delay는 각각 0.2 ~ 0.4 정도의 delay를 주어 번갈아가며 작동하는 것처럼 보이게 한다.

option에 .repeat와 .autoreverse를 이용해 이미지가 작았다 커졌다를 반복할 수 있게 해준다.

이미지를 원래 형태로 변하도록 CGAffineTransform.identity를 사용한다.
이는 0.01배수의 이미지에서 원래 형태 이미지로 변하면서 작았다 커지는 것과 같은 효과를 준다.