Clever Geek Handbook

Animated way in quick 3

the following code creates a 270 degree red ring

let result = Measurement(value: 270, unit: UnitAngle.degrees)
        .converted(to: .radians).value


let circlePath = UIBezierPath(arcCenter: CGPoint(x: 200,y: 200), radius: CGFloat(90), startAngle: CGFloat(0), endAngle:CGFloat(result), 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
    //you can change the line width
    shapeLayer.lineWidth = 30.0

    view.layer.addSublayer(shapeLayer)

How would I traverse and animate the path drawn with swift 3

thank

+3


source to share


1 answer


The CAShapeLayer has strokeStart and strokeEnd properties that determine which part of the path you want to draw. Their default values ​​are 0.0 and 1.0 respectively, since you usually want to draw the entire path.

You can animate the change of these values ​​using a CABasicAnimation by specifying a key value "strokeEnd" or "strokeStart", for example:



let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.fromValue = 0.0
pathAnimation.toValue = 1.0
pathAnimation.duration = 1.0   // time in seconds.
shapeLayer.add(pathAnimation, forKey: "strokeEnd")
+3


source






More articles:


All Articles