如何在SwiftUI中获取弹跳动画？

Question

当应用程序需要注意并在dock上反弹时，如何实现与macOS dock上的反弹动画类似的反弹动画。SwiftUI似乎只有缓动曲线和弹簧，并没有真正强调反弹的方式。我尝试了各种弹簧动画和缓动曲线和timingCurves的组合，试图让反弹动画工作，但没有真正的工作。

最接近反弹动画的是插值弹簧，但这些动画的主要问题是它们在动画期间超调，而反弹动画则不是。

struct ContentView: View {
    @State var bounce = false
    @State private var initialVelocity:Double = 1
    @State private var damping:Double = 1
    @State private var stiffness:Double = 1
    var body: some View {
        VStack {
            Circle().fill(Color.red).frame(width:50,height:50)
            .offset(y: bounce ? 0 : -80)
                .animation(.interpolatingSpring(stiffness: self.stiffness, damping: self.damping, initialVelocity: self.initialVelocity))

            HStack(){
                Text("stiffness")
                Slider(value: $stiffness, in: 0...100)
            }
            HStack(){
                Text("damping")
                Slider(value: $damping, in: 0...100)
            }
            HStack(){
                Text("initialVelocity")
                Slider(value: $initialVelocity, in: 0...100)
            }
            Button("Animate" ){
                self.bounce.toggle()
            }
        }.padding(.horizontal)
    }
}

我正在寻找的是一个反弹动画，复制重力，这是一个非常常见的动画，可以在许多游戏和软件中使用

​

Answer 1

.interpolatingSpring(...)是怎么回事

考虑以下示例，但请记住，您可能需要处理stiffness的值，等等：

struct ContentView: View {
    @State var test = false
    
    var body: some View {
        VStack {
            Text("Animatable")
            .offset(y: test ? 0 : -80)
            .animation(.interpolatingSpring(stiffness: 350, damping: 5, initialVelocity: 10))
            
            Button(action: {self.test.toggle()}) {
                Text("Animate")
            }
        }
    }
}