Canvatorium Visio Lab 5009
Animate Offset & rotation3DEffect, in a Volume this time.
Repeating the concept from Lab 5006 but using a Volume instead of a Window.
struct Lab5009: View {
@State private var isClicked = false
var body: some View {
ZStack() {
VStack {
Spacer()
HStack {
Rectangle()
.foregroundColor(.red)
.cornerRadius(24)
.shadow(radius: 20)
.offset(x: isClicked ? -60 : 0)
.offset(z: isClicked ? 80 : 1)
.rotation3DEffect(
Angle(degrees: isClicked ? 25 : 0),
axis: (x: 0, y: 1, z: 0)
)
Rectangle()
.foregroundColor(.yellow)
.cornerRadius(24)
.shadow(radius: 20)
.offset(z: isClicked ? 20 : 1)
Rectangle()
.foregroundColor(.blue)
.cornerRadius(24)
.shadow(radius: 20)
.offset(x: isClicked ? 60 : 0)
.offset(z: isClicked ? 80 : 1)
.rotation3DEffect(
Angle(degrees: isClicked ? -25 : 0),
axis: (x: 0, y: 1, z: 0)
)
}
.frame( height: 500)
}
Spacer()
VStack {
Spacer()
Toggle(isOn: $isClicked.animation()) {
Text("Toggle 3D View")
}
.toggleStyle(.button)
.glassBackgroundEffect(in: .capsule)
.padding3D(100)
}
}
.padding(60)
}
}