swift - CABasicAnimation 的问题

Question

所以基本上我正在尝试创建dialogView。该对话框 View 将包含一个加载微调器和一些将根据状态进行更新的文本。我按照两个指南使用 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

您没有将动画添加到形状图层；您将其添加到容器 View 的图层中。保留对 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")
    }

    ...
    ...
    ...
}

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