Круговая анимация лагов

Question

Я работаю над анимацией круга в iOS, которая выглядит следующим образом:

Ссылка на анимацию круга

В этой анимации, когда круг повторяет анимацию, он задерживается между анимацией. Я хочу сделать эту анимацию плавной.

Я использую четкое представление, в котором я добавляю слой в форме круга. Ниже приведен код для создания слоя в форме круга:

//Create circle shape layer
func setupCircle(frame: CGRect, strokeColor: CGColor)->CAShapeLayer {

    let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.height/2, y: frame.size.height/2), radius: CGFloat((frame.size.height/2)-25), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), 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 = strokeColor
    //you can change the line width
    shapeLayer.lineWidth = 3.0

    return shapeLayer
}

Ниже приведен код для анимации слоя в форме круга:

    //Add animation to circle layer
    func getAnimationForCircle(frame: CGRect) -> CAAnimation {

        let newPath = UIBezierPath(arcCenter: CGPoint(x: frame.size.height/2, y: frame.size.height/2), radius: CGFloat((frame.size.height/2)+25), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)

        let pathAnim = CABasicAnimation.init(keyPath: "path")
        pathAnim.toValue = newPath.cgPath

        let alphaAnimation = CABasicAnimation.init(keyPath: "opacity")
        alphaAnimation.fromValue = 0.75
        alphaAnimation.toValue = 0.0

        let combinedAnim = CAAnimationGroup.init()
        combinedAnim.animations = [pathAnim, alphaAnimation]
        combinedAnim.isRemovedOnCompletion = false
        combinedAnim.repeatCount = .infinity
//        combinedAnim.speed = 0.2
        combinedAnim.duration = 1.0
        combinedAnim.fillMode = kCAFillModeBoth

        return combinedAnim
    }

Как я могу сделать эту анимацию плавной без задержек?

Любая помощь будет оценена. Спасибо!

Answer 1

Мое единственное предложение - сделать так, чтобы отдельные анимации имели одинаковую длительность с группой, чтобы они соответствовали количеству повторений и продолжительности. Я изменил непрозрачность, чтобы иметь ключевой кадр. Разница в продолжительности могла быть причиной вашего заикания или отставания.

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let shapeLayer = self.setupCircle(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width/2, height: self.view.bounds.width/2), strokeColor: UIColor.blue.cgColor)

        let sub = UIView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width/2, height: self.view.bounds.width/2))
        shapeLayer.frame = sub.bounds
        sub.layer.addSublayer(shapeLayer)
        sub.center = self.view.center
        self.view.addSubview(sub)


        let anim = self.getAnimationForCircle(frame: shapeLayer.frame)
        shapeLayer.add(anim, forKey: nil)
    }



    //Create circle shape layer
    func setupCircle(frame: CGRect, strokeColor: CGColor)->CAShapeLayer {

        let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.height/2, y: frame.size.height/2), radius: CGFloat((frame.size.height/2)-25), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), 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 = strokeColor
        //you can change the line width
        shapeLayer.lineWidth = 3.0

        return shapeLayer
    }

    //Add animation to circle layer
    func getAnimationForCircle(frame: CGRect) -> CAAnimation {

        let newPath = UIBezierPath(arcCenter: CGPoint(x: frame.size.height/2, y: frame.size.height/2), radius: CGFloat((frame.size.height/2)+25), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)

        let pathAnim = CABasicAnimation.init(keyPath: "path")
        pathAnim.toValue = newPath.cgPath
        pathAnim.duration = 1.0

        let alphaAnimation = CAKeyframeAnimation.init(keyPath: "opacity")
        alphaAnimation.values = [0,0.75,0,0]
        alphaAnimation.keyTimes = [0,0.1,0.87,1]
        alphaAnimation.duration = 1.0

        let combinedAnim = CAAnimationGroup.init()
        combinedAnim.animations = [pathAnim, alphaAnimation]
        combinedAnim.isRemovedOnCompletion = false
        combinedAnim.repeatCount = .infinity

        combinedAnim.duration = 1.0
        combinedAnim.fillMode = kCAFillModeBoth

        return combinedAnim
    }

}