Как анимировать объект, используя путь Безье? - PullRequest
Новая
       103

Как анимировать объект, используя путь Безье?

1 голос
/ 08 июля 2019

enter image description here

Вот мой код для рисования пунктирной линии 

func drawLine() {

    let shapeLayer = CAShapeLayer()
    shapeLayer.bounds = viewDraw.bounds
    shapeLayer.position = CGPoint(x: viewDraw.bounds.width/2, y: viewDraw.bounds.height/2)
    shapeLayer.fillColor = nil
    shapeLayer.strokeColor = ColorConstants.ThemeColor.cgColor
    shapeLayer.lineWidth = 3
    shapeLayer.lineJoin = CAShapeLayerLineJoin.round // Updated in swift 4.2
    shapeLayer.lineDashPattern = [10]

    let path = UIBezierPath(roundedRect: viewDraw.bounds, cornerRadius: viewDraw.bounds.size.height/2)
    shapeLayer.path = path.cgPath

    viewDraw.layer.addSublayer(shapeLayer)

    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.duration = 1
    shapeLayer.add(animation, forKey: "MyAnimation")
}

Теперь, согласно моему скриншоту, я хочу анимировать синюю точку в красную точку в пределах этой пунктирной линии бесконечное время. Когда синяя точка достигает красной точки, она снова начинается с синей точки.

Примечание. Весь этот экран является динамическим, поэтому рисование линий также динамично в зависимости от высоты экрана

Буду признателен за любую помощь

1 Ответ

0 голосов
/ 08 июля 2019

Ты почти там

Теперь вам нужно добавить анимацию, используя CAKeyframeAnimation со свойством path, где вы можете указать путь, по которому вы хотите анимировать

здесь работает пример кода 

func drawLine() {

    let shapeLayer = CAShapeLayer()
    shapeLayer.bounds = self.view.bounds
    shapeLayer.position = CGPoint(x: self.view.bounds.width/2, y: self.view.bounds.height/2)
    shapeLayer.fillColor = nil
    shapeLayer.strokeColor = UIColor.red.cgColor
    shapeLayer.lineWidth = 3
    shapeLayer.lineJoin = CAShapeLayerLineJoin.round // Updated in swift 4.2
    shapeLayer.lineDashPattern = [10]

    let path = UIBezierPath(roundedRect: self.view.bounds, cornerRadius: self.view.bounds.size.height/2)
    shapeLayer.path = path.cgPath

    self.view.layer.addSublayer(shapeLayer)

    let animation1 = CABasicAnimation(keyPath: "strokeEnd")
    animation1.fromValue = 0
    animation1.duration = 1
    shapeLayer.add(animation1, forKey: "MyAnimation")

    // Create  squareView and add animation 
    let animation = CAKeyframeAnimation(keyPath: #keyPath(CALayer.position))
    animation.duration = 1
    animation.repeatCount = MAXFLOAT
    animation.path = path.cgPath

    let squareView = UIView()

   // Don't worry about x,y and width and height it will not affect the animation 
    squareView.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
    squareView.backgroundColor = .lightGray
    view.addSubview(squareView)
    // You can also pass any unique string value for key
    squareView.layer.add(animation, forKey: nil)

}

Вы можете посмотреть этот учебник для получения дополнительной помощи http://mathewsanders.com/animations-in-swift-part-two/

...