使用CAGradientLayer實現(xiàn)顏色漸變和特效

作為前端開發(fā),我們經(jīng)常會遇到產(chǎn)品要求我們給圖片添加漸變色,這樣界面看起來就不是那么單調(diào),下面就主要談一下使用CAGradientLayer實現(xiàn)某些漸變的特效鳄袍。


首先看一下效果圖:

? ?效果一:

效果二:

效果三:

效果一:

CAGradientLayer *colorLayer = [CAGradientLayer layer];

colorLayer.frame = (CGRect){CGPointZero,CGSizeMake(200, 200)};

colorLayer.position = self.view.center;

[self.view.layer addSublayer:colorLayer];

//顏色分配

colorLayer.colors = @[(__bridge id)[UIColor colorWithRed:0.0/255 green:222.0/255 blue:200.0/255 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:75.0/255 green:255.0/255 blue:210.0/255 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:190.0/255 green:253.0/255 blue:220.0/255 alpha:1.0].CGColor];

colorLayer.startPoint = CGPointMake(0.0, 0.0);//起始點

colorLayer.endPoint = CGPointMake(1.0, 1.0);//結(jié)束點

colorLayer.locations = @[@(0.25),@(0.5),@(0.75)];//顏色漸變位置分割線

效果二:

CAGradientLayer *colorLayer = [CAGradientLayer layer];

colorLayer.frame = (CGRect){CGPointZero,CGSizeMake(200, 200)};

colorLayer.position = self.view.center;

[self.view.layer addSublayer:colorLayer];

//顏色分配

colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor grayColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor];

colorLayer.locations = @[@(0.25),@(0.5),@(0.75)];

colorLayer.startPoint = CGPointMake(0, 0);

colorLayer.endPoint = CGPointMake(1, 0);

_timer = [NSTimer scheduledTimerWithTimeInterval:0.5 repeats:YES block:^(NSTimer *timer){

static CGFloat length = -0.1f;

if (length >= 1.1) {

length = - 0.1f;

[CATransaction setDisableActions:YES];

colorLayer.locations = @[@(length),@(length + 0.1),@(length + 0.15)];

}else{

[CATransaction setDisableActions:NO];

colorLayer.locations = colorLayer.locations = @[@(length),@(length + 0.1),@(length + 0.15)];

}

length += 0.1f;

}];

[_timer fire];

效果三:

-(void)addCircleGradientLayer{

CAGradientLayer *colorLayer = [CAGradientLayer layer];

colorLayer.backgroundColor = [UIColor orangeColor].CGColor;

colorLayer.frame = CGRectMake(0, 120, 200, 200);

colorLayer.position = CGPointMake(self.view.center.x, colorLayer.frame.origin.y);

[self.view.layer addSublayer:colorLayer];

// 顏色分配

colorLayer.colors = @[(__bridge id)[UIColor blackColor].CGColor,(__bridge id)[UIColor whiteColor].CGColor,(__bridge id)[UIColor blackColor].CGColor];

colorLayer.locations? = @[@(-0.2), @(-0.1), @(0)];// 起始點

colorLayer.startPoint = CGPointMake(0, 0);// 結(jié)束點

colorLayer.endPoint? = CGPointMake(1, 0);

CAShapeLayer *circle = [self createCircleWithCenter:CGPointMake(100, 110) radius:90 startAngle:DEGREES(0) endAngle:DEGREES(360) clockwise:YES lineDashPattern:nil];

circle.strokeColor = [UIColor redColor].CGColor;

[self.view.layer addSublayer:circle];

circle.strokeEnd = 1.0f;

colorLayer.mask = circle;

_timer1 = [NSTimer scheduledTimerWithTimeInterval:1.0 repeats:YES block:^(NSTimer *timer){

static NSInteger index = 1;

if (index ++ % 2 == 0) {

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"locations"];

animation.fromValue = @[@(-0.1), @(-0.15), @(0)];

animation.toValue? = @[@(1.0), @(1.1), @(1.15)];

animation.duration? = 1.0;

[colorLayer addAnimation:animation forKey:nil];}

} ]; ? ? ?[_timer1 fire];}

