? ? CAGradientLayer制作顏色漸變效果,常于CAShapeLayer結(jié)合使用富寿。CAShapeLayer繪制形狀月而,CAGradientLayer提供顏色漸變惭缰。如果形狀不是正方形的話,layer會(huì)被拉伸晚缩。
屬性介紹
//顏色數(shù)組,支持動(dòng)畫(huà)
@property(nullable, copy) NSArray *colors;
//每種顏色的最亮的位置,受startPoint尾膊、endPoint的影響。locations中的百分比是以startPoint荞彼、endPoint兩點(diǎn)之間的距離為準(zhǔn)的,支持動(dòng)畫(huà)
@property(nullable, copy) NSArray*locations;
//顏色開(kāi)始變化的地方,支持動(dòng)畫(huà)
@property CGPoint startPoint;
//顏色結(jié)束變化的地方,支持動(dòng)畫(huà)
@property CGPoint startPoint;
//分布類型
@property(copy) NSString *type;
startPoint冈敛、startPoint的取值都是在0-1之間,代表的是比例值卿泽。之前我們說(shuō)過(guò)坐標(biāo)系統(tǒng)的介紹莺债,這里就不多說(shuō)了滋觉。它們共同確定了,漸變的方向和區(qū)域如下圖所示齐邦,圖1-1為startPoint(0,0)椎侠、endPoint(1,0)的漸變圖片,圖1-2為startPoint(0,0)措拇、endPoint(0.5,0)的漸變圖片我纪。起點(diǎn)都在原點(diǎn),都是只有x值變化了丐吓。所以將兩點(diǎn)連接起來(lái)所指向的方向就是漸變方向浅悉。但是圖1-1的x值為1,圖1-2的x值為0.5券犁。所以圖1-2的顏色漸變區(qū)域?yàn)閳D1-1的一半术健。屬性locations中的分割點(diǎn)也是一起點(diǎn)和終點(diǎn)所劃分的區(qū)域進(jìn)行分割的。
示例代碼
效果如下所示
利用CAGridientLayer粘衬,提供漸變色荞估。利用CAShapeLayer提供形狀。
代碼很簡(jiǎn)單
CAGradientLayer *layer = [CAGradientLayer layer];
layer.frame = CGRectMake(10, 100, 120, 120);
//漸變的顏色
layer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor greenColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
//漸變點(diǎn)
layer.locations = @[@0.2, @0.4, @0.6];
//起點(diǎn)
layer.startPoint = CGPointMake(0, 0);
//終點(diǎn)
layer.endPoint = CGPointMake(0.5, 0);
//提供形狀
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, layer.frame.size.width, 30)].CGPath;
layer.mask = maskLayer;
[self.view.layer addSublayer:layer];