[swift] 이미지 슬라이드쇼에서 이미지 글리치 효과 추가하기

27 Nov 2023

swift

이미지 슬라이드쇼에 흥미로운 시각 효과를 추가하고 싶으신가요? 이미지 글리치 효과를 사용하여 이미지를 일정 시간 간격으로 변경하는 간단한 슬라이드쇼를 만들어 보겠습니다.

필요한 라이브러리 설치

먼저, 이미지 슬라이드쇼를 만들기 위해 Kingfisher 라이브러리를 사용하겠습니다. Kingfisher는 이미지 다운로드 및 캐싱을 처리하는 유명한 라이브러리입니다. Cocoapods를 사용하여 라이브러리를 설치하세요.

pod 'Kingfisher'

이미지 글리치 효과 구현하기

import UIKit
import Kingfisher

class GlitchSlideShowViewController: UIViewController {
    @IBOutlet weak var imageView: UIImageView!
    var imageUrls: [String] = []
    var currentIndex: Int = 0

    override func viewDidLoad() {
        super.viewDidLoad()

        // 이미지 URL 목록을 설정하세요
        imageUrls = [
            "https://example.com/image1.jpg",
            "https://example.com/image2.jpg",
            "https://example.com/image3.jpg"
        ]

        // 첫 번째 이미지를 보여줍니다
        loadImageAtIndex(currentIndex)
        
        // 3초마다 이미지를 변경합니다
        Timer.scheduledTimer(timeInterval: 3, target: self, selector: #selector(changeImage), userInfo: nil, repeats: true)
    }

    @objc func changeImage() {
        currentIndex += 1
        if currentIndex >= imageUrls.count {
            currentIndex = 0
        }
        loadImageAtIndex(currentIndex)
    }
    
    func loadImageAtIndex(_ index: Int) {
        let imageUrl = URL(string: imageUrls[index])
        imageView.kf.setImage(with: imageUrl)
        
        // 이미지 글리치 효과를 추가합니다
        imageView.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
        UIView.animate(withDuration: 0.1, animations: {
            self.imageView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
        })
    }
}

슬라이드쇼에서 이미지를 전환하기 위해 Timer를 사용하고, Kingfisher를 통해 이미지를 다운로드하여 보여줍니다. 이미지를 변경할 때마다 loadImageAtIndex() 함수를 호출하여 이미지 글리치 효과를 추가합니다. 글리치 효과는 이미지를 더 크게 표시한 후 다시 원래 크기로 애니메이션을 주는 방식으로 구현했습니다.

이제 위의 코드를 사용하여 이미지 슬라이드쇼에 이미지 글리치 효과를 추가할 수 있습니다. 예제에서는 Kingfisher 라이브러리를 사용하여 이미지 다운로드 및 캐싱을 처리했습니다. 첫 번째 이미지 URL을 수정하여 원하는 이미지로 변경하고, 다른 이미지 URL을 추가하여 슬라이드쇼에 사용할 수 있습니다.

참고 자료:

Kingfisher GitHub