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

27 Nov 2023

swift

이미지 슬라이드쇼는 웹사이트나 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자들에게 여러 개의 이미지를 자동으로 전환하여 보여주는 것으로 사용자 경험을 향상시킬 수 있습니다.

이번에는 이미지 슬라이드쇼에 뒤집기 효과를 추가하는 방법에 대해 알아보겠습니다. 예제는 Swift를 사용하여 작성됩니다.

Step 1: 이미지 슬라이드쇼 뷰 만들기

import SwiftUI

struct ImageSlideshowView: View {
    var images: [Image]
    @State private var currentIndex = 0

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                self.images[self.currentIndex]
                    .resizable()
                    .scaledToFill()
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .clipped()
                    .animation(.easeInOut)

                Rectangle()
                    .fill(Color.black.opacity(0.001))
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .gesture(
                        DragGesture()
                            .onEnded { value in
                                if value.translation.width < 0 {
                                    withAnimation {
                                        self.currentIndex = (self.currentIndex + 1) % self.images.count
                                    }
                                } else if value.translation.width > 0 {
                                    withAnimation {
                                        self.currentIndex = (self.currentIndex - 1 + self.images.count) % self.images.count
                                    }
                                }
                            }
                    )
            }
        }
    }
}

이미지 슬라이드쇼를 위한 ImageSlideshowView를 정의합니다. images 배열은 슬라이드쇼에 포함될 이미지들을 나타내며, currentIndex는 현재 보여지고 있는 이미지의 인덱스를 나타냅니다.

뷰의 body에서 GeometryReader를 이용하여 뷰의 크기를 가져올 수 있습니다. ZStack을 이용하여 이미지와 배경을 겹친 후, DragGesture를 이용하여 슬라이드쇼를 제어합니다. 사용자가 왼쪽으로 드래그하면 다음 이미지로 전환되고, 오른쪽으로 드래그하면 이전 이미지로 전환됩니다.

Step 2: 이미지 뒤집기 효과 추가하기

extension View {
    func flipEffect() -> AnyView {
        return AnyView(self.modifier(FlipEffect()))
    }
}

struct FlipEffect: GeometryEffect {
    var angle: Double = 0
    var animatableData: Double {
        get { angle }
        set { angle = newValue }
    }

    func effectValue(size: CGSize) -> ProjectionTransform {
        let angleInRadians = CGFloat(Angle(degrees: angle).radians)
        let rotation = CATransform3DMakeRotation(angleInRadians, 0, 1, 0)
        let transform = CATransform3DConcat(
            CATransform3DMakeTranslation(size.width / 2, 0, 0),
            CATransform3DMakeRotation(angleInRadians, 0, 1, 0)
        )
        return ProjectionTransform(transform)
    }
}

이미지 뒤집기 효과를 위한 flipEffect와 FlipEffect를 정의합니다. View 익스텐션을 이용하여 flipEffect 함수를 추가합니다. FlipEffect는 GeometryEffect 프로토콜을 따르며, effectValue 메서드를 통해 이미지에 뒤집기 효과를 적용합니다.

Step 3: 이미지 슬라이드쇼에 뒤집기 효과 적용하기

import SwiftUI

struct ContentView: View {
    var body: some View {
        let images = [Image("image1"), Image("image2"), Image("image3")]
        return ImageSlideshowView(images: images.map { $0.flipEffect() })
    }
}

ContentView 뷰에서 이미지 슬라이드쇼에 뒤집기 효과를 적용합니다. images 배열의 각 이미지에 flipEffect()를 호출하여 뒤집기 효과를 적용합니다.

위의 예제 코드를 참고하여 이미지 슬라이드쇼에 이미지 뒤집기 효과를 추가할 수 있습니다.

참고 자료: