[swift] 이미지 슬라이드쇼에서 이미지 흔들림 효과 추가하기

27 Nov 2023

swift

이미지 슬라이드쇼에 흔들림 효과를 추가하면 사용자에게 더욱 동적인 경험을 제공할 수 있습니다. 이 글에서는 Swift 언어를 사용하여 이미지 슬라이드쇼에 흔들림 효과를 추가하는 방법을 알아보겠습니다.

1. CABasicAnimation 사용하기

CABasicAnimation은 Core Animation의 기능을 사용하여 간단한 애니메이션을 만들 수 있는 기능입니다. 이를 사용하여 이미지를 흔들리게 만들어보겠습니다.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let animation = CABasicAnimation(keyPath: "position")
        animation.duration = 0.1
        animation.repeatCount = 2
        animation.autoreverses = true
        animation.fromValue = NSValue(cgPoint: CGPoint(x: imageView.center.x - 5, y: imageView.center.y))
        animation.toValue = NSValue(cgPoint: CGPoint(x: imageView.center.x + 5, y: imageView.center.y))
        
        imageView.layer.add(animation, forKey: "position")
    }
}

위 코드에서는 CABasicAnimation을 사용하여 이미지를 흔들도록 애니메이션을 만들었습니다. animation.duration은 애니메이션의 지속 시간을 나타내며, animation.repeatCount는 애니메이션의 반복 횟수를 나타냅니다. animation.autoreverses는 애니메이션을 역재생하는지 여부를 나타내며, animation.fromValue와 animation.toValue는 애니메이션의 시작과 끝 값입니다.

2. 실제 이미지에 적용하기

위의 코드를 실제 이미지 슬라이드쇼에 적용하려면 UIImageView 객체를 사용하여 이미지를 표시하고 해당 객체에 애니메이션을 추가해야 합니다. 다음은 슬라이드쇼 이미지를 표시하고 흔들림 효과를 적용하는 예제입니다.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var imageView: UIImageView!
    var imageIndex = 0
    var images = [UIImage(named: "image1"), UIImage(named: "image2"), UIImage(named: "image3")]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap))
        imageView.addGestureRecognizer(tapGesture)
        
        updateImage()
    }
    
    @objc func handleTap() {
        let animation = CABasicAnimation(keyPath: "position")
        animation.duration = 0.1
        animation.repeatCount = 2
        animation.autoreverses = true
        animation.fromValue = NSValue(cgPoint: CGPoint(x: imageView.center.x - 5, y: imageView.center.y))
        animation.toValue = NSValue(cgPoint: CGPoint(x: imageView.center.x + 5, y: imageView.center.y))
        
        imageView.layer.add(animation, forKey: "position")
    }
    
    func updateImage() {
        imageView.image = images[imageIndex]
    }
}

위의 코드에서는 사용자가 이미지를 탭할 때마다 handleTap() 함수가 호출되어 흔들림 애니메이션을 실행하도록 설정했습니다. 이미지를 변경하기 위해 updateImage() 함수를 사용하고, 탭 제스처를 추가하려면 UIImageView 객체에 UITapGestureRecognizer를 추가해야 합니다.

이제 이미지 슬라이드쇼에 이미지를 흔들리는 효과를 추가했습니다. 사용자가 이미지를 탭할 때마다 해당 이미지가 흔들리며, 더욱 동적인 슬라이드쇼를 즐길 수 있습니다.

1. CABasicAnimation 사용하기

2. 실제 이미지에 적용하기

참고 자료