Fixed 'animation' was deprecated in iOS 15.0: Use withAnimation or animation(_:value:)

By Faruque Ahamed Mollick

the deprecated 'animation' modifier in SwiftUI and learned how to adapt to the changes introduced in iOS 15. By embracing 'withAnimation' and 'animation(_:value:)'.

Introduction:

SwiftUI, Apple's modern declarative user interface framework, has been evolving rapidly since its introduction. With iOS 15, Apple introduced some deprecations and changes to SwiftUI animations, encouraging developers to adopt a more efficient and straightforward approach. In this article, we'll explore the deprecated 'animation' modifier and its replacements, 'withAnimation' and 'animation(_:value:)', with hands-on examples to help you smoothly transition your code to the latest SwiftUI version.

Understanding the 'animation' modifier:

In previous SwiftUI versions, the 'animation' modifier was used to apply animations to views. It allowed you to specify the animation type and duration as arguments. However, starting from iOS 15, this modifier has been deprecated in favor of more explicit and expressive alternatives.

Replacing 'animation' with 'withAnimation':

The 'withAnimation' function provides a more straightforward way to wrap changes that need animation. It takes a closure as an argument and animates any state changes that occur within the closure's scope.
Example:
Suppose we have a simple SwiftUI view with a text element that changes its opacity when a button is tapped. Previously, you might have used the 'animation' modifier as follows:

@State private var isHidden = false

var body: some View {
    VStack {
        Button("Toggle Text") {
            withAnimation {
                self.isHidden.toggle()
            }
        }
        if !isHidden {
            Text("Hello, SwiftUI!")
                .padding()
                .animation(.easeInOut) // Deprecated in iOS 15
        }
    }
}

The updated code using 'withAnimation' looks like this:

@State private var isHidden = false

var body: some View {
    VStack {
        Button("Toggle Text") {
            withAnimation {
                self.isHidden.toggle()
            }
        }
        if !isHidden {
            Text("Hello, SwiftUI!")
                .padding()
        }
    }
}

 

Replacing 'animation' with 'animation(:value:)':

The 'animation(:value:)' function is used to explicitly define animations for specific state changes. This allows you to fine-tune the animation behavior for different state properties.
Example:
Let's consider a scenario where we have a SwiftUI view that animates the color change of a rectangle based on a toggle switch.

@State private var isToggled = false

var body: some View {
    VStack {
        Toggle("Toggle Color", isOn: $isToggled)
            .padding()
        Rectangle()
            .fill(isToggled ? Color.red : Color.blue)
            .frame(width: 100, height: 100)
            .animation(.easeInOut) // Deprecated in iOS 15
    }
}

The updated code using 'animation(_:value:)' looks like this:

@State private var isToggled = false

var body: some View {
    VStack {
        Toggle("Toggle Color", isOn: $isToggled)
            .padding()
        Rectangle()
            .fill(isToggled ? Color.red : Color.blue)
            .frame(width: 100, height: 100)
            .animation(.easeInOut, value: isToggled)
    }
}

Conclusion:

In this article, we explored the deprecated 'animation' modifier in SwiftUI and learned how to adapt to the changes introduced in iOS 15. By embracing 'withAnimation' and 'animation(_:value:)', you can create more streamlined and efficient animations in your SwiftUI apps. As you continue to develop with SwiftUI, staying up-to-date with the latest changes and improvements is essential to provide the best user experience for your app's audience. Happy coding!

 

The full code:

import SwiftUI

struct ContentView: View {
    @State private var isHidden = false

    var body: some View {
        VStack {
            Button("Toggle Text") {
                withAnimation {
                    self.isHidden.toggle()
                }
            }
            if !isHidden {
                Text("Hello, SwiftUI!")
                    .padding()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    @State private var isToggled = false

    var body: some View {
        VStack {
            Toggle("Toggle Color", isOn: $isToggled)
                .padding()
            Rectangle()
                .fill(isToggled ? Color.red : Color.blue)
                .frame(width: 100, height: 100)
                .animation(.easeInOut, value: isToggled)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}