跳转至
Structure

AnyTransition

A transition to use for animating a view on and off the screen.

Declaration

@frozen struct AnyTransition

Overview

Use this structure along with the transition(_:) view modifier to animate the way a View comes onto and leaves the screen.

Examples of transitions include:

A transition is only one half of animating a view. You also must specify a timing curve, (somewhat confusingly) called an "animation." See Animation for more info on creating one of these timing curves.

Creating a transition

The easiest way to creat a transition is using one of the many pre-made static members available in AnyTransition. See the sliding banana example at the bottom of this page.

You can also create your own static members by extending this struct.

extension AnyTransition {
    static var slideAndFade: AnyTransition {
        return AnyTransition.slide.combined(with: .opacity)
    }
}

Using a transition

Transitions are most often used by attaching them to views that have "if" statements on them.

As long as a timing curve (Animation) is specified, whenever the view is added to or removed from the screen, it will do so with the specified transition.

There are many ways to add an animation to the transition:

The following example applies the slide transition:

struct TransitioningBananaView: View {
    @State var showBanana = true

    var body: some View {
        Button("Slide the banana ➡️") {
            withAnimation { showBanana.toggle() }
        }
        if showBanana {
            Text("🍌")
                .transition(.slide)
        }
    }
}
A gif displaying a view containing a button that reads "Slide the banana ➡️" that triggers the slide transition of the text view "🍌" when pressed; the "🍌" slides down from beneath the button, displacing it until it slides up again on the other side.

  • Note: By default, views transition using AnyTransition/opacity.

Availability

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics


Type Method

asymmetric(insertion:removal:) Provides a composite transition that uses a different transition for insertion versus removal.

modifier(active:identity:) Returns a transition defined between an active modifier and an identity modifier.

move(edge:) Returns a transition that moves the view away, towards the specified edge of the view.

offset(_:) A transition that moves a view from its current place on screen to another place using a CGSize.

offset(x:y:) A transition that moves a view from its current place on screen to another place using x and y offsets.

scale(scale:anchor:) A transition that scales a view from its current size to a new size.


Type Property

identity A transition that does nothing.

opacity A transition from transparent to opaque on insertion, and from opaque to transparent on removal.

scale A transition that scales a view from its current size down to zero size.

slide A transition that inserts by moving in from the leading edge, and removes by moving out towards the trailing edge.


Instance Method

animation(_:) Attaches an animation to this transition.

combined(with:) Combines this transition with another, returning a new transition that is the result of both transitions being applied.