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

很多時(shí)候設(shè)計(jì)師希望背景顏色加上顏色漸變效果,這樣會(huì)使整個(gè)界面看起來色彩更加豐富,生動(dòng)萌壳。今天主要講解下如何用CAGradientLayer實(shí)現(xiàn)背景顏色漸變效果,和使用CAGradientLayer實(shí)現(xiàn)某些漸變的特效蔬螟。

先看效果動(dòng)畫

漸變背景顏色
特效1
特效2

漸變背景顏色

    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:255.0/255 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:75.0/255 green:255.0/255 blue:249.0/255 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:190.0/255 green:253.0/255 blue:255.0/255 alpha:1.0].CGColor];
    
    colorLayer.startPoint = CGPointMake(0.0, 0.0);//起始點(diǎn)
    colorLayer.endPoint = CGPointMake(1.0, 1.0);//結(jié)束點(diǎn)
    colorLayer.locations = @[@(0.25),@(0.5),@(0.75)];//顏色漸變位置分割線

這里得注意startPoint,endPoint,locations遵循Layler的坐標(biāo)系苍鲜,范圍為(0,1)入热。locations里面的值是遞增的,其位置點(diǎn)可以看做是y值為0在x軸上的點(diǎn)。至于每個(gè)顏色所占區(qū)域和漸變分割線是由locations上的點(diǎn)到(startPointendPoint這條直線)所確定確定遵绰。例如我上面代碼所表示的區(qū)域畫線后如下圖所示:

藍(lán)線為起始位置和結(jié)束位置吻谋,黃線為分割線

特效1

-(void)addGradientLayer
{
    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 greenColor].CGColor,(__bridge id)[UIColor blueColor].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];
   
    
}

這里只是做了個(gè)定時(shí)器對(duì)locations進(jìn)行定增操作忠蝗。

特效2

-(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 redColor].CGColor,
                          (__bridge id)[UIColor whiteColor].CGColor,
                          (__bridge id)[UIColor redColor].CGColor];
    colorLayer.locations  = @[@(-0.2), @(-0.1), @(0)];
    
    // 起始點(diǎn)
    colorLayer.startPoint = CGPointMake(0, 0);
    
    // 結(jié)束點(diǎn)
    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)建一個(gè)圓)
    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 whiteColor].CGColor,
                          (__bridge id)[UIColor redColor].CGColor];
    colorLayer.locations  = @[@(-0.2), @(-0.1), @(0)];
    
    // 起始點(diǎn)
    colorLayer.startPoint = CGPointMake(0, 0);
    
    // 結(jié)束點(diǎn)
    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];
}

這里其實(shí)是兩個(gè)特效,只是很類似所以放在了一起漓拾。第一個(gè)是加了一個(gè)圓形的遮罩然后對(duì)locations進(jìn)行動(dòng)畫操作阁最。第二個(gè)只是簡單的對(duì)locations進(jìn)行動(dòng)畫操作。

擴(kuò)展

其實(shí)CAGradientLayer 的這四個(gè)屬性colors, locations,startPoint,endPoint` 我們都是可以進(jìn)行動(dòng)畫操作.

下載地址

GitHub

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末骇两,一起剝皮案震驚了整個(gè)濱河市速种,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌低千,老刑警劉巖配阵,帶你破解...
    沈念sama閱讀 211,561評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異示血,居然都是意外死亡棋傍,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門难审,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瘫拣,“玉大人,你說我怎么就攤上這事告喊◆镏簦” “怎么了?”我有些...
    開封第一講書人閱讀 157,162評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵黔姜,是天一觀的道長拢切。 經(jīng)常有香客問我,道長地淀,這世上最難降的妖魔是什么失球? 我笑而不...
    開封第一講書人閱讀 56,470評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮帮毁,結(jié)果婚禮上实苞,老公的妹妹穿的比我還像新娘。我一直安慰自己烈疚,他們只是感情好黔牵,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評(píng)論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著爷肝,像睡著了一般猾浦。 火紅的嫁衣襯著肌膚如雪陆错。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,806評(píng)論 1 290
  • 那天金赦,我揣著相機(jī)與錄音音瓷,去河邊找鬼。 笑死夹抗,一個(gè)胖子當(dāng)著我的面吹牛绳慎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播漠烧,決...
    沈念sama閱讀 38,951評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼杏愤,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了已脓?” 一聲冷哼從身側(cè)響起珊楼,我...
    開封第一講書人閱讀 37,712評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎度液,沒想到半個(gè)月后厕宗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,166評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡恨诱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評(píng)論 2 327
  • 正文 我和宋清朗相戀三年媳瞪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片照宝。...
    茶點(diǎn)故事閱讀 38,643評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖句葵,靈堂內(nèi)的尸體忽然破棺而出厕鹃,到底是詐尸還是另有隱情,我是刑警寧澤乍丈,帶...
    沈念sama閱讀 34,306評(píng)論 4 330
  • 正文 年R本政府宣布剂碴,位于F島的核電站,受9級(jí)特大地震影響轻专,放射性物質(zhì)發(fā)生泄漏忆矛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評(píng)論 3 313
  • 文/蒙蒙 一请垛、第九天 我趴在偏房一處隱蔽的房頂上張望催训。 院中可真熱鬧,春花似錦宗收、人聲如沸漫拭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽采驻。三九已至审胚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間礼旅,已是汗流浹背膳叨。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評(píng)論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留痘系,地道東北人懒鉴。 一個(gè)月前我還...
    沈念sama閱讀 46,351評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像碎浇,于是被迫代替她去往敵國和親临谱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評(píng)論 2 348

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