[swift] NumberMorphView의 속성들과 활용 방법 알아보기

NumberMorphView는 숫자 형태의 데이터를 부드럽게 애니메이션화하여 보여주는 Swift 라이브러리입니다. 이 라이브러리를 사용하면 사용자 정의 애니메이션을 적용할 수 있어서, 다양한 유형의 숫자 데이터를 시각적으로 표현할 수 있습니다.

NumberMorphView 속성

NumberMorphView는 다양한 속성을 제공하여 사용자가 애니메이션의 모양과 동작을 조절할 수 있습니다.

font

font 속성은 NumberMorphView의 텍스트에 사용할 폰트를 설정합니다. 이 속성을 사용하여 애니메이션의 텍스트 스타일을 변경할 수 있습니다.

let numberMorphView = NumberMorphView()
numberMorphView.font = UIFont.systemFont(ofSize: 24)

textColor

textColor 속성은 NumberMorphView의 텍스트 색상을 설정합니다. 애니메이션 중에도 이 색상이 유지됩니다.

let numberMorphView = NumberMorphView()
numberMorphView.textColor = UIColor.red

startingValue

startingValue 속성은 애니메이션을 시작할 때 표시될 숫자를 설정합니다. 이 숫자는 애니메이션 동작이 시작되기 전에 NumberMorphView에 표시됩니다.

let numberMorphView = NumberMorphView()
numberMorphView.startingValue = 0

duration

duration 속성은 애니메이션의 지속 시간을 설정합니다. 이 값은 초 단위로 지정되며, 더 큰 값은 보다 느린 애니메이션을 의미합니다.

let numberMorphView = NumberMorphView()
numberMorphView.duration = 2.0

animationCurve

animationCurve 속성은 애니메이션의 곡선 형태를 설정합니다. 여러 가지 사전 정의된 곡선 중에서 선택할 수 있으며, 원하는 애니메이션 효과에 맞게 설정할 수 있습니다.

let numberMorphView = NumberMorphView()
numberMorphView.animationCurve = .easeInOut

NumberMorphView 활용 방법

NumberMorphView를 활용하여 다양한 시나리오에서 애니메이션 효과를 적용할 수 있습니다. 예를 들어, 다음은 Button을 눌렀을 때 숫자가 증가하는 애니메이션을 적용하는 방법입니다.

class ViewController: UIViewController {
    @IBOutlet weak var numberMorphView: NumberMorphView!
    @IBOutlet weak var increaseButton: UIButton!

    var currentValue = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        increaseButton.addTarget(self, action: #selector(increaseButtonTapped), for: .touchUpInside)
    }

    @objc func increaseButtonTapped() {
        currentValue += 1
        numberMorphView.startValue = numberMorphView.endValue
        numberMorphView.endValue = currentValue
        numberMorphView.startAnimation()
    }
}

위의 예시에서 increaseButton을 누를 때마다 currentValue가 1씩 증가하고, 그 값을 NumberMorphView에 설정하여 애니메이션을 시작합니다.

이제 NumberMorphView를 사용하여 숫자 데이터를 부드러운 애니메이션으로 표현하는 방법에 대해 알게 되었습니다. 추가적으로 공식 문서를 참조하여 더 많은 사용 방법을 알아보세요.

참고 자료