改变周围的圆环图颜色渐变

Question

我试图做一个动画甜甜圈观点，即0和100之间的给定值时，它会动画轮看法高达这个数字。我有这个工作正常，但想从一个到另一个，然后又在周围的方式褪色的颜色。目前，当我加我的梯度，它会由左到右，而不是周围的圆环图的周长。

    class CircleScoreView: UIView {
        private let outerCircleLayer = CAShapeLayer()
        private let outerCircleGradientLayer = CAGradientLayer()
        private let outerCircleLineWidth: CGFloat = 5

        override init(frame: CGRect) {
            super.init(frame: .zero)
        }

        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }

        override func layoutSubviews() {
            super.layoutSubviews()
            buildLayers()
        }

        /// Value must be within 0...100 range
        func setScore(_ value: Int, animated: Bool = false) {
            if value != 0 {
                let clampedValue: CGFloat = CGFloat(value.clamped(to: 0...100)) / 100
                if !animated {
                    outerCircleLayer.strokeEnd = clampedValue
                } else {
                    let outerCircleAnimation = CABasicAnimation(keyPath: "strokeEnd")
                    outerCircleAnimation.duration = 1.0
                    outerCircleAnimation.fromValue = 0
                    outerCircleAnimation.toValue = clampedValue
                    outerCircleAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

                    outerCircleLayer.strokeEnd = clampedValue
                    outerCircleLayer.add(outerCircleAnimation, forKey: "outerCircleAnimation")
                }

                outerCircleGradientLayer.colors = [Constant.Palette.CircleScoreView.startValue.cgColor,
                                                   Constant.Palette.CircleScoreView.middleValue.cgColor,
                                                   Constant.Palette.CircleScoreView.endValue.cgColor]
            }
        }

        private func buildLayers() {

            // Outer background circle
            let arcCenter = CGPoint(x: frame.size.width / 2, y: frame.size.height / 2)
            let startAngle = CGFloat(-0.5 * Double.pi)
            let endAngle =  CGFloat(1.5 * Double.pi)

            let circlePath = UIBezierPath(arcCenter: arcCenter,
                                          radius: (frame.size.width - outerCircleLineWidth) / 2,
                                          startAngle: startAngle,
                                          endAngle: endAngle,
                                          clockwise: true)

            // Outer circle
            setupOuterCircle(outerCirclePath: circlePath)
        }

        private func setupOuterCircle(outerCirclePath: UIBezierPath) {
            outerCircleLayer.path = outerCirclePath.cgPath
            outerCircleLayer.fillColor = UIColor.clear.cgColor
            outerCircleLayer.strokeColor = UIColor.black.cgColor
            outerCircleLayer.lineWidth = outerCircleLineWidth
            outerCircleLayer.lineCap = CAShapeLayerLineCap.round

            outerCircleGradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
            outerCircleGradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
            outerCircleGradientLayer.frame = bounds
            outerCircleGradientLayer.mask = outerCircleLayer
            layer.addSublayer(outerCircleGradientLayer)
        }
    }

我打算像this但颜色不是一个块，但梯度周围的甜甜圈视图从一种颜色到下一个。

Answer 1

如果导入AngleGradientLayer到你的项目，那么所有你应该需要做的是改变： private let outerCircleGradientLayer = CAGradientLayer()到 private let outerCircleGradientLayer = AngleGradientLayer()