[swift] 이미지슬라이드쇼 애니메이션 효과

27 Nov 2023

swift

이미지 슬라이드쇼 애니메이션 효과는 사용자에게 시각적으로 흥미로운 경험을 제공하여 웹페이지나 앱을 더욱 매력적으로 만들 수 있습니다. Swift를 사용하여 이미지 슬라이드쇼를 만들고 애니메이션 효과를 추가하는 방법에 대해 살펴보겠습니다.

이미지 슬라이드쇼 구성하기

먼저, 이미지 슬라이드쇼를 구성하기 위해 UIImageView와 Timer를 사용합니다.

import UIKit

class ImageSlideshowViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    
    let images = ["image1", "image2", "image3", "image4"]
    var currentIndex = 0
    var timer: Timer?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 처음 이미지로 설정
        imageView.image = UIImage(named: images[currentIndex])
        
        // 타이머 시작
        timer = Timer.scheduledTimer(timeInterval: 3, target: self, selector: #selector(showNextImage), userInfo: nil, repeats: true)
    }
    
    @objc func showNextImage() {
        currentIndex += 1
        
        // 마지막 이미지일 경우 처음 이미지로 돌아감
        if currentIndex >= images.count {
            currentIndex = 0
        }
        
        // 다음 이미지 보여주기
        imageView.image = UIImage(named: images[currentIndex])
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        // 타이머 정지
        timer?.invalidate()
        timer = nil
    }
    
}

위의 코드에서 ImageSlideshowViewController는 UIViewController를 상속받아 만들어진 이미지 슬라이드쇼를 담당하는 컨트롤러입니다. imageView는 슬라이드쇼에 사용될 이미지를 보여주는 UIImageView입니다. images 배열은 슬라이드쇼에 사용될 이미지 이름들을 담고 있습니다.

애니메이션 효과 추가하기

슬라이드쇼에 애니메이션 효과를 추가하기 위해 UIView의 transition 기능을 사용합니다. 아래의 코드는 슬라이드쇼 이미지 전환 시 페이드 인/아웃 효과를 적용하는 방법을 보여줍니다.

import UIKit

class ImageSlideshowViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    
    let images = ["image1", "image2", "image3", "image4"]
    var currentIndex = 0
    var timer: Timer?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 처음 이미지로 설정
        imageView.image = UIImage(named: images[currentIndex])
        
        // 타이머 시작
        timer = Timer.scheduledTimer(timeInterval: 3, target: self, selector: #selector(showNextImage), userInfo: nil, repeats: true)
    }
    
    @objc func showNextImage() {
        currentIndex += 1
        
        // 마지막 이미지일 경우 처음 이미지로 돌아감
        if currentIndex >= images.count {
            currentIndex = 0
        }
        
        // 이미지 전환 애니메이션 적용
        UIView.transition(with: imageView, duration: 1.0, options: .transitionCrossDissolve, animations: {
            self.imageView.image = UIImage(named: self.images[self.currentIndex])
        }, completion: nil)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        // 타이머 정지
        timer?.invalidate()
        timer = nil
    }
    
}

위의 코드에서 UIView.transition 메서드를 사용하여 이미지 전환 애니메이션을 적용하였습니다. duration 매개변수는 애니메이션의 지속 시간을 결정하고, options 매개변수에 .transitionCrossDissolve 옵션을 사용하여 페이드 인/아웃 효과를 지정했습니다.

즉, UIViewController에서 UIView의 transition 기능을 사용하여 이미지 슬라이드쇼의 애니메이션 효과를 적용할 수 있습니다.

이 외에도 다양한 애니메이션 효과를 사용할 수 있으며, UIView의 메서드들을 활용하여 원하는 슬라이드쇼 애니메이션을 구현할 수 있습니다.

참고 자료: