[swift] Swift에서 NumberMorphView를 이용한 음악 플레이어 프로그레스 바 구현 방법 알아보기

29 Nov 2023

swift

이번에는 Swift 언어를 사용하여 음악 플레이어의 프로그레스 바를 구현하는 방법을 알아보겠습니다. 이를 위해 NumberMorphView라는 라이브러리를 사용할 것입니다.

NumberMorphView란?

NumberMorphView는 숫자 애니메이션 효과를 적용할 수 있는 뷰입니다. 이를 사용하여 음악 플레이어의 프로그레스 바를 부드럽게 애니메이션화할 수 있습니다.

프로젝트 설정

먼저, 프로젝트에 NumberMorphView를 추가해야 합니다. 다음의 단계를 따라주세요.

프로젝트 내에서 사용할 수 있는 패키지 매니저를 선택하여 NumberMorphView를 가져옵니다.
프로젝트의 Podfile에 다음의 내용을 추가합니다.
```
pod 'NumberMorphView'
```
터미널에서 pod install 명령어를 실행합니다.

NumberMorphView 사용법

먼저, 음악 플레이어의 프로그레스 바를 나타내기 위한 UIView를 준비합니다.
```
let progressView = UIView()
```

NumberMorphView를 초기화하고, 애니메이션 효과를 부여할 숫자 스타일을 설정합니다.

let numberMorphView = NumberMorphView(frame: progressView.bounds)
numberMorphView.font = UIFont.systemFont(ofSize: 12)
numberMorphView.textColor = .black

프로그레스 바의 프레임과 배경색을 설정합니다.

progressView.frame = CGRect(x: 0, y: 0, width: 200, height: 20)
progressView.backgroundColor = .lightGray

NumberMorphView를 프로그레스 바에 추가합니다.
```
progressView.addSubview(numberMorphView)
```
애니메이션을 시작할 숫자 값을 지정하고, 프로그레스 바를 업데이트하는 함수를 정의합니다.
```
func updateProgress(value: Int) {
    numberMorphView.morph(to: value) // 애니메이션 시작
}
```

프로그레스 바의 변화에 따라 숫자를 업데이트합니다.

let currentValue = 0
let targetValue = 100
let duration = 2.0 // 애니메이션 지속 시간

let timer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { timer in
    let progress = timer.fireTime.timeIntervalSinceReferenceDate / duration
    let value = currentValue + Int(progress * Double(targetValue - currentValue))
    self.updateProgress(value: value)

    if progress >= 1.0 {
        timer.invalidate()
    }
}
RunLoop.current.add(timer, forMode: .default)

결과 확인하기

위의 구현 방법대로 코드를 작성하고 실행하면, 스무스한 애니메이션 효과를 가진 음악 플레이어의 프로그레스 바를 확인할 수 있습니다.

이와 같이 NumberMorphView를 사용하여 Swift에서 음악 플레이어의 프로그레스 바를 구현할 수 있습니다. 자세한 내용은 NumberMorphView GitHub 리포지토리를 참고하시기 바랍니다.