[swift] NumberMorphView를 이용한 도넛 차트 애니메이션 구현 방법

29 Nov 2023

swift

도넛 차트는 데이터의 비율을 시각적으로 표현하는데 효과적인 도구입니다. 이번 포스트에서는 iOS 앱 개발에서 NumberMorphView를 이용하여 도넛 차트 애니메이션을 구현하는 방법을 알아보겠습니다.

NumberMorphView란?

NumberMorphView는 Swift로 작성된 라이브러리로, 숫자를 부드럽게 애니메이션하는 효과를 제공합니다. 이 라이브러리를 사용하면 숫자의 변화를 시각적으로 보여줄 수 있기 때문에, 도넛 차트의 퍼센트 값을 부드럽게 변경하는 데에 활용할 수 있습니다.

도넛 차트 구현하기

NumberMorphView 라이브러리를 프로젝트에 추가합니다. 여기에서 다운로드 받거나, Carthage나 CocoaPods를 통해 의존성을 추가할 수도 있습니다.
주어진 데이터를 기반으로 도넛 차트를 그립니다. 이를 위해 UIView를 사용하여 도넛 모양의 뷰를 구현하고, 안쪽에 UIView를 추가하여 차트의 데이터 영역을 정의합니다.

import UIKit
import NumberMorphView

class DonutChartView: UIView {

    private let chartView: UIView = UIView()
    private let morphView: NumberMorphView = NumberMorphView()

    var currentValue: CGFloat = 0 {
        didSet {
            // NumberMorphView를 통해 숫자 애니메이션을 업데이트합니다.
            morphView.count(fromValue: oldValue, toValue: currentValue, withDuration: 0.5)
        }
    }
  
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupChartView()
        setupMorphView()
    }
  
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupChartView()
        setupMorphView()
    }

    private func setupChartView() {
        // 도넛 차트를 그리는 뷰 설정
        chartView.backgroundColor = UIColor.lightGray
        chartView.layer.cornerRadius = bounds.width / 2
        chartView.layer.masksToBounds = true
        
        chartView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(chartView)
        NSLayoutConstraint.activate([
            chartView.topAnchor.constraint(equalTo: topAnchor),
            chartView.bottomAnchor.constraint(equalTo: bottomAnchor),
            chartView.leadingAnchor.constraint(equalTo: leadingAnchor),
            chartView.trailingAnchor.constraint(equalTo: trailingAnchor)
        ])
    }

    private func setupMorphView() {
        // NumberMorphView 설정
        morphView.font = UIFont.systemFont(ofSize: 24, weight: .bold)
        morphView.textColor = UIColor.white
        
        morphView.translatesAutoresizingMaskIntoConstraints = false
        chartView.addSubview(morphView)
        NSLayoutConstraint.activate([
            morphView.centerYAnchor.constraint(equalTo: chartView.centerYAnchor),
            morphView.centerXAnchor.constraint(equalTo: chartView.centerXAnchor)
        ])
    }
}

애니메이션을 트리거할 때마다 currentValue를 업데이트하여 도넛 차트의 퍼센트 값을 변경합니다. 도넛 차트의 퍼센트 값은 0부터 1 사이의 값을 가지며, currentValue 값을 변경할 때마다 NumberMorphView를 사용하여 부드러운 애니메이션을 재생합니다.

// 예시 데이터
let percentage: CGFloat = 0.75

// 도넛 차트 뷰 생성
let donutChartView = DonutChartView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
donutChartView.currentValue = percentage

// 애니메이션 효과 부여
UIView.animate(withDuration: 0.5) {
    donutChartView.currentValue = 1.0
}

결론

NumberMorphView를 이용하여 도넛 차트 애니메이션을 구현하는 방법에 대해 알아보았습니다. 이 라이브러리를 사용하면 애니메이션 효과를 적용한 도넛 차트를 쉽게 구현할 수 있습니다. 또한, 다양한 애니메이션 설정을 통해 차트의 모습을 더욱 정교하게 제어할 수 있습니다.

더 많은 정보와 예제 코드는 NumberMorphView GitHub 저장소에서 확인하실 수 있습니다.