Trying to achieve two mixed transitions at the same time

user_16731401 0
Viewed 24

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.

swiftui swift animation
2 Answers

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))
user_122990300

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.

user_167314010
Related