解决 CAGradientLayer 闪烁问题

新风作浪2021-05-062024-01-14

CAGradientLayer 是 CALayer 的子类，用于绘制带有渐变效果的图层。

当我们在UIView 的Layer 上添加一个 CAGradientLayer 层的时候，如果

需要频繁刷新 CAGradientLayer frame，就会出现肉眼可见的闪烁过渡，看起来很怪。这是因为渐变色会有一个延迟的绘制过程。

实现一个渐变背景的 UIView ，开始的时候直接在 UIView 上 Add 一个Layer

[self.layer addSublayer:self.vipPriceGradientLayer];
		
- (CAGradientLayer *)vipPriceGradientLayer
{
	if (!_vipPriceGradientLayer) {
		CAGradientLayer *gl = [CAGradientLayer layer];
		gl.startPoint = CGPointMake(0.62, 0);
		gl.endPoint = CGPointMake(0.62, 1);
		gl.colors = @[(__bridge id)[UIColor colorWithHexString:@"#FEE5B6"].CGColor, (__bridge id)[UIColor colorWithHexString:@"#FED28B"].CGColor];
		gl.locations = @[@(0), @(1.0f)];
		gl.cornerRadius = XXBPtScale(5);
		_vipPriceGradientLayer = gl;
	}
	return _vipPriceGradientLayer;
}

在设置frame的地方更新 self.vipPriceGradientLayer.frame = xxx ,造成上面描述闪涉问题。

解决办法：自定义 layerClass

+ (Class)layerClass
{
	return [CAGradientLayer class];
}

- (instancetype)init
{
	self = [super init];
	if (self) {
		
		CAGradientLayer *gl = (CAGradientLayer *)self.layer;
		gl.startPoint = CGPointMake(0.62, 0);
		gl.endPoint = CGPointMake(0.62, 1);
		gl.colors = @[(__bridge id)[UIColor colorWithHexString:@"#FEE5B6"].CGColor, (__bridge id)[UIColor colorWithHexString:@"#FED28B"].CGColor];
		gl.locations = @[@(0), @(1.0f)];
		gl.cornerRadius = 5;
		
		self.frame = CGRectMake(0, 0, 0,  20);
		
	}
	return self;
}