1

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?

0

1 Answer 1

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)
7
  • 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, 2020 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, 2020 at 15:48
  • 1
    Thanks for comment :) I am beginner in the world of layers and animations. Nov 23, 2020 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, 2020 at 15:53
  • 2
    Added code to illustrate the sort of thing you need to learn to do.
    – matt
    Nov 23, 2020 at 15:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.