EducaSwift

Transitions in SwiftUI provide a smooth way to animate views as they appear or disappear. While SwiftUI offers built-in transitions like .slide and .opacity, you can create custom transitions to give your app a unique look and feel. In this article, we’ll explore how to create custom transitions in SwiftUI by combining different animations, modifiers, and effects to achieve more complex and engaging transitions.

Understanding Transitions

In SwiftUI, a transition defines how a view changes as it enters or exits the screen. Transitions are applied using the .transition() modifier on a view within an animation context. For example:

import SwiftUI

struct ContentView: View {
    @State private var isVisible = false

    var body: some View {
        VStack {
            if isVisible {
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 100, height: 100)
                    .transition(.slide)
            }
            Button("Toggle") {
                withAnimation {
                    isVisible.toggle()
                }
            }
        }
    }
}

Building Custom Transitions

Custom transitions are created by combining SwiftUI’s built-in AnyTransition types. A custom transition can involve multiple animations, effects, and transformations. Here are some common techniques:

1. Asymetric transition

The .asymmetric transition lets you define different transitions for views when they appear and disappear. This can add subtle but effective dynamics to your UI. For instance:

.transition(.asymmetric(insertion: .scale, removal: .opacity))

2. Combined Transitions

SwiftUI allows you to combine multiple transitions using the .combined modifier. This is useful when you want to mix different effects. Here’s an example of a scale-and-slide custom transition:

.transition(.scale.combined(with: .slide))

Custom Transitions

We can create a custom AnyTransition using its static .modifier() function. This function takes a ViewModifier as a parameter, so let's create it first:

struct RotationTransition: ViewModifier {
    let rotation: Double

    func body(content: Content) -> some View {
        content
            .rotationEffect(.degrees(rotation))
            .opacity(rotation == 0 ? 1 : 0)
    }
}

Then we can declare our own AnyTransition.

extension AnyTransition {
    static func rotation(angle: Double) -> AnyTransition {
        .modifier(
            active: RotationTransition(rotation: angle),
            identity: RotationTransition(rotation: 0)
        )
    }
}

And finally, we can use it as any other transition.

.transition(.rotation(angle: -90))