Home > front end >  Make interpolatingSpring() Animation more recognizable
Make interpolatingSpring() Animation more recognizable

Time:07-23

Recently I added a new transition to my app. Now, I want this transition to animate in interpolatingSpring() way.

But the thing is the interpolatingSpring() animation animates in a very weird way and really slow. I did not recognize any spring there. I practiced it with some modifiers yet still not working as I expected the animation to work.

 struct BounceAble: View {
 @State var bounce: Bool = false

var body: some View {
    VStack(alignment: .center) {
        Button("Bounce") {
            withAnimation(.interpolatingSpring(stiffness: 2.5, damping: 3) {
                bounce.toggle()
            }
        }
    }
    .overlay {
        if bounce {
            Circle()
                .frame(width: 200, height: 200)
                .transition(.scale)
                .onTapGesture {
                    withAnimation(.interpolatingSpring(stiffness: 2.5, damping: 3) {
                        bounce.toggle()
                    }
                }
        }
    }
   }
   }

I dropped my code here. Let me know how can I make this animation looks more recognizable.

CodePudding user response:

You are in the right path. Just increase the value of stiffness if you want your animation to be more springy/bouncy.

At your stage, I would suggest putting stiffness: 100 and damping: 10, then you will see a big difference from your old animation.

withAnimation(.interpolatingSpring(stiffness: 100, damping: 10)) { //modified
    bounce.toggle()
}
  • Related