[swift] 이미지를 순서대로 애니메이션으로 보여주기

05 Dec 2023

swift

iOS 앱 개발을 하다보면 이미지를 순서대로 애니메이션으로 보여주어야 하는 경우가 종종 발생합니다. 예를 들어 프레임 애니메이션으로 버튼을 클릭할 때마다 이미지가 변경되는 효과를 구현하고 싶을 수 있습니다. 이번 포스트에서는 Swift를 사용하여 이미지를 순서대로 애니메이션으로 보여주는 방법을 알아보겠습니다.

이미지 순서대로 애니메이션 구현하기

먼저 애니메이션에 사용할 이미지 파일들을 프로젝트에 추가합니다. Assets 폴더에 이미지 파일들을 드래그 앤 드롭하여 추가할 수 있습니다.
애니메이션을 보여줄 뷰를 생성하고 위치를 설정합니다. 예를 들어 UIImageView를 사용하여 이미지를 보여줄 수 있습니다.

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 이미지 뷰의 위치 및 크기 설정
        imageView.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
    }
}

애니메이션에 사용할 이미지들을 배열에 저장합니다. 예를 들어 이미지 파일의 이름을 순서대로 저장할 수 있습니다. (이미지 파일의 확장자는 제외)

let imageNames = ["image1", "image2", "image3"]

애니메이션을 시작하는 함수를 작성합니다. UIImageView의 animationImages 속성을 이용하여 이미지 배열과 애니메이션의 기간을 설정할 수 있습니다.

func startAnimation() {
    // 이미지 배열 생성
    var images = [UIImage]()
    
    // 이미지 이름 배열을 순회하면서 이미지 생성
    for name in imageNames {
        if let image = UIImage(named: name) {
            images.append(image)
        }
    }
    
    // 애니메이션 설정
    imageView.animationImages = images
    imageView.animationDuration = 1.0 // 애니메이션 재생 기간 (초)
    imageView.animationRepeatCount = 0 // 반복 횟수 (0은 무한 반복)
    
    // 애니메이션 시작
    imageView.startAnimating()
}

애니메이션을 시작할 때 해당 함수를 호출합니다. 예를 들어 버튼을 클릭했을 때 애니메이션을 실행할 수 있습니다.

@IBAction func startButtonTapped(_ sender: UIButton) {
    startAnimation()
}

이제 이미지 순서대로 애니메이션을 보여주는 기능을 구현했습니다. 테스트해보면 이미지가 순서대로 변경되며 애니메이션이 재생됨을 확인할 수 있습니다.

마무리

이번에는 Swift를 사용하여 이미지를 순서대로 애니메이션으로 보여주는 방법에 대해 알아보았습니다. 앱 개발 중 이미지 애니메이션을 구현할 때 유용하게 활용할 수 있습니다. 추가적으로 애니메이션 속도 및 반복 횟수 등을 세부적으로 설정할 수도 있으니 필요에 따라 조정하면 됩니다.