[英]Synchronously animate CALayer property and UIView with UIViewPropertyAnimator
我正在使用UIViewPropertyAnimator
为视图的 position 设置动画。 但是,我还想为 CALayer 属性(如borderColor
)制作动画。 目前,它没有动画并在开始时立即更改,如下所示:
这是我的代码:
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 ,答案建议使用“一个明确的 animation,就像一个基本的 animation”。 它说,
如果时间 function 和两个动画的持续时间相同,那么它们应该保持对齐。
但是,如果我使用CABasicAnimation
,我将失去UIViewPropertyAnimator
的所有好处,比如在中间计时和停止。 我还需要跟踪两者。 有没有办法用UIViewPropertyAnimator
为CALayer
属性设置动画?
CABasicAnimation 有时间和关键帧 animation 停在中间。 但是,要复制上面的 animation:
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.