Combine Multiple Animations Using SwiftUI

Here’s a quick yet simple idea on how to combine multiple animations using SwiftUI into a single sequence.

struct ContentView: View {
    @State private var isAnimating = false
    
    var body: some View {
        VStack {
            Circle()
                .fill(Color.blue)
                .frame(width: 150, height: 150)
                .padding(100)
                .opacity(isAnimating ? 0.5 : 1)
                .scaleEffect(isAnimating ? 0.5 : 1)
                .animation(Animation.easeInOut(duration: 1.0), value: isAnimating)
        }
        .onTapGesture {
            isAnimating.toggle()
        }
    }
}

So what’s happening here? We want to animate the opacity and scale of a circle at the same time. Instead of doing multiple calls to the animation(_:value:) method, we can introduce an isAnimating property (line 2).

From here, things are pretty clear. We’re monitoring the isAnimating property (line 12) and configuring the desired animation values depending on the isAnimating value (lines 10 and 11).

And here’s the final result:

Combine Multiple Animations Using SwiftUI

Leave a Reply

Your email address will not be published. Required fields are marked *