Multiple Animations in SwiftUI

Photo by Raimond Klavins on Unsplash

Animating multiple properties in SwiftUI is as easy as performing a single property animation.

There are two ways of adding animation to the views, so we will look at them one at a time as there is one slight (yet important) difference between the two.

We will start with a simple text view with “DevTechie” text. This view will have background, rotationEffect, and scaleEffect modifiers. All the modifiers will toggle between two values depending upon the value of the animate state variable. We will also toggle the background shape to be a circle or roundedRectangle with a change in the animate property.

Animating using withAnimation block.

struct MultipleAnimations: View {
    @State private var animate = false
    var body: some View {
        Text("DevTechie")
            .font(.largeTitle)
            .frame(width: 200, height: 200)
            .background(animate ? .pink : .orange, in: RoundedRectangle(cornerRadius: animate ? 200 : 20))
            .rotationEffect(.degrees(animate ? 360 : 0))
            .scaleEffect(animate ? 0.5 : 1)
            .onTapGesture { 
                withAnimation { 
                    animate.toggle()
                }
            }
    }
}