Utilizing SymbolEffect to Animate SF Symbols in iOS 17

With regards to designing visually interesting and intuitive person interfaces in iOS growth, SF Symbols are a useful asset. It presents 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 unbelievable assortment of expressive animations. SwiftUI presents builders the flexibility to leverage these animations utilizing the brand new symbolEffect modifier.

This function empowers builders to create numerous and charming 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’ll present you how you can work with this new modifier to create varied forms 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 sort. Right here is an instance:

struct ContentView: View {
    @State personal 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 variety of built-in animations together with Seem, Disappear, Bounce, Scale, Pulse, Variable Shade, and Exchange. Within the code above, we use the bounce animation. So, whenever you faucet the image within the preview canvas, it exhibits a bouncing impact.

Make it Repeatable

By default, the animation is simply 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)

It will obtain an animated impact that repeats indefinitely. If you happen to need to repeat the impact for a selected variety of instances, you possibly can make the most of the .repeat operate and point out the specified repeat rely as proven beneath:

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

Controlling the animation velocity

As well as, you may have the pliability to customise the animation velocity by using the .velocity operate throughout the choices parameter. As an illustration, in the event you want to decelerate the animation, you possibly can set the worth of the .velocity operate to 0.1, as demonstrated beneath:

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

Animation Sorts

As acknowledged earlier, SwiftUI supplies a wide range of built-in animation sorts, similar to Bounce, Scale, Pulse, Variable Shade, and Exchange. Up till now, we’ve got solely used the bounce animation. Now, let’s discover and take a look at out different animation sorts utilizing the offered code snippet:

struct SymbolAnimationView: View {
    @State personal 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 colour")
                    .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 presents a definite impact by progressively fading the opacity of particular or all layers throughout the picture. However, the variableColor animation replaces the opacity of variable layers within the picture, offering a novel 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 doable to use a number of symbolEffect modifiers to a view, permitting you to attain a customized impact by combining completely different animations.

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

Content material Transition and Exchange Animation

In sure eventualities, there could also be a have to transition between completely different symbols inside a picture. As an illustration, 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 together with the Exchange animation, as demonstrated beneath:

Picture(systemName: animate ? "checkmark.circle" : "touchid")
    .font(.system(measurement: 100))
    .symbolRenderingMode(.palette)
    .symbolEffect(.bounce, worth: animate)
    .contentTransition(.symbolEffect(.exchange))
    .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 essential utilization of symbolEffect, making animations repeatable, controlling animation velocity, and exploring completely different animation sorts. It additionally covers content material transition and exchange animation.

If in case you have discovered this tutorial gratifying and wish to discover SwiftUI additional, we extremely suggest testing our complete e-book, “Mastering SwiftUI.“