CALayer 在转换动画后将大小调整回原始大小

Question

我正在尝试实现两个连续的变换动画。当第一个动画结束时，将通过完成处理程序调用第二个动画。因为这是一个转换动画，所以我的问题是，当第一个动画完成时，图层的大小会恢复到原始大小，然后第二个动画开始。我希望第二个动画从第一个转换动画之后的新图层大小开始。这篇文章 Objective-C - CABasicAnimation 在动画后应用更改？说我必须在开始第一个动画之前调整图层的大小/变换，以便在第一个动画结束时，图层实际上是新的大小。我试图通过更改边界或实际将转换应用于图层来做到这一点，但它仍然不起作用。

override func viewDidAppear(_ animated: Bool) {
buildBar()   
}
func buildBar(){
progressBar1.bounds = CGRect(x: 0, y: 0, width: 20, height: 5)
progressBar1.position = CGPoint(x: 0, y: 600)
progressBar1.backgroundColor = UIColor.white.cgColor
view.layer.addSublayer(progressBar1)
extendBar1()
}

func extendBar1(){
CATransaction.begin()
let transform1 = CATransform3DMakeScale(10, 1, 1)
let anim = CABasicAnimation(keyPath: "transform")
// self.progressBar1.bounds = CGRect(x: 0, y: 0, width: 200, height: 5)
// self.progressBar1.transform = transform1
anim.isRemovedOnCompletion = false
anim.fillMode = kCAFillModeForwards
anim.toValue = NSValue(caTransform3D:transform1)
anim.duration = 5.00
CATransaction.setCompletionBlock {
self.extendBar2()
}
progressBar1.add(anim, forKey: "transform")
CATransaction.commit()
}
func extendBar2(){
let transform1 = CATransform3DMakeScale(2, 1, 1)
let anim = CABasicAnimation(keyPath: "transform")
anim.isRemovedOnCompletion = false
anim.fillMode = kCAFillModeForwards
anim.toValue = NSValue(caTransform3D:transform1)
anim.duration = 5.00
progressBar1.add(anim, forKey: "transform")
}

Answer 1

由于您要修改两个动画中图层的变换属性，因此在这里使用CAKeyframeAnimation会更容易，它将为您处理动画的链接。

func extendBar(){
let transform1 = CATransform3DMakeScale(10, 1, 1)
let transform2 = CATransform3DMakeScale(2, 1, 1)
let anim = CAKeyframeAnimation()
anim.keyPath = "transform"
anim.values = [progressBar1.transform, transform1, transform2] // the stages of the animation
anim.keyTimes = [0, 0.5, 1] // when they occurs, 0 being the very begining, 1 the end
anim.duration = 10.00
progressBar1.add(anim, forKey: "transform")
progressBar1.transform = transform2 // we set the transform property to the final animation's value
}

关于values和keyTimes的内容：

• 我们将第一个值设置为progressBar1的当前变换。这将确保我们从当前层的状态开始。
• 在keyTimes中，我们说在开始时，应该使用values数组中的第一个值。然后我们说在动画的中场休息时，图层应该转换为第二个值values。因此，初始状态和第二个状态之间的动画将在此期间发生。然后，在 0.5 到 1 之间，我们将从tranform1到transform2.

您可以在 objc.io 的这篇非常好的文章中阅读有关动画的更多信息。

---

如果你真的需要两个不同的动画(因为你可能想在两者之间添加子视图progressBar1，这里有代码可以做到这一点

func extendBar1() {
CATransaction.begin()
CATransaction.setCompletionBlock {
print("side effects")
extendBar2()
}
let transform1 = CATransform3DMakeScale(5, 1, 1)
let anim = CABasicAnimation(keyPath: "transform")
anim.fromValue = progressBar1.transform
anim.toValue = transform1
anim.duration = 2.00
progressBar1.add(anim, forKey: "transform")
CATransaction.setDisableActions(true)
progressBar1.transform = transform1
CATransaction.commit()
}
func extendBar2() {
CATransaction.begin()
let transform2 = CATransform3DMakeScale(2, 1, 1)
let anim = CABasicAnimation(keyPath: "transform")
anim.fromValue = progressBar1.transform
anim.toValue = transform2
anim.duration = 2.00
progressBar1.add(anim, forKey: "transform")
CATransaction.setDisableActions(true)
progressBar1.transform = transform2
CATransaction.commit()
}

这里发生了什么？基本上，我们设置了第一个"普通动画"。因此，我们创建了动画，它将修改表示层并将实际层设置为最终的第一个动画的转换。

然后，当第一个动画完成时，我们调用extendBar2，而它将依次排队一个普通动画。

您还希望在显式更新转换之前调用CATransaction.setDisableActions(true)，否则，核心动画将创建一个隐式动画，该隐式动画将覆盖之前创建的转换。