[swift] Swift로 화면 스크롤 애니메이션 구현하기

07 Dec 2023

swift

스크롤 애니메이션은 사용자 경험을 향상시키기 위해 많이 사용되며, Swift로 구현하는 것은 매우 간단합니다. 이번 튜토리얼에서는 UIView의 transform 속성을 사용하여 화면 스크롤 애니메이션을 구현하는 방법을 알아보겠습니다.

뷰 컨트롤러 설정

먼저, 스크롤 애니메이션을 적용할 뷰 컨트롤러를 설정해야 합니다. 해당 뷰 컨트롤러를 Storyboard나 코드로 생성한 후, UIScrollView를 추가하고 컨텐츠를 설정합니다.

import UIKit

class ScrollViewController: UIViewController {
    
    @IBOutlet weak var scrollView: UIScrollView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 스크롤 가능한 컨텐츠의 크기 설정
        scrollView.contentSize = CGSize(width: self.view.frame.width, height: 1000)
    }
}

스크롤 애니메이션 구현

ScrollView를 만들었다면 이제 스크롤 애니메이션을 구현해보겠습니다. 우리는 스크롤을 할 때마다 화면 상단의 뷰가 서서히 사라지는 효과를 주고자 합니다.

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    // 스크롤뷰의 y오프셋 값
    let yOffset = scrollView.contentOffset.y
    
    // 화면 상단의 뷰에 대한 애니메이션 효과
    let alpha = 1 - (yOffset / 200)
    self.view.alpha = alpha
}

스크롤뷰에 대한 delegate 메소드인 scrollViewDidScroll을 사용하여 스크롤 이벤트가 발생할 때마다 해당 메소드가 호출됩니다. 그리고 yOffset을 계산하여 스크롤 위치에 따른 애니메이션을 적용합니다. 위의 코드에서는 스크롤이 일어날 때마다 화면 최상단의 뷰가 서서히 사라지도록 alpha 값을 조정하고 있습니다.

뷰 컨트롤러에 Delegate 연결

스크롤 애니메이션을 구현했다면, 해당 뷰 컨트롤러에 UIScrollViewDelegate를 연결해야 합니다.

class ScrollViewController: UIViewController, UIScrollViewDelegate {
    //...
    //UIScrollViewDelegate 메소드 구현
    //...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        scrollView.delegate = self
    }
}

위 코드에서는 viewDidLoad 메소드에서 scrollView의 delegate를 해당 뷰 컨트롤러로 설정하고 있습니다.

마무리

이제 스크롤 애니메이션을 구현하기 위한 기본적인 과정을 알아보았습니다. 다양한 애니메이션 효과를 적용하는 것은 여러분의 창의력에 달려있습니다. Swift로 쉽게 화면 스크롤 애니메이션을 구현하고 사용자 경험을 향상시켜보세요!

참고 자료

Apple Developer Documentation - UIScrollViewDelegate