How to animate drawing shape fit in 60 second?

Question

I'm new to Swift and I don't have too much information about it.I would like to create animated clock with filling 'CAShapeLayer' path in time interval than tried to make it with 'CABasicAnimation' in 60 seconds. The shape fills in 49 sec and animation finish fit in 60 seconds, so it's not working as desired. Than I changed animation.byValue = 0.1 but the result is same. Some one have an idea about this issue?

My code is :

    var startAngle = -CGFloat.pi / 2
    var endAngle = CGFloat.pi * 2
    var shapeLayer = CAShapeLayer()

    override func viewDidLoad() {
            super.viewDidLoad()

        let center = view.center
        let circlePath = UIBezierPath(arcCenter: center, radius: 100, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        shapeLayer.path = circlePath.cgPath
        shapeLayer.lineWidth = 20
        shapeLayer.strokeColor = UIColor.lightGray.cgColor
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineCap = kCALineCapRound
        shapeLayer.strokeEnd = 0
        animate(layer: shapeLayer) //Animation func

            view.layer.addSublayer(shapeLayer)
    }

    private func animate(layer: CAShapeLayer) {
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0.0
        animation.toValue = 1.0
        animation.duration = 60.0 //I think is counting by seconds?
        animation.repeatCount = .infinity
        animation.fillMode = kCAFillModeForwards
        layer.add(animation, forKey: "strokeEndAnimation")
    }

score 1 · Accepted Answer · answered Jul 06 '18 at 10:21

The problem is with the way you made the BezierPath.

Try this instead:

let circlePath = UIBezierPath(arcCenter: .zero, radius: 100, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
    shapeLayer.path = circlePath.cgPath
    shapeLayer.lineWidth = 20
    shapeLayer.strokeColor = UIColor.lightGray.cgColor
    shapeLayer.strokeStart = 0
    shapeLayer.strokeEnd = 0
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineCap = kCALineCapRound
    shapeLayer.strokeEnd = 0
    shapeLayer.position = self.view.center
    shapeLayer.transform = CATransform3DRotate(CATransform3DIdentity, -CGFloat.pi / 2, 0, 0, 1)

The arcCenter must be at .zero and set the shape's center as the center of the view. Your circle will start animating from the right most point though, therefore add a CATransform to rotate the shape 90 degrees counterclockwise.

How to animate drawing shape fit in 60 second?

1 Answers1