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.

A gif a smooth animation for adding and removing a slash on a bell icon when it's tapped

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.

For detailed guidance on incorporating SwiftUI views into your existing UIKit app, check out my book Integrating SwiftUI into UIKit Apps. Additionally, if you're eager to enhance your Swift programming skills, my latest book Swift Gems offers over a hundred advanced tips and techniques to take your Swift code to the next level.

Swift Gems by Natalia Panferova book coverSwift Gems by Natalia Panferova book cover

Level up your Swift skills!$35

100+ tips to take your Swift code to the next level

Swift Gemsby Natalia Panferova

  • Advanced Swift techniques for experienced developers bypassing basic tutorials
  • Curated, actionable tips ready for immediate integration into any Swift project
  • Strategies to improve code quality, structure, and performance across all platforms

Level up your Swift skills!

100+ tips to take your Swift code to the next level

Swift Gems by Natalia Panferova book coverSwift Gems by Natalia Panferova book cover

Swift Gems

by Natalia Panferova

$35