How to create 3D effects like Cover Flow using ScrollView and GeometryReader
Fully updated for Xcode 11.1
If we combine GeometryReader with any view that can change position – such as something that has a drag gestures or is inside a List – we can create 3D effects very easily. GeometryReader allows us to read the coordinates for a view, and feed those values directly into a rotation3DEffect() modifier.
For example, we could create a Cover Flow-style scrolling effect by stacking up many text views horizontally in a scroll view, then applying rotation3DEffect() so that as they move in the scroll view they gently spin, like this:
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()
}
}
}We could something similar with a DragGesture() – this code creates a card-like rectangle that can be dragged around in both X and Y axes, and uses two rotation3DEffect() modifiers to apply values from GeometryReader:
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
}
}
)
}
}
}
}As you drag the card around you’ll see it rotates to give a perspective effect.
SAVE 20% ON iOS CONF SG The largest iOS conference in Southeast Asia is back in Singapore for the 5th time in January 2020, now with two days of workshops plus two days of talks on SwiftUI, Combine, GraphQL, and more! Save a massive 20% on your tickets by clicking on this link.
Similar solutions…
