Create rotation animation for UIBezierPath

Question

I have a CAShapeLayer that is a circle centered in the middle of the main View of my View Controller.

It looks like this:

The Problem I have is, that if I try to animate a rotation with the following code, it does not rotate around the center of the circle but somewhere else.

import UIKit

extension UIView {
    func addCircle(centerOfCircle: CGPoint, radius: CGFloat, startAngle: CGFloat?, endAngle: CGFloat?) {
        let circlePath = UIBezierPath(arcCenter: centerOfCircle, radius: radius, startAngle: startAngle ?? 0, endAngle: endAngle ?? CGFloat(Double.pi * 2), clockwise: true)

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = circlePath.cgPath

        //change the fill color
        shapeLayer.fillColor = UIColor.clear.cgColor
        //you can change the stroke color
        shapeLayer.strokeColor = UIColor.red.cgColor

        shapeLayer.lineDashPattern = [1, 10]
        shapeLayer.lineCap = .round
        //you can change the line width
        shapeLayer.lineWidth = 3.0

        shapeLayer.anchorPoint = centerOfCircle

        let rotation : CABasicAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
        rotation.toValue = NSNumber(value: Double.pi * 2)
        rotation.duration = 2
        rotation.isCumulative = true
        rotation.repeatCount = Float.greatestFiniteMagnitude



        shapeLayer.add(rotation, forKey: "rotationAnimation")

        self.layer.addSublayer(shapeLayer)
    }
}

What I get then is the following:

Any help would be highly appreciated!

you need to set the anchor point, https://stackoverflow.com/questions/26815263/setting-a-rotation-point-for-cgaffinetransformmakerotation-swift — Teja Nandamuri, May 29 '19 at 14:35
It is set to the center of the UIBezierPath. Should I set it somewhere else? — linus_hologram, May 29 '19 at 14:37
It is the center of the UIView, so the main screen view: self.view.addCircle(centerOfCircle: CGPoint(x: self.view.frame.width / 2, y: self.view.frame.height / 2), radius: self.view.frame.width / 1.5, startAngle: nil, endAngle: nil) — linus_hologram, May 29 '19 at 14:38
do not give it the view center, just set it CGPoint(o.5,0.5) — Teja Nandamuri, May 29 '19 at 14:38
shapeLayer.anchorPoint = CGPoint(x: 0.5, y: 0.5) does not work either — linus_hologram, May 29 '19 at 14:39
@TejaNandamuri Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/194123/discussion-between-linus-hologram-and-teja-nandamuri). — linus_hologram, May 29 '19 at 14:45
@JulianSilvestri nope its not ... is it even possible to animate a UIBezierPath to rotate around it's center or do I have to do it with the parent view of it? — linus_hologram, May 29 '19 at 15:14
it is not possible to animate a bezier path, as it is just a path that the object follows. You have to animate the parent view — Julian Silvestri, May 29 '19 at 15:15
@JulianSilvestri thanks for the help, that was all I wanted to know — linus_hologram, May 29 '19 at 15:18
no problem. You can give the illusion of rotation by creating a circular bezier path that the object follows around. — Julian Silvestri, May 29 '19 at 15:19

RajeshKumar R · Accepted Answer · 2019-05-29T16:42:44.757

Instead of animating the rotation, animate lineDashPhase property of the CAShapeLayer

extension UIView {
    func addDashedCircle() {
        let circleLayer = CAShapeLayer()
        circleLayer.path = UIBezierPath(arcCenter: CGPoint(x: frame.size.width/2, y: frame.size.height/2),
                                        radius: frame.size.width/2,
                                        startAngle: 0,
                                        endAngle: .pi * 2,
                                        clockwise: true).cgPath
        circleLayer.lineWidth = 3.0
        circleLayer.strokeColor =  UIColor.red.cgColor
        circleLayer.fillColor = UIColor.white.cgColor
        circleLayer.lineJoin = .round
        circleLayer.lineDashPattern = [1,10]

        let animation = CABasicAnimation(keyPath: "lineDashPhase")
        animation.fromValue = 0
        animation.toValue = -11//1+10
        animation.duration = 1
        animation.repeatCount = .infinity
        circleLayer.add(animation, forKey: "line")

        layer.addSublayer(circleLayer)
    }
}

Create rotation animation for UIBezierPath

1 Answers1