CABasicAnimation 的问题

Question

所以基本上我正在尝试创建 dialogView。这个 dialogView 将包含一个加载微调器和一些将根据状态更新的文本。我按照两个指南使用 CAShapeLayer 画了一个圆圈，然后围绕它制作一条线。

链接到我遵循的代码/指南 https://www.youtube.com/watch?v=O3ltwjDJaMk https://github.com/vinayjn/Spinner/blob/master/Spinner.swift

尽管遵循了这些教程中的大部分内容。我的动画将无法正常工作。目前它只是看起来像这样，不会旋转。

class LoginDialogView: UIViewController {
    lazy var loaderView: UIView = {
        let loaderView = UIView()
        loaderView.backgroundColor = .yellow
        return loaderView
    }()

    lazy var dialogTitle : UILabel = {
        let dialogTitle = UILabel()
        dialogTitle.text = "Apples"
        dialogTitle.font =  UIFont.systemFont(ofSize: 24.0)
        dialogTitle.textAlignment = .left
        dialogTitle.numberOfLines = 1
        return dialogTitle
    }()

    private var shouldAddSublayer: Bool {
           /*
            check if:
            1. we have any sublayers at all, if we don't then its safe to add a new, so return true
            2. if there are sublayers, see if "our" layer is there, if it is not, return true
           */
           guard let sublayers = loaderView.layer.sublayers else { return true }
           return sublayers.filter({ $0.name == "progress"}).count == 0
       }

    override func viewDidLoad() {
        super.viewDidLoad()
        setupView()
    }
    override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
        if shouldAddSublayer {
            setupCircleLayers()
        }
    }

    fileprivate func setupView() {
        view.backgroundColor = .red
        view.layer.cornerRadius = 20

        view.addSubview(loaderView)
        loaderView.snp.makeConstraints { (make) in
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top).offset(10)
            make.centerX.equalTo(view.safeAreaLayoutGuide.snp.centerX)
            make.height.width.equalTo(100)
        }
    }

    private func setupCircleLayers() {
        let trackLayer = createCircleShapeLayer(strokeColor: UIColor.init(red: 56/255, green: 25/255, blue: 49/255, alpha: 1), fillColor: #colorLiteral(red: 0.9686274529, green: 0.78039217, blue: 0.3450980484, alpha: 1))
        loaderView.layer.addSublayer(trackLayer)
        startAnimating()
    }

    private func startAnimating(){
        animateRing()
    }

    private func animateRing(){
        let rotationAnimation = CABasicAnimation(keyPath: "strokeEnd")
        rotationAnimation.fromValue = 0 * (CGFloat.pi / 180)
        rotationAnimation.toValue = 360 * (CGFloat.pi / 180)
        rotationAnimation.duration = 1.6
        rotationAnimation.repeatCount = HUGE
        loaderView.layer.add(rotationAnimation, forKey: "strokeEnd")
    }

    private func createCircleShapeLayer(strokeColor: UIColor, fillColor: UIColor) -> CAShapeLayer {
        let centerpoint = CGPoint.zero
        let circularPath = UIBezierPath(arcCenter: centerpoint, radius: 30, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
        let layer = CAShapeLayer()
        layer.path = circularPath.cgPath
        layer.fillColor = fillColor.cgColor
        layer.strokeColor = strokeColor.cgColor
        layer.strokeStart = 0
        layer.strokeEnd = 0.5
        layer.lineCap = .round
        layer.lineWidth = 5
        layer.position = CGPoint(x: loaderView.frame.size.width / 2, y: loaderView.frame.size.height / 2)
        layer.name = "progress"
        return layer
    }

}

我已经查看并比较了几次代码，但我看不出我所做的有什么不同。所以我的问题是任何人都可以查看这段代码并找出我做错了什么吗？任何人都可以推荐一种安全的方法来停止这个不会导致任何潜在内存泄漏的动画吗？

我使用的是 ios 13 和 xcode 11.3.1

Answer 1

您没有将动画添加到形状层；您将其添加到容器视图的图层中。保留对您的 trackLayer 的引用并将动画添加到该层。

class LoginDialogView: UIViewController {
    lazy var loaderView: UIView = {
        let loaderView = UIView()
        loaderView.backgroundColor = .yellow
        return loaderView
    }()

    var trackLayer: CAShapeLayer?

    ...
    ...
    ...

    private func setupCircleLayers() {
        trackLayer = createCircleShapeLayer(strokeColor: UIColor(red: 56/255,
                                                                 green: 25/255,
                                                                 blue: 49/255,
                                                                 alpha: 1),
                                            fillColor: #colorLiteral(red: 0.9686274529, green: 0.78039217, blue: 0.3450980484, alpha: 1))
        loaderView.layer.addSublayer(trackLayer!)
        startAnimating()
    }

    ...
    ...
    ...

    private func animateRing(){
        let rotationAnimation = CABasicAnimation(keyPath: "strokeEnd")
        rotationAnimation.fromValue = 0 * (CGFloat.pi / 180)
        rotationAnimation.toValue = 360 * (CGFloat.pi / 180)
        rotationAnimation.duration = 1.6
        rotationAnimation.repeatCount = HUGE
        trackLayer.add(rotationAnimation, forKey: "strokeEnd")
    }

    ...
    ...
    ...
}

注意：...在上面的代码中是指代码的截断部分。