Trying to achieve two mixed transitions at the same time-CodePudding

This is my code:

 import SwiftUI
 @main
struct BouncingApp: App {
var body: some Scene {
    WindowGroup {
        BounceAble()
    }
}
}
struct BounceAble: View {
@State var bounce: Bool = false
var body: some View {
    VStack(alignment: .center) {
        Button("Bounce") {
            withAnimation(.easeOut) {
                bounce.toggle()
            }
        }
    }
    .overlay {
        if bounce {
            Circle()
                .frame(width: 200, height: 200)
                .transition(.slide)
                .transition(.scale)
                .onTapGesture {
                    withAnimation(.easeIn) {
                        bounce.toggle()
                    }
                }
        }
    }
   }
   }

The problem is i want my Circle to slide while growing at the same time. I thought adding two transitions at a time would does the job but it did not. is there any logical problem with my code? thank you so much.

CodePudding user response：

Probably you wanted something like this one

    Circle()
        .frame(width: 200, height: 200)
        .transition(.slide.combined(with: .scale))

or this one

    Circle()
        .frame(width: 200, height: 200)
        .transition(.scale.combined(with: .slide))

CodePudding user response：

If you add two transition to your view, it would always occur the first one.

You can combine two transitions together to achieve your goal design:

.transition(.scale.combined(with: .slide))

Note that if you use .slide before .scale, you would not get the same result.

You should test out both options and see which one fits your desired design most.