[swift] 이미지 슬라이드쇼에서 이미지 비틀기 효과 추가하기

27 Nov 2023

swift

이미지 슬라이드쇼에 동적인 비틀기 효과를 추가하는 방법을 알아보겠습니다. 이미지를 비틀어서 화면에 보여주면 흥미로운 시각적 효과를 만들 수 있습니다. 이를 위해 CATransform3D와 UIView.animate(withDuration:) 함수를 사용할 것입니다.

단계 1: 이미지 뷰 생성

먼저, 이미지 슬라이드쇼에 사용할 이미지 뷰를 생성해야 합니다. 다음은 이미지 뷰를 생성하는 코드입니다.

let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
imageView.image = UIImage(named: "image1")
self.view.addSubview(imageView)

단계 2: 이미지 비틀기 효과 추가

이제 이미지를 비틀기 효과를 주기 위해 CATransform3D를 사용합니다. 다음 코드를 사용하여 이미지를 화면에서 비틀 수 있습니다.

let transform = CATransform3DMakeRotation(.pi, 1, 0, 0)
imageView.layer.transform = transform

위의 예제는 이미지를 x축을 기준으로 180도 회전시킵니다. 여기서 .pi는 180도를 라디안 단위로 표현한 값입니다. 다른 회전 각도를 적용하려면 이 값을 조정하면 됩니다.

단계 3: 애니메이션 추가

비틀기 효과를 화면에 적용할 때 애니메이션을 추가하면 좋습니다. 이를 위해 UIView.animate(withDuration:) 함수를 사용합니다. 다음 코드를 사용하여 애니메이션을 추가합니다.

UIView.animate(withDuration: 1.0, delay: 0.0, options: .curveEaseInOut, animations: {
    let transform = CATransform3DIdentity
    imageView.layer.transform = transform
}, completion: nil)

위의 예제에서 withDuration 매개변수는 애니메이션의 지속 시간을 설정합니다. delay 매개변수는 애니메이션의 시작을 지연시킬 수 있습니다. options 매개변수는 애니메이션의 이징 옵션을 설정합니다. animations 클로저 내에서 최종적인 transform 값을 CATransform3DIdentity로 설정하여 이미지를 원래 상태로 되돌립니다.

전체 예제 코드

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
        imageView.image = UIImage(named: "image1")
        self.view.addSubview(imageView)
        
        let transform = CATransform3DMakeRotation(.pi, 1, 0, 0)
        imageView.layer.transform = transform
        
        UIView.animate(withDuration: 1.0, delay: 0.0, options: .curveEaseInOut, animations: {
            let transform = CATransform3DIdentity
            imageView.layer.transform = transform
        }, completion: nil)
    }
}

위의 예제 코드를 참고하여 이미지 슬라이드쇼에 이미지 비틀기 효과를 추가해 보세요.