Utilizing SymbolEffect to Animate SF Symbols in iOS 17

In relation to designing visually interesting and intuitive consumer interfaces in iOS improvement, SF Symbols are a useful asset. It affords a complete library of over 5,000 customizable icons, designed particularly for iOS and macOS purposes. The newest iOS 17 replace brings SF Symbols 5, which introduces a incredible assortment of expressive animations. SwiftUI affords builders the power to leverage these animations utilizing the brand new symbolEffect modifier.

This function empowers builders to create numerous and fascinating animations inside their apps. By incorporating symbolEffect into your SwiftUI code, builders can improve consumer interactions and create visually partaking interfaces. On this tutorial, we are going to present you easy methods to work with this new modifier to create varied sorts of animations.

The Fundamental Utilization of SymbolEffect

To animate a SF image, you may 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 variety of built-in animations together with Seem, Disappear, Bounce, Scale, Pulse, Variable Shade, and Substitute. Within the code above, we use the bounce animation. So, while you faucet the image within the preview canvas, it reveals a bouncing impact.

Make it Repeatable

By default, the animation is simply performed as soon as. To make it repeatable, you may 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. When you need to repeat the impact for a selected variety of instances, you may make the most of the .repeat operate and point out the specified repeat depend as proven beneath:

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

Controlling the animation velocity

As well as, you’ve got the flexibleness to customise the animation velocity by using the .velocity operate throughout the choices parameter. As an example, should you want to decelerate the animation, you may set the worth of the .velocity operate to 0.1, as demonstrated beneath:

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

Animation Varieties

As said earlier, SwiftUI supplies quite a lot of built-in animation sorts, comparable to Bounce, Scale, Pulse, Variable Shade, and Substitute. Up till now, we’ve solely used the bounce animation. Now, let’s discover and take a look at out different animation sorts 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 (complete)")
                    .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 photographs within the preview canvas, you may see the animations coming to life. Compared to the bounce animation, the Pulse animation affords a definite impact by regularly 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 singular visible transformation.

Even for the Bounce animation, you may 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 realize 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 Substitute Animation

In sure situations, there could also be a have to transition between completely different symbols inside a picture. As an example, when a consumer faucets the Contact ID image, it transforms right into a checkmark image. To make sure a seamless and visually pleasing transition, you may make the most of the contentTransition modifier together with the Substitute animation, as demonstrated beneath:

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 consumer interactions and create visually partaking interfaces in iOS and macOS purposes.

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

You probably have discovered this tutorial pleasing and wish to discover SwiftUI additional, we extremely advocate trying out our complete guide, “Mastering SwiftUI.“