[swift] 30.MarqueeLabel을 이용한 이벤트 카운트다운 애니메이션 구현하기

15 Nov 2023

swift

마라키 라벨(MarqueeLabel)은 Swift에서 텍스트를 자동으로 이동하면서 보여주는 라이브러리입니다. 이번 글에서는 이 MarqueeLabel을 이용하여 간단한 이벤트 카운트다운 애니메이션을 구현하는 방법을 알아보겠습니다.

MarqueeLabel 라이브러리 설치

먼저, MarqueeLabel 라이브러리를 프로젝트에 설치해야 합니다. CocoaPods를 이용하여 설치하는 방법은 아래와 같습니다.

Podfile에 다음과 같이 라이브러리를 추가합니다.

pod 'MarqueeLabel'

터미널에서 pod install 명령어를 실행하여 라이브러리를 설치합니다.

코드 구현

이벤트 카운트다운을 구현하기 위해 다음과 같은 단계를 따릅니다.

MarqueeLabel을 Storyboard 또는 코드로 생성합니다.
Label에 텍스트와 애니메이션 속도 등을 설정합니다.
카운트다운 기능을 구현합니다.

import UIKit
import MarqueeLabel

class CountdownViewController: UIViewController {
    
    @IBOutlet weak var countdownLabel: MarqueeLabel!
    
    var countdownTimer: Timer?
    var countdownDuration = 10

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Label 설정
        countdownLabel.text = "10"
        countdownLabel.type = .continuous
        countdownLabel.animationCurve = .easeInOut
        countdownLabel.speed = .rate(20)
        
        // 카운트다운 시작
        startCountdown()
    }
    
    func startCountdown() {
        countdownTimer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { [weak self] timer in
            guard let self = self else { return }
            
            self.countdownDuration -= 1
            self.countdownLabel.text = "\(self.countdownDuration)"
            
            if self.countdownDuration <= 0 {
                self.countdownTimer?.invalidate()
            }
        }
    }
}

위의 코드는 MarqueeLabel을 생성하고, 애니메이션 속도, 텍스트 등을 설정한 후, 카운트다운을 시작하는 예시입니다.

CountdownViewController에서는 MarqueeLabel을 IBOutlet으로 연결하여 사용하고, countdownLabel.text를 통해 텍스트를 설정합니다. startCountdown() 함수에서는 Timer를 사용하여 1초마다 countdownDuration을 감소시키고, countdownLabel에 업데이트합니다.

결과 확인

마라키 라벨을 이용하여 이벤트 카운트다운 애니메이션을 구현했습니다. 시뮬레이터 또는 디바이스에서 앱을 실행하면, MarqueeLabel이 텍스트를 자동으로 이동하면서 보여주는 애니메이션을 확인할 수 있습니다.

결론

이번 글에서는 MarqueeLabel을 이용하여 이벤트 카운트다운 애니메이션을 구현하는 방법을 알아보았습니다. MarqueeLabel을 사용하면 텍스트를 자동으로 이동시키는 다양한 애니메이션을 쉽게 구현할 수 있습니다.

더 자세한 내용은 MarqueeLabel GitHub를 참고하시길 바랍니다.

참고:

MarqueeLabel GitHub