[SOLVED] Line animation in rectangle with cornerRadius

Line animation in rectangle with cornerRadius

I need create line animation with constant length along rounded rectangle. So I stopped after creating needed BezierPath UIBezierPath(roundedRect: CGRect(x: 50, y: 50, width: 100, height: 100), cornerRadius: 5) so next step what I need to do is to use CAKeyframeAnimation for animating line with width 45 along that path Does someone could help me with that?

Solution

Ok, then. Use dash pattern instead of start/end. Suggest to use this repo to calculate cgPath length to make pattern you need.

let rectangle = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
rectangle.clipsToBounds = true
rectangle.backgroundColor = .blue
rectangle.layer.cornerRadius = 50

let path = UIBezierPath(roundedRect: rectangle.bounds, cornerRadius: 50)
let shape = CAShapeLayer()
shape.path = path.cgPath
shape.lineWidth = 10
shape.strokeColor = UIColor.red.cgColor

shape.fillColor = UIColor.clear.cgColor
let length = path.cgPath.length
shape.lineDashPattern = [NSNumber(value: 45), NSNumber(value: Float(length - 45))]
rectangle.layer.addSublayer(shape)


let animation = CABasicAnimation(keyPath: "lineDashPhase")
animation.fromValue = 0
animation.toValue = length //-length to run animation clock-wise
animation.repeatCount = .infinity
animation.duration = 10
shape.add(animation, forKey: "MyAnimation")

PlaygroundPage.current.liveView = rectangle