iOS에서 안드로이드 스타일 로딩 뷰 만들기: UIBezierPath와 CABasicAnimation 활용

iOS 개발을 하면서 종종 안드로이드 스타일의 로딩 뷰를 구현하고 싶을 때가 있습니다. 안드로이드의 로딩 뷰는 직관적이고 시각적으로 매력적이어서 사용자 경험을 향상시킬 수 있습니다. 이번 글에서는 Swift와 몇 가지 핵심 기술을 활용하여 iOS에서 이러한 로딩 뷰를 만드는 방법을 알아보겠습니다.

기본 설정

먼저, 새로운 Xcode 프로젝트를 생성합니다. 싱글 뷰 앱으로 설정하고 Swift를 선택합니다. 프로젝트가 생성되면 ViewController.swift 파일을 열어 초기 설정을 합니다.

swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // 로딩 뷰 설정을 여기서 시작합니다.
    }
}

이제 로딩 뷰를 위한 기본 설정이 준비되었습니다. 본격적으로 UIBezierPath와 CABasicAnimation을 사용하여 애니메이션을 구현해 보겠습니다.

UIBezierPath를 사용하여 로딩 뷰 만들기

로딩 뷰의 핵심은 UIBezierPath를 사용하여 원 형태의 패스를 그리는 것입니다. 이를 통해 로딩 애니메이션의 경로를 정의할 수 있습니다.

swift
func createLoadingPath() -> UIBezierPath {
    let radius: CGFloat = 40.0
    let startAngle: CGFloat = 0
    let endAngle: CGFloat = 2 * .pi
    return UIBezierPath(arcCenter: view.center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
}

위 함수는 중심이 view.center인 원 경로를 반환합니다. 이제 이 경로를 사용하여 로딩 애니메이션을 시작해 보겠습니다.

CAShapeLayer로 로딩 경로 그리기

원 경로를 그리는 데 필요한 CAShapeLayer를 설정합니다. 이는 경로를 그리기 위한 레이어 역할을 합니다.

swift
func createShapeLayer() -> CAShapeLayer {
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = createLoadingPath().cgPath
    shapeLayer.strokeColor = UIColor.blue.cgColor
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineWidth = 5.0
    return shapeLayer
}

이제 뷰 컨트롤러의 viewDidLoad 메서드에서 이 레이어를 뷰에 추가합니다.

swift
override func viewDidLoad() {
    super.viewDidLoad()
    let shapeLayer = createShapeLayer()
    view.layer.addSublayer(shapeLayer)
    startLoadingAnimation(layer: shapeLayer)
}

CABasicAnimation으로 애니메이션 구현하기

이제 CABasicAnimation을 사용하여 패스의 진행을 애니메이션으로 구현합니다. 애니메이션 반복 횟수를 무한대로 설정하여 로딩이 진행되는 동안 계속해서 애니메이션이 실행되도록 합니다.

swift
func startLoadingAnimation(layer: CAShapeLayer) {
    let animation = CABasicAnimation(keyPath: