[swift] 이미지 슬라이드쇼에서 이미지 회전 효과 적용하기

27 Nov 2023

swift

이미지 슬라이드쇼를 구현하다보면, 이미지를 단순히 전환하는 것보다 좀 더 흥미로운 효과를 추가하고 싶을 수 있습니다. 이 중에서 이미지 회전 효과를 적용하는 방법을 알아보겠습니다.

1. 이미지 회전 효과

이미지 회전 효과는 이미지를 일정 각도로 회전시키는 효과입니다. 이를 구현하기 위해서는 CGAffineTransform을 이용해 이미지를 회전시킬 수 있습니다.

// 이미지를 회전시키는 함수
func rotateImage(image: UIImage, angle: CGFloat) -> UIImage? {
    let ciImage = CIImage(image: image)

    let filter = CIFilter(name: "CIAffineTransform")
    filter?.setValue(ciImage, forKey: kCIInputImageKey)

    let transform = CGAffineTransform(rotationAngle: angle)
    filter?.setValue(NSValue(cgAffineTransform: transform), forKey: kCIInputTransformKey)

    let outputImage = filter?.outputImage

    return UIImage(ciImage: outputImage!)
}

위의 함수는 UIImage를 입력으로 받아서, 주어진 각도에 따라 이미지를 회전시킨 후 새로운 이미지를 반환합니다. CIImage를 이용해 Core Image 필터를 적용하고, CGAffineTransform을 이용해 회전 효과를 적용합니다.

2. 이미지 슬라이드쇼에 회전 효과 적용하기

이미지 슬라이드쇼를 구현하기 위해 UICollectionView를 사용한다고 가정합니다. 이미지 슬라이드쇼의 셀 내부에는 UIImageView가 있을 것이므로, 이 UIImageView에 회전 효과를 적용해야 합니다.

// 이미지 슬라이드쇼 셀
class ImageSlideCell: UICollectionViewCell {
    @IBOutlet weak var imageView: UIImageView!
    
    // 이미지 회전 효과 적용
    func rotateImage(angle: CGFloat) {
        if let image = imageView.image {
            imageView.image = rotateImage(image: image, angle: angle)
        }
    }
}

위의 ImageSlideCell 클래스는 이미지 슬라이드쇼의 셀을 나타내는 클래스입니다. UIImageView 내부의 이미지에 회전 효과를 적용하기 위해 rotateImage 메서드를 추가했습니다.

이제, 이미지 슬라이드쇼의 데이터를 관리하는 클래스에서 셀에 회전 효과를 적용해주면 됩니다.

// 이미지 슬라이드쇼 데이터 관리 클래스
class ImageSlideData {
    private var images: [UIImage] = []
    
    // ...

    // 이미지 슬라이드셑 셀에 이미지와 회전 각도 설정
    func configureCell(cell: ImageSlideCell, index: Int) {
        let image = images[index]
        cell.imageView.image = image

        let angle = CGFloat((index % 2 == 0) ? 0 : Double.pi / 4) // 회전 각도 (0 또는 45도)
        cell.rotateImage(angle: angle)
    }
}

위의 코드는 이미지 슬라이드쇼 데이터를 관리하는 클래스에서 이미지와 회전 각도를 설정하여 셀에 적용하도록 구현한 부분입니다. 인덱스가 짝수일 경우 회전 각도를 0으로, 홀수일 경우 회전 각도를 45도로 설정하도록 하였습니다.

이제 이미지 슬라이드쇼를 실행해보면, 이미지가 회전하는 효과를 확인할 수 있습니다.

마무리

위의 방법을 통해 이미지 슬라이드쇼에 이미지 회전 효과를 적용하는 방법을 알아보았습니다. 이를 응용해 다양한 슬라이드쇼 효과를 구현할 수 있으며, 사용자에게 더욱 흥미로운 경험을 제공할 수 있을 것입니다.

References

Apple Developer Documentation: CGAffineTransform