如何在 SwiftUI 中获得反弹动画？

Question

当应用程序需要注意并在 Dock 上弹跳时，如何实现类似于 macOS Dock 上的弹跳动画。SwiftUI 似乎只有缓动曲线和弹簧，它们并没有真正强调反弹的方式。我尝试了各种弹簧动画以及缓动曲线和时序曲线的组合来尝试使弹跳动画正常工作，但没有真正做到这一点。

最接近反弹动画的是插值弹簧，但这些动画的主要问题是它们在动画过程中过冲，而反弹动画则不会。

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")
            }
        }
    }
}