Canvatorium Visio Lab 5006
Animate Offset & rotation3DEffect.
Using rotation3DEffect along with offset to create a pseudo-3D layout.
struct Lab5006: View {
@State private var isClicked = false
var body: some View {
VStack(alignment: .center) {
Toggle(isOn: $isClicked.animation()) {
Text("Show Depth")
}
.toggleStyle(.button)
HStack {
Rectangle()
.foregroundColor(.red)
.cornerRadius(24)
.shadow(radius: 20)
.offset(x: isClicked ? -60 : 0)
.offset(z: isClicked ? 60 : 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 ? 50 : 1)
Rectangle()
.foregroundColor(.blue)
.cornerRadius(24)
.shadow(radius: 20)
.offset(x: isClicked ? 60 : 0)
.offset(z: isClicked ? 60 : 1)
.rotation3DEffect(
Angle(degrees: isClicked ? -25 : 0),
axis: (x: 0, y: 1, z: 0)
)
}
}
.padding(60)
}
}