在 Swift UIKit 中投擲紙/球效果動畫

Question

在 UIKit 中創建投擲紙/球效果動畫的最佳方法是什么？

我需要的基本上是一個從point A開始到Point B point A結束的投擲效果。 我不需要任何彈跳效果，這更像是一種讓用戶知道從point A到Point B point A添加了一些東西的效果； 類似於我們在照片中將照片添加到相冊時獲得的效果。

我一直在玩animateKeyframes但我不能完全得到我想要的效果，我沒有得到曲線路徑，我不能改變速度，所以效果看起來不真實。

@IBAction func startAnimation(_ sender: Any) {
    UIView.animateKeyframes(withDuration: 1.0, delay: 0.0, options: [], animations: {
        var startTime = 0.0
        var viewScale:CGFloat = 1.0
        
        for i in 0..<5{
            UIView.addKeyframe(withRelativeStartTime: startTime, relativeDuration: 0.25, animations: {
                self.myView.center =  CGPoint(x: self.myView.center.x + 10, y: self.myView.center.y - 20)
                self.myView.transform = CGAffineTransform(scaleX: viewScale, y: viewScale)
            })
            startTime += 0.1
            viewScale += 0.01
        }
        
        for i in 0..<5{
            UIView.addKeyframe(withRelativeStartTime: startTime, relativeDuration: 0.25, animations: {
                self.myView.center =  CGPoint(x: self.myView.center.x + 10, y: self.myView.center.y + 5)
                self.myView.transform = CGAffineTransform(scaleX: viewScale, y: viewScale)
            })
            startTime += 0.1
            viewScale -= 0.01
        }
    }
    )
}

Answer 1

我不認為這個結果是完全可怕的：

這是一個關鍵幀動畫，以三個點（起點、頂點、終點）和三次插值作為其計算模式。 玩弄數字可能會有所改善。

如果你不喜歡那樣，你可能更喜歡使用 UIKit 動態來獲得更多基於物理的東西。 （但我也用 UIKit 動態嘗試過它，但效果並不好。）

Answer 2

這是使用matt建議的三次插值動畫實現三點后的最終代碼。

@IBAction func startAnimation(_ sender: Any) {
    UIView.animateKeyframes(withDuration: 3.0, delay: 0.0, options: [.calculationModeCubic], animations: {
        // start
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/5.0, animations: {
            self.myView.center =  CGPoint(x: self.pointA.center.x, y: self.pointA.center.y)
        })
        // apex
        UIView.addKeyframe(withRelativeStartTime: 1.0/5.0, relativeDuration: 1.0/5.0, animations: {
            self.myView.center =  CGPoint(x: self.pointB.center.x - 100, y: self.pointB.center.y - 100)
        })
        // end
        UIView.addKeyframe(withRelativeStartTime: 2.0/5.0, relativeDuration: 1.0/5.0, animations: {
            self.myView.center =  CGPoint(x: self.pointB.center.x, y: self.pointB.center.y)
        })
    }
    )
}