[swift] Swift로 사진 슬라이드 쇼 애니메이션 구현하기

07 Dec 2023

swift

이번에는 Swift로 사진 슬라이드 쇼 애니메이션을 구현하는 방법을 소개하겠습니다. 이 애니메이션은 이미지 파일들을 일렬로 나열한 후 일정 시간 간격으로 자동으로 전환되는 슬라이드 쇼를 구현합니다.

1. 프로젝트 설정

먼저, Xcode에서 새로운 Swift 프로젝트를 생성합니다. 프로젝트를 생성하고 Assets.xcassets에 애니메이션에 사용할 이미지들을 추가합니다.

2. 애니메이션 구현

2-1. 이미지 뷰 추가

뷰 컨트롤러에서 이미지를 표시할 UIImageView를 추가합니다. 이 뷰는 슬라이드 쇼 애니메이션에 사용될 이미지를 표시할 것입니다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // 이미지 뷰 설정
        imageView.contentMode = .scaleAspectFit
    }
}

2-2. 이미지 전환 애니메이션 구현

이제 이미지 전환 애니메이션을 구현해보겠습니다. UIImageView의 image 프로퍼티를 변경하면 이미지가 즉시 전환되기 때문에, 애니메이션 효과를 주기 위해서는 UIView.transition 메서드를 사용해야 합니다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

    var images: [UIImage] = [] // 애니메이션에 사용할 이미지들
    var currentImageIndex = 0 // 현재 표시 중인 이미지의 인덱스

    override func viewDidLoad() {
        super.viewDidLoad()

        // 이미지 뷰 설정
        imageView.contentMode = .scaleAspectFit

        // 이미지 배열 초기화
        images = [
            UIImage(named: "image1"),
            UIImage(named: "image2"),
            UIImage(named: "image3")
        ]

        // 애니메이션 시작
        startSlideShow()
    }

    func startSlideShow() {
        // 이미지 전환 애니메이션 설정
        UIView.transition(with: imageView,
                          duration: 2.0,
                          options: .transitionCrossDissolve,
                          animations: {
                            self.imageView.image = self.images[self.currentImageIndex]
                          },
                          completion: { _ in
                            // 다음 이미지로 넘어감
                            self.moveToNextImage()
                            // 재귀적으로 슬라이드 쇼 실행
                            self.startSlideShow()
                          })
    }

    func moveToNextImage() {
        currentImageIndex += 1
        if currentImageIndex == images.count {
            currentImageIndex = 0
        }
    }
}

2-3. 슬라이드 쇼 시작

앱이 실행될 때 슬라이드 쇼를 시작하도록 viewDidAppear 메서드를 추가합니다.

import UIKit

class ViewController: UIViewController {

    // ...

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // 슬라이드 쇼 시작
        startSlideShow()
    }

    // ...
}

3. 결과 확인

위의 코드를 실행하여 앱을 빌드하고 실행하면 사진 슬라이드 쇼 애니메이션이 시작됩니다. 일정 시간마다 이미지가 자동으로 전환되며, 부드러운 페이드 인/아웃 효과가 적용됩니다.

이제 직접 프로젝트에 이미지를 추가하고 애니메이션을 원하는 대로 수정하여 여러분만의 사진 슬라이드 쇼를 만들어보세요!