How to create 3D effects like Cover Flow using ScrollView and GeometryReader

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-3d-effects-like-cover-flow-using-scrollview-and-geometryreader]

 

How to create 3D effects like Cover Flow using ScrollView and GeometryReader

 

GeometryReader와 위치를 변경할 수 있는 뷰를 조합하는 경우에(드래그 제스쳐를 가지거나 List 내부에 있는 것처럼) 매우 쉽게 3D 효과를 만들 수 있습니다. GeometryReader는 뷰에 대한 좌표를 읽을수 있고 해당 값을 rotation3DEffect() modifier에 직접 제공합니다. 

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 0) {
                ForEach(1..<10) { num in
                    VStack {
                        GeometryReader { geo in
                            Text("Number \(num)")
                                .font(.largeTitle)
                            .padding()
                            .background(Color.red)
                            .rotation3DEffect(.degrees(-Double(geo.frame(in: .global).minX) / 8), axis: (x: 0, y: 1, z: 0))
                        }
                    }
                    .frame(width: 180)
                }
            }
            .padding()
        }
    }
}

 

DragGesture()와 비슷한 것일 수 있습니다 - 해당 코드는 X와 Y 축 모두에서 드래그 할 수 있는 카드 같은 사각형을 만들고, GeometryReader에서의 값을 적용하기 위해 두개의 rotation3DEffect() modifiers를 사용합니다.

struct ContentView: View {
    @State var dragAmount = CGSize.zero

    var body: some View {
        VStack {
            GeometryReader { geo in
                Rectangle()
                    .fill(LinearGradient(gradient: Gradient(colors: [.yellow, .red]), startPoint: .topLeading, endPoint: .bottomTrailing))
                    .frame(width: 300, height: 200)
                    .clipShape(RoundedRectangle(cornerRadius: 20))
                    .rotation3DEffect(.degrees(-Double(self.dragAmount.width) / 20), axis: (x: 0, y: 1, z: 0))
                    .rotation3DEffect(.degrees(Double(self.dragAmount.height / 20)), axis: (x: 1, y: 0, z: 0))
                    .offset(self.dragAmount)
                    .gesture(
                        DragGesture()
                            .onChanged { self.dragAmount = $0.translation }
                            .onEnded { _ in
                                withAnimation(.spring()) {
                                    self.dragAmount = .zero
                                }
                            }
                    )
            }
        }
    }
}

 

카드를 드래그하면 원근감 효과를 주기 위해서 회전하는 것을 보게 될 것입니다.