我正在制作这个动画，其中每秒都会收到一个数字，并且进度条必须根据 double 值填充或下降。

我已经创建了 View 并将所有 View 添加到 UIStackView 中。还制作了所有观点的导出收藏。 (按标签对它们进行排序并使它们呈圆形)。

我可以循环查看 View 并更改它们的背景颜色，但我想看看是否有更好的方法来做到这一点。有什么建议吗？

谢谢

最佳答案

所以你的做法很好。这里有两种不同的方式。第一个是 Core Graphics。您可能想要更新方法，甚至在子层中制作颜色渐变。

第一种方式

import UIKit

class Indicator: UIView {

    var padding : CGFloat = 5.0
    var minimumSpace : CGFloat = 4.0
    var indicators : CGFloat = 40
    var indicatorColor : UIColor = UIColor.lightGray
    var filledIndicatorColor = UIColor.blue

    var currentProgress = 0.0
    var radiusFactor : CGFloat = 0.25
    var fillReversed = false

    override init(frame: CGRect) {
        super.init(frame: frame)
        setUp(animated: false)

    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setUp(animated: false)
        backgroundColor = UIColor.green
    }

    func updateProgress(progress:Double, animated:Bool) {
        currentProgress = progress
        setUp(animated: animated)
    }

    private func setUp(animated:Bool){

        // internal space
        let neededPadding = (indicators - 1) * minimumSpace
        //calculate height and width minus padding and space since vertical
        let height = (bounds.height - neededPadding - (padding * 2.0)) / indicators
        let width = bounds.width - padding * 2.0

        if animated == true{
            let trans = CATransition()
            trans.type = kCATransitionFade
            trans.duration = 0.5
            self.layer.add(trans, forKey: nil)
        }
        layer.sublayers?.removeAll()
        for i in 0...Int(indicators - 1.0){
            let indicatorLayer = CALayer()
            indicatorLayer.frame = CGRect(x: padding, y: CGFloat(i) * height + padding + (minimumSpace * CGFloat(i)), width: width, height: height)
            //haha i don't understand my logic below but it works hahaha
            // i know it has to go backwards
            if fillReversed{
                if CGFloat(1 - currentProgress) * self.bounds.height < indicatorLayer.frame.origin.y{
                    indicatorLayer.backgroundColor = filledIndicatorColor.cgColor
                }else{
                    indicatorLayer.backgroundColor = indicatorColor.cgColor
                }
            }else{
                if CGFloat(currentProgress) * self.bounds.height > indicatorLayer.frame.origin.y{
                     indicatorLayer.backgroundColor = indicatorColor.cgColor
                }else{
                    indicatorLayer.backgroundColor = filledIndicatorColor.cgColor

                }
            }

            indicatorLayer.cornerRadius = indicatorLayer.frame.height * radiusFactor
            indicatorLayer.masksToBounds = true
            self.layer.addSublayer(indicatorLayer)
        }
    }

    //handle rotation
    override func layoutSubviews() {
        super.layoutSubviews()
        setUp(animated: false)
    }
}

第二种方式是使用CAShapeLayer，好处是进度会得到一个自然的动画。

    import UIKit

class Indicator: UIView {

    var padding : CGFloat = 5.0
    var minimumSpace : CGFloat = 4.0
    var indicators : CGFloat = 40
    var indicatorColor : UIColor = UIColor.lightGray
    var filledIndicatorColor = UIColor.blue

    var currentProgress = 0.0
    var radiusFactor : CGFloat = 0.25
    private var progressLayer : CALayer?
    private var shapeHoles : CAShapeLayer?

    override init(frame: CGRect) {
        super.init(frame: frame)
        transparentDotsAndProgress()

    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        transparentDotsAndProgress()
    }

    func updateProgress(progress:Double) {
        if progress <= 1 && progress >= 0{
            currentProgress = progress
            transparentDotsAndProgress()
        }
    }

    //handle rotation
    override func layoutSubviews() {
        super.layoutSubviews()
        transparentDotsAndProgress()
    }

    func transparentDotsAndProgress(){
        self.layer.masksToBounds = true

        let neededPadding = (indicators - 1) * minimumSpace
        //calculate height and width minus padding and space since vertical
        let height = (bounds.height - neededPadding - (padding * 2.0)) / indicators
        let width = bounds.width - padding * 2.0

        let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height), cornerRadius: 0)
        path.usesEvenOddFillRule = true
        for i in 0...Int(indicators - 1.0){
            let circlePath = UIBezierPath(roundedRect: CGRect(x: padding, y: CGFloat(i) * height + padding + (minimumSpace * CGFloat(i)), width: width, height: height), cornerRadius: height * radiusFactor)
            path.append(circlePath)
        }


        if progressLayer == nil{
            progressLayer = CALayer()
            progressLayer?.backgroundColor = filledIndicatorColor.cgColor
            self.layer.addSublayer(progressLayer!)

        }

        progressLayer?.frame =  CGRect(x: 0, y: -self.bounds.height - padding + CGFloat(currentProgress) * self.bounds.height, width: bounds.width, height: bounds.height)


        self.shapeHoles?.removeFromSuperlayer()
        shapeHoles = CAShapeLayer()
        shapeHoles?.path = path.cgPath
        shapeHoles?.fillRule = kCAFillRuleEvenOdd
        shapeHoles?.fillColor = UIColor.white.cgColor
        shapeHoles?.strokeColor = UIColor.clear.cgColor
        self.layer.backgroundColor = indicatorColor.cgColor
        self.layer.addSublayer(shapeHoles!)


    }

}

这两种方式都应该可行，但 CAShapeLayer 的优势在于您可以获得自然的动画。

关于ios - swift 中的 UIView 单杠动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45046396/