[swift] NumberMorphView를 이용한 동적인 스톱워치 구현 방법 알아보기

29 Nov 2023

swift

소개

스톱워치는 시간을 측정하고 기록하는 데 사용되는 도구입니다. 이번에는 Swift의 NumberMorphView를 이용하여 동적인 스톱워치를 구현해보겠습니다. NumberMorphView는 숫자를 부드럽게 전환하는 애니메이션 효과를 제공해주는 라이브러리입니다.

NumberMorphView 설치

NumberMorphView를 사용하기 위해서는 먼저 CocoaPods를 이용하여 프로젝트에 라이브러리를 추가해야 합니다. Podfile에 다음과 같이 추가해주세요.

pod 'NumberMorphView'

그리고 터미널에서 아래 명령어를 실행하여 라이브러리를 설치합니다.

pod install

스톱워치 구현하기

NumberMorphView를 인터페이스 빌더에서 추가합니다. 앱의 UI에 맞는 위치에 NumberMorphView를 추가하고 적절한 크기 및 속성을 설정합니다.
NumberMorphView를 IBOutlet으로 연결합니다. ViewController 파일을 열고 아래와 같이 코드를 추가합니다.

import NumberMorphView

class ViewController: UIViewController {
    
    @IBOutlet weak var numberMorphView: NumberMorphView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 초기화
        numberMorphView.animateToValue(0)
    }
}

스톱워치 기능을 구현합니다. 시작, 일시정지, 재개, 리셋 기능을 구현하기 위해 다음과 같이 코드를 추가합니다.

    var timer: Timer?
    var counter: Double = 0

    ...
    
    @IBAction func startButtonTapped(_ sender: UIButton) {
        timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(updateCounter), userInfo: nil, repeats: true)
    }
    
    @IBAction func pauseButtonTapped(_ sender: UIButton) {
        timer?.invalidate()
    }
    
    @IBAction func resumeButtonTapped(_ sender: UIButton) {
        startButtonTapped(sender)
    }
    
    @IBAction func resetButtonTapped(_ sender: UIButton) {
        timer?.invalidate()
        counter = 0
        numberMorphView.animateToValue(counter)
    }
    
    @objc func updateCounter() {
        counter += 0.01
        numberMorphView.animateToValue(counter)
    }

시작, 일시정지, 재개, 리셋 버튼을 앱의 UI에 추가합니다.

    @IBOutlet weak var startButton: UIButton!
    @IBOutlet weak var pauseButton: UIButton!
    @IBOutlet weak var resumeButton: UIButton!
    @IBOutlet weak var resetButton: UIButton!

    ...
    
    startButton.addTarget(self, action: #selector(startButtonTapped), for: .touchUpInside)
    pauseButton.addTarget(self, action: #selector(pauseButtonTapped), for: .touchUpInside)
    resumeButton.addTarget(self, action: #selector(resumeButtonTapped), for: .touchUpInside)
    resetButton.addTarget(self, action: #selector(resetButtonTapped), for: .touchUpInside)

결론

위의 과정을 따라가면 NumberMorphView를 사용하여 동적인 스톱워치를 구현할 수 있습니다. NumberMorphView를 이용하면 시간을 부드럽게 전환하는 애니메이션 효과를 쉽게 적용할 수 있습니다. 필요에 따라 추가적인 기능을 구현하여 사용하면 좀 더 다양한 스톱워치 앱을 만들 수 있습니다.