Chain Multiple Animations in SwiftUI

Written by Team Kodeco

In SwiftUI, you have the power to design intricate and dynamic effects by orchestrating multiple animations to play in a certain order. This practice of orchestrating animations, often referred to as chaining animations, offers visually engaging effects that extend beyond the capabilities of a single animation.

To set up sequential animations in SwiftUI, you can make use of the delay modifier, which initiates an animation after a specified delay. To control the sequence of animations, you can use multiple state variables and the DispatchQueue.

Let’s explore this concept with an example:

struct ContentView: View {
  @State private var isStepOne = false
  @State private var isStepTwo = false
  @State private var isStepThree = false

  var body: some View {
    Rectangle()
      .fill(isStepThree ? .green : .red)
      .frame(width: isStepTwo ? 200 : 100, height: isStepTwo ? 200 : 100)
      .offset(x: isStepOne ? 150 : 0, y: isStepOne ? 300 : 0)
      .animation(.easeInOut(duration: 1.0), value: isStepOne)
      .animation(.easeInOut(duration: 1.0), value: isStepTwo)
      .animation(.easeInOut(duration: 1.0), value: isStepThree)
      .onAppear {
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
          isStepOne = true
          DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
            isStepTwo = true
            DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
              isStepThree = true
            }
          }
        }
      }
  }
}

Your preview should look like this once the animations are complete:

In this example, a rectangle view is initially displayed in the center of the screen. When the view appears, three animations are chained together with a delay of 1 second between each one.

• The isStepOne state variable, when set to true, moves the rectangle to the right and down to the bottom.
• After the rectangle completes its movement, isStepTwo is set to true, causing the rectangle to scale up in size.
• Lastly, after the rectangle finishes scaling up, isStepThree is set to true, and the rectangle’s color transitions from red to green.

This multi-step animation creates a sequence of visually interesting transformations. This is an effective way of making your user interface more dynamic and engaging. By understanding how to chain animations together, you can create intricate sequences of transformations in your SwiftUI applications, producing a more appealing and interactive user experience.

In conclusion, orchestrating multiple animations in SwiftUI offers powerful opportunities to build complex and dynamic user interfaces. By using the delay function, state variables and DispatchQueue, you can control the timing and sequence of your animations and create an immersive experiences for your users. Next time you’re writing a SwiftUI view, consider using chained animations to enhance the visual appeal of your user interface!