swift - 如何在 SwiftUI 中获得弹跳动画？

Question

当应用程序需要注意并在 dock 上弹跳时，如何实现类似于 macOS dock 上的弹跳动画。 SwiftUI 似乎只有缓动曲线和 Spring ，它们并没有真正强调弹跳的方式。我已经尝试了各种 Spring 动画以及缓动曲线和计时曲线的组合来尝试让弹跳动画正常工作，但没有任何效果。

最接近弹跳动画的是插值 Spring ，但这些动画的主要问题是它们在动画期间会过冲，而弹跳动画则不会。

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