[iOS - swift] 안드로이드 스타일의 로딩 뷰 구현 방법, 회전 indicator 구현 방법(CABasicAnimation, transform.rotation)

* 이미지 없이 직접 구현하는 방법은 이전 포스팅 글 참고

구현된 뷰

회전 indicator 구현 아이디어

• indicator 이미지를 준비

이미지

• indicator이미지를 CABasicAnimation의 transform.rotation을 이용하여 이미지를 회전시켜서 구현

구현

• assets에 indicator 이미지 준비

• ViewController에 UIImageView 준비

import UIKit

class ViewController: UIViewController {
    private let loadingImageView = UIImageView(image: UIImage(named: "loading"))
}

• UIImageView를 화면 정 중앙에 위치

override func viewDidLoad() {
    super.viewDidLoad()
    
    view.addSubview(loadingImageView)
    loadingImageView.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
        loadingImageView.heightAnchor.constraint(equalToConstant: 20),
        loadingImageView.widthAnchor.constraint(equalToConstant: 20),
        loadingImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        loadingImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    ])
    
    animate()
}

private func animate() {
  // TODO
}

• 이 이미지를 회전시키는 애니메이션을 구현
  • fromValue, toValue는 각도를 의미하고, 0부터 360도까지의 회전을 의미
  • repeatCount는 infinity로 설정하여 무한으로 돌게끔 구현

private func animate() {
    let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation")
     rotationAnimation.fromValue = 0
     rotationAnimation.toValue = CGFloat.pi * 2
     rotationAnimation.duration = 1.0
     rotationAnimation.repeatCount = Float.infinity
    
    loadingImageView.layer.add(rotationAnimation, forKey: "rotation_animation")
}

(완료)

구현된 뷰

* 전체 코드: https://github.com/JK0369/ExCustomIndicator