Colin's Blog
[swift] Swift로 커스텀 NumberMorphView 만들기

Swift로 NumberMorphView를 만들어보는 방법에 대해 알아보겠습니다. NumberMorphView는 일련의 숫자를 부드럽게 변화시켜주는 뷰입니다. 이는 애니메이션과 함께 숫자가 변하는 것을 시각적으로 보여줄 수 있습니다.

시작하기 전에

NumberMorphView를 만들기 전에 몇 가지 사전 준비 작업이 필요합니다.

  1. Xcode를 최신 버전으로 업데이트합니다.
  2. Swift에 대한 기본 지식이 있어야 합니다.

프로젝트 설정

먼저, Xcode를 열고 새로운 프로젝트를 생성합니다. 프로젝트의 기본 설정은 아무런 작업을 하지 않아도 됩니다.

NumberMorphView 구현

NumberMorphView는 UIView를 상속받는 커스텀 뷰입니다. 다음과 같이 NumberMorphView.swift 파일을 생성합니다.

import UIKit

class NumberMorphView: UIView {

    private var currentNumber: Double = 0
    private var targetNumber: Double = 0
    private var displayLink: CADisplayLink?
    private var animationStartTime: TimeInterval = 0
    private var animationDuration: TimeInterval = 1

    // 숫자를 부드럽게 변화시키는 메소드
    func morphToNumber(_ number: Double) {
        currentNumber = number
        targetNumber = number
        animationStartTime = CACurrentMediaTime()
        displayLink = CADisplayLink(target: self, selector: #selector(handleDisplayLink))
        displayLink?.add(to: .current, forMode: .defaultRunLoopMode)
    }

    @objc private func handleDisplayLink() {
        let now = CACurrentMediaTime()
        let elapsedTime = now - animationStartTime
        let progress = elapsedTime / animationDuration

        guard progress <= 1 else {
            displayLink?.invalidate()
            displayLink = nil
            return
        }

        let updatedNumber = Double(currentNumber) + ((targetNumber - currentNumber) * progress)
        currentNumber = updatedNumber

        setNeedsDisplay()
    }

    override func draw(_ rect: CGRect) {
        // 현재 숫자를 그립니다.
        let stringToDisplay = String(format: "%.2f", currentNumber)
        let attributes: [NSAttributedString.Key: Any] = [.font: UIFont.systemFont(ofSize: 24)]
        let stringSize = stringToDisplay.size(withAttributes: attributes)
        let x = (bounds.size.width - stringSize.width) / 2
        let y = (bounds.size.height - stringSize.height) / 2
        let point = CGPoint(x: x, y: y)
        stringToDisplay.draw(at: point, withAttributes: attributes)
    }
}

위의 코드는 NumberMorphView를 구현한 예제입니다. 주요 코드는 다음과 같습니다.

사용하기

NumberMorphView를 사용하는 방법은 다음과 같습니다.

  1. Storyboard에서 UIView를 추가하고 Custom Class를 NumberMorphView로 지정합니다.
  2. ViewController에서 NumberMorphView 객체를 생성합니다.
  3. 원하는 숫자로 morphToNumber(_:) 메소드를 호출하여 NumberMorphView를 업데이트합니다.
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var numberMorphView: NumberMorphView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 예시 - 0부터 100까지 2초 동안 변화시킴
        numberMorphView.morphToNumber(100)
    }
}

위의 예제에서는 ViewController의 viewDidLoad() 메소드에서 NumberMorphView를 생성하고, morphToNumber(_:) 메소드를 호출하여 숫자를 업데이트합니다.

결론

이제 Swift로 커스텀 NumberMorphView를 만드는 기본적인 방법을 알게 되었습니다. 이를 바탕으로 숫자 애니메이션을 구현하여 사용자에게 시각적으로 보여줄 수 있습니다.

더 자세한 사용 방법이나 추가 기능을 사용하려면 해당 개발 문서를 참조하면 도움이 됩니다.

참고자료:

© 2018 Colin. All rights reserved.