Enhanced replace transition for SF Symbols in iOS 18

iOS 18 introduces a new option for the ReplaceSymbolEffect called MagicReplace. This feature allows for smooth animations of slashes and badges in SF Symbols, enhancing the visual transitions in our apps.

The MagicReplace option is automatically applied to the replace symbol effect when possible, and it works specifically with related SF Symbols. This feature is particularly useful for tappable elements in our apps, such as various toggles.

Let's see how it works with an example of a notification toggle.

Button {
    withAnimation {
        notificationsEnabled.toggle()
    }
} label: {
    Label(
        "Toggle notifications",
        systemImage: notificationsEnabled ? "bell" : "bell.slash"
    )
}
.contentTransition(
    .symbolEffect(.replace)
)

In iOS 18 beta, this results in a smooth magic replace animation on the bell icon when the slash is added or removed.

While the new magic option is applied by default, we can also specify it explicitly along with a preferred fallback option.

.contentTransition(
    .symbolEffect(.replace.magic(fallback: .replace))
)

This new feature allows for more polished and visually appealing interactions in our apps, enhancing the overall user experience.

Deepen your understanding of SwiftUI!$35

The essential guide to SwiftUI core concepts and APIs

SwiftUI Fundamentalsby Natalia Panferova

• Explore the key APIs and design patterns that form the foundation of SwiftUI
• Develop a deep, practical understanding of how SwiftUI works under the hood
• Learn from a former Apple engineer who worked on widely used SwiftUI APIs

Deepen your understanding of SwiftUI!

The essential guide to SwiftUI core concepts and APIs

SwiftUI Fundamentals

by Natalia Panferova

$35