gradient设置上下渐变_iOS 绘制渐变·实例篇

原标题：iOS 绘制渐变·实例篇

作者丨QiShare

https://www.jianshu.com/p/3fbea6b31dc6

1、渐变色进度条

渐变色进度条实现效果

渐变色进度条实现代码

// 进度条view

UIView*progressView = [[ UIViewalloc] initWithFrame: CGRectMake( 30.0, 100.0, self.view.bounds.size.width - 30.0* 2, 5.0)];

progressView.center = ( CGPoint){ self.view.bounds.size.width / 2, self.view.bounds.size.height / 3};

progressView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;

progressView.backgroundColor = [[ UIColorlightGrayColor] colorWithAlphaComponent: .3];

progressView.layer.cornerRadius = progressView.bounds.size.height / 2;

progressView.layer.masksToBounds = YES;

[ self.view addSubview:progressView];

// 渐变色layer

CAGradientLayer*gradientLayer = [ CAGradientLayerlayer];

gradientLayer.frame = progressView.bounds;

gradientLayer.colors = @[(__bridge id)[[ UIColorgreenColor] colorWithAlphaComponent: 1.0].CGColor,

(__bridge id)[[ UIColorblueColor] colorWithAlphaComponent: 1.].CGColor,

(__bridge id)[[ UIColorpurpleColor] colorWithAlphaComponent: 1.0].CGColor,];

gradientLayer.startPoint = ( CGPoint){ .0};

gradientLayer.endPoint = ( CGPoint){ 1.0};

[progressView.layer addSublayer:gradientLayer];

// mask layer

CALayer*maskLayer = [ CALayerlayer];

maskLayer.frame = ( CGRect){ .0, .0, .0, gradientLayer.bounds.size.height};

maskLayer.backgroundColor = [ UICo