yzc577亚洲城亚洲娱乐第一站ios 渐变色怎么写?

( yzc577亚洲城亚洲娱乐第一站 )

项目有个需求,就给给一个进度圈添加渐变色,小白完全不知道怎么实现,请教下,下图是视觉效果

实现上面的那个圈圈外侧的渐变色进度圈,如何取出渐变色彩(比如红黄渐变 、黄白渐变这样)呢?

自定义View如下

private let kProgressWidth: CGFloat = 80
private let kProgressLineWidth: CGFloat = 10
class ColorRingView: UIView {

    var progressLayer: CAShapeLayer
    override initframe: CGRect {
        self.progressLayer = CAShapeLayer.init
        super.initframe: frame

        let path = UIBezierPath.initarcCenter: CGPointMakeframe.size.width / 2, frame.size.height / 2, radius: kProgressWidth, startAngle: degreesToRadians-90, endAngle: degreesToRadians90, clockwise: true

        progressLayer.frame = self.bounds
        progressLayer.fillColor = UIColor.clearColor.CGColor
        progressLayer.strokeColor = UIColor.whiteColor.CGColor
        progressLayer.lineCap = kCALineCapRound
        progressLayer.lineWidth = kProgressLineWidth
        progressLayer.path = path.CGPath
        progressLayer.strokeEnd = 1.0

        let gradientLayer = CALayer.init
        let mainGradientLayer = CAGradientLayer.init

        mainGradientLayer.frame = CGRectMake0, 0, self.bounds.size.width, self.bounds.size.height;
        mainGradientLayer.colors = [UIColor.initnetHex: 0xFF9B55.CGColor, UIColor.whiteColor.CGColor]
        mainGradientLayer.startPoint = CGPointMake0.5, 0
        mainGradientLayer.endPoint = CGPointMake0.5, 1
        gradientLayer.addSublayermainGradientLayer

        gradientLayer.mask = progressLayer

        self.layer.addSublayergradientLayer
    }

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

    func degreesToRadiansdegress: Double -> CGFloat {
        return CGFloatM_PI * degress / 180.0
    }

    func setPercentpercent: CGFloat {
        CATransaction.begin
        CATransaction.setDisableActionstrue
        let camtf = CAMediaTimingFunction.initname: kCAMediaTimingFunctionEaseIn
        CATransaction.setAnimationTimingFunctioncamtf
        CATransaction.setAnimationDuration5
        progressLayer.strokeEnd = percent / 100.0

        CATransaction.commit
    }

}

extension UIColor {
    convenience initred: Int, green: Int, blue: Int {
        assertred >= 0 && red <= 255, "Invalid red component"
        assertgreen >= 0 && green <= 255, "Invalid green component"
        assertblue >= 0 && blue <= 255, "Invalid blue component"

        self.initred: CGFloatred / 255.0, green: CGFloatgreen / 255.0, blue: CGFloatblue / 255.0, alpha: 1.0
    }

    convenience initnetHex: Int {
        self.initred: netHex >> 16 & 0xff, green: netHex >> 8 & 0xff, blue: netHex & 0xff
    }
}

然后在Controller里面使用

class ViewController: UIViewController {

    override func viewDidLoad {
        super.viewDidLoad
        let ring = ColorRingView.initframe: CGRectMake100, 100, 240, 240
        self.view.addSubviewring
    }
}

效果图:

主要知识点就是CAGradientLayer,稍微理解下startPoint、endPoint和locations这几个属性就能掌握使用了。

用CAGradientLayer显示一个渐变矩形
然后用CAShapeLayer绘制一个圆形mask就好了

(看完/读完)这篇文章有何感想! yzc577亚洲城亚洲娱乐第一站的分享…

发表评论

电子邮件地址不会被公开。 必填项已用*标注