-(CAShapeLayer *)createCircleWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise lineDashPattern:(NSArray *)lineDashPattern

{

CAShapeLayer *layer = [CAShapeLayer layer];

layer.lineCap = kCALineCapRound;

// 貝塞爾曲線(創(chuàng)建一個圓)

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0)

radius:radius

startAngle:startAngle

endAngle:endAngle

clockwise:clockwise];

// 獲取path

layer.path = path.CGPath;

layer.position = center;

// 設(shè)置填充顏色為透明

layer.fillColor = [UIColor clearColor].CGColor;

// 獲取曲線分段的方式

if (lineDashPattern)

{

layer.lineDashPattern = lineDashPattern;

}

return layer;

}

-(void)addRectangleGradientLayer

{

CAGradientLayer *colorLayer = [CAGradientLayer layer];

colorLayer.backgroundColor = [UIColor orangeColor].CGColor;

colorLayer.frame = CGRectMake(0, 300, 300, 100);

colorLayer.position = CGPointMake(self.view.center.x, colorLayer.frame.origin.y);

[self.view.layer addSublayer:colorLayer];

// 顏色分配

colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,

(__bridge id)[UIColor lightGrayColor].CGColor,

(__bridge id)[UIColor redColor].CGColor];

colorLayer.locations? = @[@(-0.2), @(-0.1), @(0)];

// 起始點

colorLayer.startPoint = CGPointMake(0, 0);

// 結(jié)束點

colorLayer.endPoint? = CGPointMake(1, 0);

_timer2 = [NSTimer scheduledTimerWithTimeInterval:1.0 repeats:YES block:^(NSTimer *timer){

static NSInteger index = 1;

if (index ++ % 2 == 0) {

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"locations"];

animation.fromValue = @[@(-0.1), @(-0.15), @(0)];

animation.toValue? = @[@(1.0), @(1.1), @(1.15)];

animation.duration? = 1.0;

[colorLayer addAnimation:animation forKey:nil];

}

}];

[_timer2 fire];

}

注:startPoint,endPoint,locations遵循Layler的坐標系,范圍為(0,1)吏恭。locations里面的值是遞增的拗小,其位置點可以看做是y值為0在x軸上的點。至于每個顏色所占區(qū)域和漸變分割線是由locations上的點到(startPoint與endPoint這條直線)所確定確定樱哼。

下載地址:demo下載github地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末哀九,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子搅幅,更是在濱河造成了極大的恐慌阅束,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件茄唐,死亡現(xiàn)場離奇詭異息裸,居然都是意外死亡,警方通過查閱死者的電腦和手機沪编,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門呼盆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蚁廓,你說我怎么就攤上這事访圃。” “怎么了纳令?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長克胳。 經(jīng)常有香客問我平绩,道長,這世上最難降的妖魔是什么漠另? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任捏雌,我火速辦了婚禮,結(jié)果婚禮上笆搓,老公的妹妹穿的比我還像新娘性湿。我一直安慰自己,他們只是感情好满败,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布肤频。 她就那樣靜靜地躺著,像睡著了一般算墨。 火紅的嫁衣襯著肌膚如雪宵荒。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機與錄音报咳,去河邊找鬼侠讯。 笑死,一個胖子當著我的面吹牛暑刃,可吹牛的內(nèi)容都是我干的厢漩。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼岩臣,長吁一口氣:“原來是場噩夢啊……” “哼溜嗜!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起婿脸,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤粱胜,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后狐树,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體焙压,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年抑钟,在試婚紗的時候發(fā)現(xiàn)自己被綠了涯曲。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡在塔,死狀恐怖幻件,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蛔溃,我是刑警寧澤绰沥,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站贺待,受9級特大地震影響徽曲,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜麸塞,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一秃臣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧哪工,春花似錦奥此、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至偎捎,卻和暖如春祥绞,著一層夾襖步出監(jiān)牢的瞬間非洲,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工蜕径, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留两踏,地道東北人。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓兜喻,卻偏偏與公主長得像梦染,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子朴皆,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容