[swift] Swift에서 NumberMorphView를 활용한 음악 플레이어 개발하기

29 Nov 2023

swift

소개

이번 블로그 포스트에서는 Swift에서 NumberMorphView를 활용하여 간단한 음악 플레이어를 개발하는 방법에 대해 알아보겠습니다. NumberMorphView는 숫자를 부드럽게 변화시켜주는 애니메이션 효과를 제공하는 UI 라이브러리입니다.

NumberMorphView 설치하기

NumberMorphView는 Cocoapods를 통해 설치할 수 있습니다. Podfile에 다음과 같이 추가해주세요.

pod 'NumberMorphView'

설치를 마친 후, import NumberMorphView를 통해 라이브러리를 불러올 수 있습니다.

음악 플레이어 레이아웃 구성하기

먼저, 음악 플레이어의 레이아웃을 구성해보겠습니다. 이 예제에서는 간단히 Play 버튼과 음악 재생 시간을 표시할 NumberMorphView를 사용하겠습니다.

import UIKit
import NumberMorphView

class MusicPlayerViewController: UIViewController {

    @IBOutlet weak var numberMorphView: NumberMorphView!
    @IBOutlet weak var playButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        // NumberMorphView 설정
        numberMorphView.configuration.density = .medium
        numberMorphView.configuration.animationDuration = 0.5

        // Play 버튼 설정
        playButton.addTarget(self, action: #selector(playButtonTapped), for: .touchUpInside)
    }

    @objc func playButtonTapped() {
        // 재생 버튼이 눌렸을 때 동작할 코드 작성
    }

}

음악 재생 시간 표시하기

이제 음악의 재생 시간을 표시해보겠습니다. NumberMorphView를 사용하여 시간을 표시하면 부드러운 애니메이션 효과를 얻을 수 있습니다.

@objc func playButtonTapped() {
    let duration: CGFloat = 240 // 음악 재생 시간 (예시로 240초로 설정)

    numberMorphView.stop()
    numberMorphView.roll(from: 0, to: Int(duration), duration: Double(duration))
}

override func viewDidLoad() {
    super.viewDidLoad()

    // NumberMorphView 설정
    numberMorphView.configuration.density = .medium
    numberMorphView.configuration.animationDuration = 0.5
    numberMorphView.textColor = UIColor.white

    // Play 버튼 설정
    playButton.addTarget(self, action: #selector(playButtonTapped), for: .touchUpInside)
}

위 코드에서는 재생 버튼이 눌렸을 때 NumberMorphView를 사용하여 시간을 표시하는 부분이 추가되었습니다. playButtonTapped 함수에서 재생 시간(duration)을 설정하고, numberMorphView.roll 함수를 호출하여 애니메이션 효과와 함께 시간을 표시합니다.

결론

이렇게 Swift에서 NumberMorphView를 활용하여 음악 플레이어를 개발하는 방법에 대해 알아보았습니다. NumberMorphView를 사용하면 숫자를 부드럽게 변화시키는 멋진 애니메이션 효과를 구현할 수 있습니다. 음악 플레이어 외에도 다양한 UI에 적용할 수 있으니 꼭 한 번 써보시기 바랍니다.

더 자세한 내용은 NumberMorphView GitHub 페이지를 참고하세요.