Problem with scaling animation of CAShapeLayer [duplicate] - ios

Question

This question already has answers here:
UIView animateWithDuration doesn't animate cornerRadius variation
(8 answers)
Closed 2 years ago.
I created simple path for tooltip of a slider. I wanted it to animate as it appears so a user would know that he can drag it.
But it does not animate:
let upperToolTipPath: CAShapeLayer = CAShapeLayer()
var path = UIBezierPath(roundedRect: CGRect(x: 0,y: 0, width: 65, height: 30), cornerRadius: 3)
path.stroke()
path.move(to: CGPoint(x: 50, y: 10))
path.addLine(to: CGPoint(x: 40, y: 30))
path.addLine(to: CGPoint(x: 15, y: 10))
upperToolTipPath.path = path.cgPath
self.layer.insertSublayer(upperToolTipPath, at: 0)
UIView.animate(
withDuration: 5,
delay: 3,
options: [.repeat, .autoreverse, .curveEaseIn],
animations: {
self.upperToolTipPath.transform = CATransform3DMakeScale(2, 2, 1)
})
Could you help me with the animation?

Answer 1

UIView.animate is for view animation. But upperToolTipPath is a layer; it is not a view's primary layer, so it can be animated only with layer animation. That means Core Animation, i.e. CABasicAnimation.
So to make the animation you wish to make, you will need to use Core Animation.
Alternatively, you could make a view that hosts the shape layer as its primary layer. Then you would be able to use view animation.
But I think it's better in this case to use Core Animation. Here's an example of the sort of thing I think you are trying to do:
let upperToolTipPath = CAShapeLayer()
upperToolTipPath.frame = CGRect(x: 0,y: 0, width: 65, height: 30)
let path = UIBezierPath(roundedRect: CGRect(x: 0,y: 0, width: 65, height: 30),
cornerRadius: 3)
upperToolTipPath.fillColor = UIColor.clear.cgColor
upperToolTipPath.strokeColor = UIColor.black.cgColor
upperToolTipPath.path = path.cgPath
self.layer.insertSublayer(upperToolTipPath, at: 0)
let b = CABasicAnimation(keyPath: #keyPath(CALayer.transform))
b.duration = 5
b.beginTime = CACurrentMediaTime() + 3
b.toValue = CATransform3DMakeScale(2, 2, 1)
b.repeatCount = .greatestFiniteMagnitude
b.autoreverses = true
upperToolTipPath.add(b, forKey:nil)