How to combine transitions
Updated for Xcode 13.0 beta 2
When adding or removing a view, SwiftUI lets you combine transitions to make new animation styles using the combined(with:) method.
For example, you can make a view move (one transition) and fade (a second transition) at the same time like this:
struct ContentView: View {
@State private var showDetails = false
var body: some View {
VStack {
Button("Press to show details") {
withAnimation {
showDetails.toggle()
}
}
if showDetails {
Text("Details go here.")
.transition(AnyTransition.opacity.combined(with: .slide))
}
}
}
}
Download this as an Xcode project
To make combined transitions easier to use and re-use, you can create them as extensions on AnyTransition. For example, we could define a custom moveAndScale transition and try it out straight away:
extension AnyTransition {
static var moveAndScale: AnyTransition {
AnyTransition.move(edge: .bottom).combined(with: .scale)
}
}
struct ContentView: View {
@State private var showDetails = false
var body: some View {
VStack {
Button("Press to show details") {
withAnimation {
showDetails.toggle()
}
}
if showDetails {
Text("Details go here.")
.transition(.moveAndScale)
}
}
}
}
SPONSORED From August 2nd to 8th you can join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
