使用 UIViewPropertyAnimator 同步动画 CALayer 属性和 UIView

Posted 2023-03-16

【中文标题】使用 UIViewPropertyAnimator 同步动画 CALayer 属性和 UIView

【英文标题】：Synchronously animate CALayer property and UIView with UIViewPropertyAnimator

【发布时间】：2020-12-27 00:51:10

【问题描述】：

我正在使用UIViewPropertyAnimator 为视图的位置设置动画。但是，我还想同时为 borderColor 等 CALayer 属性设置动画。目前，它没有动画并在开始时立即更改，如下所示：

这是我的代码：

class ViewController: UIViewController 
    var animator: UIViewPropertyAnimator?
    let squareView = UIView(frame: CGRect(x: 0, y: 40, width: 80, height: 80))
    
    override func viewDidLoad() 
        super.viewDidLoad()
        
        view.addSubview(squareView)
        
        squareView.backgroundColor = UIColor.blue
        squareView.layer.borderColor = UIColor.green.cgColor
        squareView.layer.borderWidth = 6
        
        animator = UIViewPropertyAnimator(duration: 2, curve: .easeOut, animations: 
            self.squareView.frame.origin.x = 100
            self.squareView.layer.borderColor = UIColor.red.cgColor
        )
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) 
            self.animator?.startAnimation()
        
    

我查看了How to synchronously animate a UIView and a CALayer 这个问题，答案建议使用“显式动画，如基本动画”。它说，

如果两个动画的时间函数和持续时间相同，那么它们应该保持对齐。

但是，如果我使用CABasicAnimation，我将失去UIViewPropertyAnimator 的所有好处，比如在中间计时和停止。我还需要跟踪两者。 有没有办法用UIViewPropertyAnimator 为CALayer 属性设置动画？

【参考方案1】：

CABasicAnimation 有时间和关键帧动画在中间停止。但是，要复制上面的动画：

squareView.layer.transform = CATransform3DMakeTranslation(100, 0, 0)
let fromValue = squareView.transform
let toValue = 100
let translateAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.transform))
translateAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
translateAnimation.fromValue = fromValue
translateAnimation.toValue = toValue
translateAnimation.valueFunction = CAValueFunction(name: .translateX)

let fromColor = squareView.layer.borderColor
let toColor = UIColor.red.cgColor
let borderColorAnimation = CABasicAnimation(keyPath: "borderColor")
borderColorAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
borderColorAnimation.fromValue = fromColor
borderColorAnimation.toValue = toColor

let groupAnimation = CAAnimationGroup()
groupAnimation.animations = [translateAnimation, borderColorAnimation]
groupAnimation.duration = 5
squareView.layer.add(groupAnimation, forKey: nil)

【讨论】：

感谢您的回答！我想我会一起使用UIViewPropertyAnimator 和CABasicAnimation，因为CATransform3DMakeTranslation 和其他看起来有点复杂