Contents

contentTransition(_:)

Modifies the view to use a given transition as its method of animating changes to the contents of its views.

Declaration

nonisolated func contentTransition(_ transition: ContentTransition) -> some View

Parameters

  • transition:

    The transition to apply when animating the content change.

Discussion

This modifier allows you to perform a transition that animates a change within a single view. The provided ContentTransition can present an opacity animation for content changes, an interpolated animation of the content’s paths as they change, or perform no animation at all.

In the following example, a Button changes the color and font size of a Text view. Since both of these properties apply to the paths of the text, the interpolate transition can animate a gradual change to these properties through the entire transition. By contrast, the opacity transition would simply fade between the start and end states.

private static let font1 = Font.system(size: 20)
private static let font2 = Font.system(size: 45)

@State private var color = Color.red
@State private var currentFont = font1

var body: some View {
    VStack {
        Text("Content transition")
            .foregroundColor(color)
            .font(currentFont)
            .contentTransition(.interpolate)
        Spacer()
        Button("Change") {
            withAnimation(Animation.easeInOut(duration: 5.0)) {
                color = (color == .red) ? .green : .red
                currentFont = (currentFont == font1) ? font2 : font1
            }
        }
    }
}

This example uses an ease-in–ease-out animation with a five-second duration to make it easier to see the effect of the interpolation. The figure below shows the Text at the beginning of the animation, halfway through, and at the end.

Time

Display

Start

[Image]

Middle

[Image]

End

[Image]

To control whether content transitions use GPU-accelerated rendering, set the value of the contentTransitionAddsDrawingGroup environment variable.

See Also

Defining transitions