Линейная анимация в прямоугольнике с cornerRadius

Question

Мне нужно создать анимацию линии с постоянной длиной по скругленному прямоугольнику. Поэтому я остановился после создания необходимого BezierPath UIBezierPath(roundedRect: CGRect(x: 50, y: 50, width: 100, height: 100), cornerRadius: 5), поэтому следующий шаг, который мне нужно сделать, - это использовать CAKeyframeAnimation для анимации линии шириной 45 вдоль этого пути. Может ли кто-нибудь помочь мне с этим?

Answer 1

Хорошо, тогда.Используйте тире вместо начала / конца.Рекомендуем использовать этот репо для расчета длины cgPath для создания нужного вам шаблона.

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