Canvatorium Visio Lab 5005
Animate Z Offset for 2D Views.
Exploring what SwiftUI has to offer to add depth to 2D in visionOS. Three shapes in a ZStack with their offset adjusted via a toggle. We can go from a flat layout to one with views that pop out from the window.
struct Lab5005: View {
@State private var isClicked = false
var body: some View {
VStack {
HStack {
Text("Animate Z Offset for 2D Views")
.font(.title)
Spacer()
Toggle(isOn: $isClicked.animation()) {
Text("Show Depth")
}
.toggleStyle(.button)
}
ZStack {
Rectangle()
.foregroundColor(.red)
.cornerRadius(24)
.shadow(radius: 20)
.offset(z: isClicked ? 25 : 0)
Rectangle()
.foregroundColor(.yellow)
.cornerRadius(24)
.shadow(radius: 20)
.offset(z: isClicked ? 50 : 1)
.padding(20)
Rectangle()
.foregroundColor(.blue)
.cornerRadius(24)
.shadow(radius: 20)
.offset(z: isClicked ? 75 : 1)
.padding(40)
}
}
.padding(50)
}
}