[swift] 64.MarqueeLabel을 이용한 새로운 책 소개 애니메이션 구현하기

15 Nov 2023

swift

안녕하세요! 이번에는 MarqueeLabel이라는 라이브러리를 이용하여 새로운 책 소개 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

1. MarqueeLabel 라이브러리 소개

MarqueeLabel은 텍스트가 화면 상에서 한 줄로 계속 스크롤되는 효과를 주는 라이브러리입니다. 이 라이브러리는 UIKit 프레임워크에서 제공하는 UILabel 클래스의 확장 기능을 제공하여 구현됩니다.

MarqueeLabel은 Swift에서 사용할 수 있는 오픈 소스 라이브러리로, Cocoapods를 통해 간단히 설치할 수 있습니다.

2. 프로젝트에 MarqueeLabel 라이브러리 추가하기

프로젝트에 MarqueeLabel 라이브러리를 추가하기 위해서는 다음과 같은 단계를 따라야 합니다.

Cocoapods를 설치합니다. Cocoapods는 Objective-C 및 Swift 프로젝트의 종속성 관리를 위한 패키지 관리자입니다.
터미널을 열고, 프로젝트의 루트 디렉토리로 이동합니다.
pod init 명령어를 실행하여 프로젝트에 Podfile을 생성합니다.
Podfile을 열고, 아래와 같이 MarqueeLabel 라이브러리를 추가합니다.

target 'YourProjectName' do
  use_frameworks!
  
  pod 'MarqueeLabel/Swift', '4.1.3'
end

터미널에서 pod install 명령어를 실행하여 라이브러리를 설치합니다.
이제 프로젝트를 열고, MarqueeLabel을 사용할 준비가 완료되었습니다.

3. 책 소개 애니메이션 구현하기

이제 실제로 MarqueeLabel을 사용하여 책 소개 애니메이션을 구현해보겠습니다. 먼저, 책 소개를 표시할 화면을 만들고, MarqueeLabel을 추가합니다.

import UIKit
import MarqueeLabel

class BookIntroViewController: UIViewController {
    @IBOutlet weak var titleLabel: MarqueeLabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // MarqueeLabel 설정
        titleLabel.type = .continuous
        titleLabel.animationCurve = .easeInOut
        titleLabel.speed = .duration(15.0)
        titleLabel.trailingBuffer = 30.0
        
        // 책 소개 텍스트
        titleLabel.text = "이 책은 신비로운 세계로 여러분을 초대합니다. 풍부한 상상력과 재미있는 이야기로 여러분을 빠져나올 수 없는 모험으로 이끕니다."
    }
}

위의 코드에서 MarqueeLabel은 MarqueeLabel 라이브러리에서 제공하는 UILabel의 하위 클래스입니다. titleLabel은 스크롤될 책 소개 텍스트를 나타내는 MarqueeLabel 객체입니다.

MarqueeLabel 설정에서 type은 스크롤 속도와 관련되어 연속형으로 설정합니다. animationCurve는 애니메이션의 곡선 형태를 지정하며, speed는 스크롤 속도를 설정합니다. trailingBuffer는 스크롤이 끝난 후에 글자가 사라지지 않고 남아있을 영역의 크기를 나타냅니다.

마지막으로, 책 소개 텍스트를 titleLabel.text에 설정하여 화면에서 스크롤되도록 합니다.

4. 책 소개 애니메이션 테스트

이제 앱을 실행하여 책 소개 애니메이션을 테스트해보겠습니다. 책 소개를 스크롤하면서 표시되는지 확인해보세요.

결론

MarqueeLabel을 사용하여 책 소개 애니메이션을 구현하는 방법에 대해 알아보았습니다. MarqueeLabel 라이브러리를 사용하면 간단한 설정만으로 텍스트 스크롤 애니메이션을 구현할 수 있습니다. 구현해야 할 스크롤 애니메이션이 있는 경우에는 MarqueeLabel을 활용하면 시각적으로 흥미로운 애니메이션 효과를 적용할 수 있습니다.

참고문서

MarqueeLabel GitHub Repository: https://github.com/cbpowell/MarqueeLabel
Cocoapods: https://cocoapods.org/