[英]Synchronously animate CALayer property and UIView with UIViewPropertyAnimator
I'm using a UIViewPropertyAnimator
to animate the position of a view.我正在使用
UIViewPropertyAnimator
为视图的 position 设置动画。 But, I also want to animate CALayer properties like borderColor
along with it.但是,我还想为 CALayer 属性(如
borderColor
)制作动画。 Currently, it doesn't animate and instantly changes at the start, like this:目前,它没有动画并在开始时立即更改,如下所示:
Here's my code:这是我的代码:
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()
}
}
}
I looked at this question, How to synchronously animate a UIView and a CALayer , and the answer suggested using "an explicit animation, like a basic animation."我看了这个问题, How to synchronously animate a UIView and a CALayer ,答案建议使用“一个明确的 animation,就像一个基本的 animation”。 It said,
它说,
If the timing function and the duration of both animations are the same then they should stay aligned.
如果时间 function 和两个动画的持续时间相同,那么它们应该保持对齐。
However, if I use CABasicAnimation
, I lose all the benefits of UIViewPropertyAnimator
, like timing and stopping in the middle.但是,如果我使用
CABasicAnimation
,我将失去UIViewPropertyAnimator
的所有好处,比如在中间计时和停止。 I will also need to keep track of both.我还需要跟踪两者。 Is there any way to animate
CALayer
properties with UIViewPropertyAnimator
?有没有办法用
UIViewPropertyAnimator
为CALayer
属性设置动画?
CABasicAnimation has timing as well as keyframe animation to stop in the middle. CABasicAnimation 有时间和关键帧 animation 停在中间。 But, to replicate your animation above:
但是,要复制上面的 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.