如何在 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")
            }
        }
    }
}