ios – 圆圈中的渐变色[复制]

2023年8月23日 240次阅读

参见英文答案 >
iOS – Circle shaped gradient                                    6个

我必须创建一个带动画的圆圈,我已创建它,一切正常.我的问题是添加渐变色.请参考随附的屏幕截图

《ios – 圆圈中的渐变色[复制]》

下面是我用动画制作圆圈的代码：

      let lineWidth: CGFloat = 20

      dispatch_async(dispatch_get_main_queue()) { () -> Void in

        let startAngle = -90.0
        let endAngle = -90.01

        let circlePath = UIBezierPath(arcCenter: CGPoint(x: self.frame.width/2,y: self.frame.height/2), radius: CGFloat(self.frame.width/2 - (self.lineWidth/2)), startAngle: CGFloat(((startAngle) / 180.0 * M_PI)), endAngle:CGFloat(((endAngle) / 180.0 * M_PI)), clockwise: true)

        // Circle layer
        let circleLayer = CAShapeLayer()
        circleLayer.path = circlePath.CGPath
        circleLayer.fillColor = UIColor.clearColor().CGColor
        circleLayer.strokeColor = UIColor.greenColor().CGColor
        circleLayer.strokeEnd = 94/100
        circleLayer.lineWidth = self.lineWidth
        circleLayer.zPosition = 1

        // Background circle layer
        let circleBackgroundLayer = CAShapeLayer()
        circleBackgroundLayer.path = circlePath.CGPath
        circleBackgroundLayer.fillColor = UIColor.clearColor().CGColor
        circleBackgroundLayer.strokeColor = UIColor.lightgrayColor().CGColor
        circleBackgroundLayer.strokeEnd = 1.0
        circleBackgroundLayer.lineWidth = self.lineWidth
        circleBackgroundLayer.zPosition = -1

        self.layer.addSublayer(circleLayer)
        self.layer.addSublayer(circleBackgroundLayer)

        // Add Animation
        let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
        pathAnimation.duration = 0.55
        pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        pathAnimation.fromValue = 0
        pathAnimation.toValue = 94/100

        circleLayer.addAnimation(pathAnimation, forKey: "strokeEnd")

    }

我的问题是在上面的代码中我应该在哪里添加CAGradientLayer来添加渐变颜色.

下面的代码行是添加渐变颜色：

       let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = CGRectMake(0, 0, 170, 170)
        gradient.colors = [UIColor(hexString: "#27C68A")().CGColor, UIColor(hexString: "#86EA26")().CGColor]
        gradient.cornerRadius = gradient.frame.width/2
        gradient.startPoint = CGPoint(x: 0,y: 1)
        gradient.endPoint = CGPoint(x: 1, y: 0)
        self.layer.insertSublayer(gradient, atIndex: 0)

最佳答案 如果你想要一个真实的渐变颜色模拟,你可以检查
this SO answer.它基于一个十字形,它将你的矩形视图分成4个部分,然后移动每个部分的颜色,以获得应用于图层蒙版的常规渐变.

点赞