[swift] Swift로 구현한 지도 애플리케이션에 NumberMorphView 효과 적용하기

29 Nov 2023

swift

지도 애플리케이션에는 주로 사용자의 위치를 표시하는 기능이 포함되어 있습니다. 이 위치 정보는 대부분 숫자로 표현되는데, 이러한 숫자를 부드럽게 전환하는 NumberMorphView 효과를 Swift로 구현해보겠습니다.

NumberMorphView는 UILabel을 상속한 커스텀 뷰로서, 주어진 시작값과 종료값 사이를 일정한 시간 동안 부드럽게 전환하는 애니메이션 효과를 제공합니다. 이를 사용하여 사용자의 위치를 나타내는 숫자를 부드럽게 변경할 수 있습니다.

NumberMorphView 설정

먼저, NumberMorphView를 프로젝트에 추가하고 설정하는 방법을 알아보겠습니다.

NumberMorphView GitHub 저장소에서 NumberMorphView를 다운로드하거나, CocoaPods를 사용하여 프로젝트에 추가합니다.

프로젝트의 ViewController에 NumberMorphView를 추가하기 위해 Storyboard 또는 코드로 추가합니다.

// Storyboard를 사용하여 NumberMorphView 추가하는 경우
@IBOutlet weak var numberMorphView: NumberMorphView!

// 코드로 NumberMorphView를 추가하는 경우
let numberMorphView = NumberMorphView(frame: CGRect(x: 0, y: 0, width: 100, height: 50))
view.addSubview(numberMorphView)

startValue와 endValue 프로퍼티를 사용하여 NumberMorphView의 시작값과 종료값을 설정합니다.
```
numberMorphView.startValue = 0
numberMorphView.endValue = 100
```

NumberMorphView를 화면에 보여주기 위해 필요한 설정을 추가합니다.

// storyboard를 사용하여 NumberMorphView를 추가하는 경우
override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    numberMorphView.start()
}

// 코드로 NumberMorphView를 추가하는 경우
override func viewDidLoad() {
    super.viewDidLoad()
    numberMorphView.start()
}

사용 예시

NumberMorphView를 사용하여 지도 애플리케이션에서 사용자의 위치를 나타내는 숫자를 부드럽게 전환하는 예시를 살펴보겠습니다.

import UIKit
import NumberMorphView

class MapViewController: UIViewController {
    @IBOutlet weak var numberMorphView: NumberMorphView!

    let locationManager = CLLocationManager()

    override func viewDidLoad() {
        super.viewDidLoad()

        // NumberMorphView 설정
        numberMorphView.animationDuration = 1.0

        // 위치 정보 요청 및 업데이트 시작
        locationManager.delegate = self
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.requestWhenInUseAuthorization()
        locationManager.startUpdatingLocation()
    }
}

extension MapViewController: CLLocationManagerDelegate {
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        guard let currentLocation = locations.last else { return }

        let currentLatitude = currentLocation.coordinate.latitude
        let currentLongitude = currentLocation.coordinate.longitude

        let currentCoordinates = "\(currentLatitude), \(currentLongitude)"

        // NumberMorphView에 좌표 값을 전환시킴
        numberMorphView.startValue = Double(numberMorphView.endValue)
        numberMorphView.endValue = Double(currentCoordinates)

        // 애니메이션 실행
        numberMorphView.start()
    }
}

위의 예시 코드는 지도 애플리케이션에서 사용자의 위치 정보를 표시하는 기능을 구현한 것입니다. CLLocationManager를 사용하여 위치 정보를 업데이트하고, 업데이트된 좌표 값을 NumberMorphView에 전달하여 애니메이션을 실행하는 방식으로 동작합니다.

이와 같이 NumberMorphView를 사용하여 지도 애플리케이션에서 부드러운 숫자 전환 효과를 구현할 수 있습니다. 자세한 내용은 NumberMorphView GitHub 저장소를 참조하시기 바랍니다.