Utilizing SymbolEffect to Animate SF Symbols in iOS 17

In terms of designing visually interesting and intuitive person interfaces in iOS growth, SF Symbols are a useful asset. It gives a complete library of over 5,000 customizable icons, designed particularly for iOS and macOS functions. The most recent iOS 17 replace brings SF Symbols 5, which introduces a incredible assortment of expressive animations. SwiftUI gives builders the flexibility to leverage these animations utilizing the brand new symbolEffect modifier.

This function empowers builders to create various and fascinating animations inside their apps. By incorporating symbolEffect into your SwiftUI code, builders can improve person interactions and create visually participating interfaces. On this tutorial, we are going to present you the right way to work with this new modifier to create numerous sorts of animations.

The Fundamental Utilization of SymbolEffect

To animate a SF image, you possibly can connect the brand new symbolEffect modifier to the Picture view and specify the specified animation kind. Right here is an instance:

struct ContentView: View {
    @State non-public var animate = false

    var physique: some View {
        Picture(systemName: "ellipsis.message")
            .font(.system(measurement: 100))
            .symbolRenderingMode(.palette)
            .foregroundStyle(.purple, .grey)
            .symbolEffect(.bounce, worth: animate)
            .onTapGesture {
                animate.toggle()
            }
    }
}

There are a selection of built-in animations together with Seem, Disappear, Bounce, Scale, Pulse, Variable Coloration, and Exchange. Within the code above, we use the bounce animation. So, once you faucet the image within the preview canvas, it exhibits a bouncing impact.

Make it Repeatable

By default, the animation is just performed as soon as. To make it repeatable, you possibly can set the choices parameter of the modifier to .repeating like this:

.symbolEffect(.bounce, choices: .repeating, worth: animate)

This may obtain an animated impact that repeats indefinitely. For those who want to repeat the impact for a particular variety of occasions, you possibly can make the most of the .repeat perform and point out the specified repeat depend as proven under:

.symbolEffect(.bounce, choices: .repeat(5), worth: animate)

Controlling the animation pace

As well as, you will have the flexibleness to customise the animation pace by using the .pace perform inside the choices parameter. As an example, when you want to decelerate the animation, you possibly can set the worth of the .pace perform to 0.1, as demonstrated under:

.symbolEffect(.bounce, choices: .pace(0.1), worth: animate)

Animation Varieties

As said earlier, SwiftUI gives a wide range of built-in animation varieties, comparable to Bounce, Scale, Pulse, Variable Coloration, and Exchange. Up till now, we’ve got completely used the bounce animation. Now, let’s discover and check out different animation varieties utilizing the supplied code snippet:

struct SymbolAnimationView: View {
    @State non-public var animate = false

    var physique: some View {
        VStack(alignment: .main, spacing: 50) {
            HStack {
                Picture(systemName: "mic.and.sign.meter")
                    .font(.system(measurement: 60))
                    .symbolRenderingMode(.palette)
                    .foregroundStyle(.purple, .grey)
                    .symbolEffect(.bounce, choices: .repeating, worth: animate)
                Textual content("Bounce")
                    .font(.largeTitle)
            }

            HStack {
                Picture(systemName: "mic.and.sign.meter")
                    .font(.system(measurement: 60))
                    .symbolRenderingMode(.palette)
                    .foregroundStyle(.purple, .grey)
                    .symbolEffect(.bounce.down, choices: .repeating, worth: animate)
                Textual content("Bounce (down)")
                    .font(.largeTitle)
            }

            HStack {
                Picture(systemName: "mic.and.sign.meter")
                    .font(.system(measurement: 60))
                    .symbolRenderingMode(.palette)
                    .foregroundStyle(.purple, .grey)
                    .symbolEffect(.pulse, choices: .repeating, worth: animate)
                Textual content("Pulse")
                    .font(.largeTitle)
            }

            HStack {
                Picture(systemName: "mic.and.sign.meter")
                    .font(.system(measurement: 60))
                    .symbolRenderingMode(.palette)
                    .foregroundStyle(.purple, .grey)
                    .symbolEffect(.pulse.wholeSymbol, choices: .repeating, worth: animate)
                Textual content("Pulse (entire)")
                    .font(.largeTitle)
            }

            HStack {
                Picture(systemName: "mic.and.sign.meter")
                    .font(.system(measurement: 60))
                    .symbolRenderingMode(.palette)
                    .foregroundStyle(.purple, .grey)
                    .symbolEffect(.variableColor, choices: .repeating, worth: animate)
                Textual content("Variable coloration")
                    .font(.largeTitle)
            }

        }
        .onTapGesture {
            animate.toggle()
        }
    }
}

By tapping any of the pictures within the preview canvas, you possibly can see the animations coming to life. Compared to the bounce animation, the Pulse animation gives a definite impact by progressively fading the opacity of particular or all layers inside the picture. However, the variableColor animation replaces the opacity of variable layers within the picture, offering a singular visible transformation.

Even for the Bounce animation, you possibly can specify .bounce.down to bounce the image downward.

.symbolEffect(.bounce.down, choices: .repeating, worth: animate)

For added flexibility, it’s attainable to use a number of symbolEffect modifiers to a view, permitting you to attain a customized impact by combining totally different animations.

Picture(systemName: "ellipsis.message")
    .font(.system(measurement: 100))
    .symbolRenderingMode(.palette)
    .foregroundStyle(.purple, .grey)
    .symbolEffect(.bounce, choices: .pace(1.5), worth: animate)
    .symbolEffect(.pulse, choices: .repeating, worth: animate)
    .onTapGesture {
        animate.toggle()
    }

Content material Transition and Exchange Animation

In sure situations, there could also be a have to transition between totally different symbols inside a picture. As an example, when a person faucets the Contact ID image, it transforms right into a checkmark image. To make sure a seamless and visually pleasing transition, you possibly can make the most of the contentTransition modifier at the side of the Exchange animation, as demonstrated under:

Picture(systemName: animate ? "checkmark.circle" : "touchid")
    .font(.system(measurement: 100))
    .symbolRenderingMode(.palette)
    .symbolEffect(.bounce, worth: animate)
    .contentTransition(.symbolEffect(.substitute))
    .foregroundStyle(.purple, .grey)
    .onTapGesture {
        animate.toggle()
    }

Abstract

SF Symbols and symbolEffect present builders with highly effective instruments to reinforce person interactions and create visually participating interfaces in iOS and macOS functions.

This tutorial demonstrates the fundamental utilization of symbolEffect, making animations repeatable, controlling animation pace, and exploring totally different animation varieties. It additionally covers content material transition and substitute animation.

When you have discovered this tutorial gratifying and wish to discover SwiftUI additional, we extremely advocate testing our complete guide, “Mastering SwiftUI.“