在 Swift UIKit 中投掷纸/球效果动画答案

【问题标题】：Throwing paper/ball effect animation in Swift UIKit在 Swift UIKit 中投掷纸/球效果动画
【发布时间】：2020-11-23 16:31:11
【问题描述】：

在 UIKit 中创建投掷纸/球效果动画的最佳方法是什么？

我需要的基本上是一个从point A开始到Point B结束的投掷效果。我不需要任何弹跳效果，这更多的是让用户知道从point A 到Point B 添加了一些东西；类似于我们将照片添加到相册中的相册时得到的效果。

我一直在玩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
        }
    }
    )
}

【问题讨论】：

“什么是最好的方法”非常广泛和模糊。你可以说得更详细点吗？您显示的代码有什么问题？（我的猜测是：是动画没有走弯路。但最好是清楚一点。）
是的，我没有得到曲线路径，所以效果看起来不真实。另外，对于animateKeyframes，我找不到改变速度以使其更真实的方法。换句话说，我不确定animateKeyframes 是否是此类动画的最佳工具。我已经更新了我原来的问题。
嗯，我可以想到三种方法：（1）三点关键帧和三次插值； (2) 弹跳动画； (3) UIKit 动力学。
好的，我会研究所有选项，尤其是三次插值的三点。尽管出于某种原因我需要核心动画。
给出答案，见下文。

标签： ios swift uikit

【解决方案1】：

我不认为这个结果很糟糕：

这是一个关键帧动画，以三个点（开始、顶点、结束）和三次插值作为其计算模式。玩弄这些数字可能会有所改善。

如果您不喜欢这样，您可能更喜欢使用 UIKit 动力学来获得更多基于物理的东西。（但我也尝试过使用 UIKit 动态，但效果并不好。）

【讨论】：

这正是我想要的效果，我几乎拥有它我只是没有看到从开始到顶点的动画，我认为它发生得太快以至于看不到。我认为这与我在withRelativeStartTime: 和relativeDuration: 中使用的数字有关。我对thewithRelativeStartTime 使用0.0、0.5 和0.05，对所有relativeDuration 使用0.25 你介意分享你的数字吗？
我想我已经接近了我想要的样子。我已经用我的最终代码更新了原始问题。
当只有三个点时，我认为将持续时间和开始时间除以 5 没有多大意义。
同意。 @matt - 问题：您使用什么程序来创建您发布的显示动画的 gif 文件？
我使用ScreenFlow，但还有其他方法。 :)

【解决方案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)
        })
    }
    )
}

【讨论】：