Swift Animating Transitions
Main Idea
Transitions control how this insertion and removal takes place, and we can work with the built-in transitions, combine them in different ways, or even create wholly custom transitions.
@State private var isShowingRed = false
var body: some View {
VStack {
Button("Tap Me") {
withAnimation {
isShowingRed.toggle()
}
}
if isShowingRed {
Rectangle()
.fill(.red)
.frame(width: 200, height: 200)
.transition(.asymmetric(insertion: .scale, removal: .opacity))
}
}
}
// Custom transition
struct CornerRotateModifier: ViewModifier {
let amount: Double
let anchor: UnitPoint
func body(content: Content) -> some View {
content
.rotationEffect(.degrees(amount), anchor: anchor)
.clipped()
}
}
extension AnyTransition {
static var pivot: AnyTransition {
.modifier(
active: CornerRotateModifier(amount: -90, anchor: .topTrailing),
identity: CornerRotateModifier(amount: 0, anchor: .topTrailing)
)
}
}
struct ContentView: View {
@State private var isShowingRed = false
var body: some View {
ZStack {
if isShowingRed {
Rectangle()
.fill(.red)
.frame(width: 200, height: 200)
.transition(.pivot)
} else {
Rectangle()
.fill(.blue)
.frame(width: 200, height: 200)
.transition(.pivot)
}
}
.onTapGesture {
withAnimation {
isShowingRed.toggle()
}
}
}
}