Problem with scaling animation of CAShapeLayer

Question

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?

matt · Accepted Answer · 2020-11-23T15:59:47.743

3

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)

edited Nov 23 '20 at 15:59

answered Nov 23 '20 at 15:39

matt

515,959
87
875
1,141

2

Also there are many other things wrong with this code. Where is it? You cannot say `path.stroke()` in the middle of nowhere; you would have to be in a view's `draw(_:)` implementation. But you must not add a layer in a `draw(_:)` implementation; the only thing you are allowed to do there is _draw_. – matt Nov 23 '20 at 15:45
1

Also, your drawing makes no sense, because the shape layer's default fill color is black, so the black that fills the rounded rect is blotting out the other drawing you are doing. – matt Nov 23 '20 at 15:48
1

Thanks for comment :) I am beginner in the world of layers and animations. – Marcin Żmigrodzki Nov 23 '20 at 15:49
1

Another problem is that your layer has no size. So it will not animate correctly in any case. – matt Nov 23 '20 at 15:53
2

Added code to illustrate the _sort_ of thing you need to learn to do. – matt Nov 23 '20 at 15:55
Thanks a lot :) You must understand I started coding in Swift 2 months ago. – Marcin Żmigrodzki Nov 23 '20 at 16:02
Let's be clear, though, this is about Cocoa, not Swift. – matt Nov 23 '20 at 16:09

Problem with scaling animation of CAShapeLayer

1 Answers1