How to get different components to have different animations?

user_19556052 0
Viewed 44

I have two simple ui components a Rectangle and an Image. I just want a slide animation for Rectangle and scale animation for Image.

However, I got a default value animation for both of these. Is there a problem in my code? I don't have any error. I'm using beta SF Symbols tho. Could this be the problem?

import SwiftUI

struct ContentView: View {
@State var animate: Bool = false
    var body: some View {
    VStack(alignment: .center) {
        HStack() {
            if animate {
                
                ZStack() {
                    Rectangle()
                        .frame(height: 50)
                        .transition(.slide)
                    Image(systemName: "figure.mixed.cardio")
                        .foregroundColor(.white)
                        .transition(.scale)
                }
                
            }
        }
        Button("animate") {
            withAnimation {
                animate.toggle()
            }
        }
    }
  }
}
swiftui swift animation
2 Answers

The problem here is neither your SF Symbols or Compiling Error. Animation is a bit tricky especially if you want different animations for different views inside the same stack.

To achieve your goal, you need to wrap each sub view inside an independent stack, then they will have their own unique animation.

Try this code:

import SwiftUI

struct TestView: View {

@State var animate: Bool = false

var body: some View {
    VStack(alignment: .center) {
        HStack() {
            ZStack() {
                //added
                if animate {
                    ZStack {
                        Rectangle()
                            .frame(height: 50)
                         
                    }   .transition(.slide)
                }
                //added
                if animate {
                    ZStack {
                        Image(systemName: "figure.mixed.cardio")
                            .foregroundColor(.white)
                            
                    }.transition(.scale)
                }
            }
        }
        Button("animate") {
            withAnimation {
                animate.toggle()
            }
        }
    }
  }
}
user_167314010

Transition works when specific view appeared, but in your code ZStack loads views and then appears as a whole.

Here is a fix:

    HStack() {
        ZStack() {
            if animate {   // << here !!
            
                Rectangle()
                    .frame(height: 50)
                    .transition(.slide)
                Image(systemName: "figure.mixed.cardio")
                    .foregroundColor(.white)
                    .transition(.scale)
            }
            
        }
    }
user_122990300
Related