[swift] Swift와 Core Graphics를 이용한 사용자 정의 애니메이션 구현하기

07 Dec 2023

swift

애니메이션은 앱 또는 웹사이트에서 사용자 경험을 향상시키는 효과적인 방법입니다. Swift는 매우 강력한 애니메이션 효과를 구현할 수 있는 Core Graphics 프레임워크를 제공합니다. 이 튜토리얼에서는 Swift와 Core Graphics를 사용하여 사용자 정의 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

Core Graphics란?

Core Graphics는 iOS 및 macOS 앱에서 2D 그래픽을 그리고 변환하기 위한 강력한 프레임워크입니다. 이 프레임워크를 사용하면 직접 그림을 그리고, 이미지를 그리고, 애니메이션을 만들 수 있습니다.

사용자 정의 애니메이션 구현 단계

Core Graphics를 사용하여 애니메이션의 시작 상태를 그립니다.
UIView 또는 CALayer를 사용하여 그림 도형을 표현하는 클래스를 작성합니다.
CADisplayLink를 사용하여 매 프레임마다 애니메이션을 업데이트하는 메서드를 구현합니다.
애니메이션의 최종 상태를 그립니다. 애니메이션이 완료된 후에는 애니메이션을 종료하는 코드를 추가할 수도 있습니다.

예제 코드

다음은 Swift와 Core Graphics를 사용하여 동그라미가 화면에서 서서히 커지는 애니메이션을 구현하는 예제 코드입니다.

import UIKit

class CircleView: UIView {
  
  var radius: CGFloat = 10
  
  override func draw(_ rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()
    
    let centerX = rect.width / 2
    let centerY = rect.height / 2
    
    context?.setStrokeColor(UIColor.red.cgColor)
    context?.setLineWidth(3)
    context?.addArc(center: CGPoint(x: centerX, y: centerY), radius: radius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
    context?.drawPath(using: .stroke)
  }
  
  func animate() {
    let displayLink = CADisplayLink(target: self, selector: #selector(update))
    displayLink.add(to: .current, forMode: .default)
  }
  
  @objc private func update() {
    if radius < 100 {
      radius += 1
    } else {
      radius = 10
    }
    setNeedsDisplay()
  }
}

let circleView = CircleView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
circleView.backgroundColor = .white
circleView.animate()

위의 코드는 CircleView라는 사용자 정의 UIView 서브클래스를 생성하고, draw(_:) 메서드를 오버라이드하여 동그라미를 그리는 로직을 구현합니다. animate() 메서드는 CADisplayLink를 사용하여 프레임마다 update() 메서드를 호출하고 동그라미의 반지름을 조정하여 화면에 애니메이션을 표시합니다.

목차

Core Graphics란?

사용자 정의 애니메이션 구현 단계

예제 코드

참고 자료