[swift] 13.MarqueeLabel을 이용한 타이틀 애니메이션 효과 구현하기

이번에는 MarqueeLabel을 이용하여 타이틀 애니메이션 효과를 구현해보겠습니다. MarqueeLabel은 레이블의 가로 공간이 부족할 때 텍스트를 스크롤링하는 기능을 제공하는 라이브러리입니다. 이를 이용하여 타이틀을 자연스럽게 움직이는 애니메이션을 구현해보겠습니다.

1. MarqueeLabel 설치

먼저, MarqueeLabel을 설치해야합니다. Podfile에 다음과 같이 추가해주세요.

pod 'MarqueeLabel/Swift'

그리고 terminal에서 다음 명령어를 실행하여 설치를 완료합니다.

pod install

2. MarqueeLabel을 이용한 타이틀 애니메이션 구현하기

먼저, 해당 뷰 컨트롤러에 UILabel을 추가합니다. 이 레이블이 타이틀을 표시할 역할을 합니다.

2.1 UILabel 생성하기

import MarqueeLabel

class ViewController: UIViewController {
    @IBOutlet weak var titleLabel: MarqueeLabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 레이블 설정
        titleLabel.text = "애니메이션 효과"
        titleLabel.type = .continuous
        titleLabel.animationCurve = .easeInOut
        titleLabel.speed = .duration(10)
    }
}

@IBOutlet weak var titleLabel: MarqueeLabel! 부분은 storyboard에서 UILabel을 컨트롤 드래그하여 IBOutlet으로 연결한 변수입니다.

titleLabel.text = "애니메이션 효과"는 레이블에 보여질 타이틀을 설정하는 부분입니다. 필요에 따라 원하는 타이틀을 입력해주세요.

titleLabel.type = .continuous는 스크롤링 타입을 연속적인 형태로 설정하는 부분입니다. 다른 타입을 원하면 그에 맞는 타입을 선택할 수 있습니다. 자세한 내용은 MarqueeLabel 라이브러리의 문서를 참고하세요.

titleLabel.animationCurve = .easeInOut는 애니메이션의 곡선을 설정하는 부분입니다. 다른 곡선을 원하면 그에 맞는 설정을 선택할 수 있습니다.

titleLabel.speed = .duration(10)은 애니메이션의 속도를 설정하는 부분입니다. duration에는 애니메이션의 진행 시간을 입력할 수 있습니다. 필요에 따라 원하는 속도로 설정해주세요.

2.2 애니메이션 실행하기

titleLabel을 추가한 후에 애니메이션을 실행하고자 하는 시점에 다음 코드를 실행합니다.

titleLabel.restartLabel()

이렇게 하면 설정한 애니메이션 효과가 적용된 타이틀이 자동으로 스크롤링되게 됩니다.

3. 결과 확인하기

애니메이션 효과가 적용된 타이틀을 확인해보세요. 만약 스크롤링 속도나 타입 등을 변경하고 싶으면 코드를 수정하여 다양한 효과를 구현할 수 있습니다.

3.1 결과 화면

MarqueeLabel Animation

마무리

MarqueeLabel을 이용하여 타이틀 애니메이션 효과를 구현하는 방법을 알아보았습니다. 이를 통해 앱에 간단하면서도 동적인 효과를 부여할 수 있으니, 적절한 상황에서 활용해보시기 바랍니다.

더 자세한 정보는 MarqueeLabel GitHub repository를 참고하세요.