CALayer篇：
再廢話一句：本文中一共提供了兩個(gè)方向上變色的繪制方法（水平方向，對(duì)角線方向）
/** 不多說，直接擼代碼*/
#import "ViewController.h"
#define YG_SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define YG_SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
@interface ViewController ()
/**計(jì)時(shí)器*/
@property (nonatomic, strong) NSTimer *timer;
/**頂部進(jìn)度條*/
@property (nonatomic,strong) CAGradientLayer * YG_top_colorLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor blackColor];
/**創(chuàng)建頂部進(jìn)度條--水平防線顏色漸變*/
[self creatYGTopColorLayer];
/**創(chuàng)建底部彩帶--對(duì)角線方向顏色漸變*/
[self creatYGBottomColorLayer];
/**添加一個(gè)標(biāo)簽*/
[self creatMyLabel]; //這一句基本沒用，哈哈哈
}
- 實(shí)現(xiàn)方法
#pragma mark -- 創(chuàng)建頂部 水平方向變色的進(jìn)度條
-(void)creatYGTopColorLayer
{
/**創(chuàng)建*/
self.self.YG_top_colorLayer = [CAGradientLayer layer];
/**設(shè)置frame*/
self.YG_top_colorLayer.frame = (CGRect){CGPointMake(0, 64), CGSizeMake(15, 3)};
/**修改位置為屏幕居中*/
// self.YG_top_colorLayer.position = self.view.center;
/**添加到View上*/
[self.view.layer addSublayer:self.YG_top_colorLayer];
/**顏色分配----類型(NSArray)*/
self.YG_top_colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor yellowColor].CGColor];
/**顏色分割線----類型(NSArray<NSNumber *>)*/
self.YG_top_colorLayer.locations = @[@(0.2),@(0.4),@(0.6),@(0.8)];
/**起始點(diǎn)----類型：(CGPoint)*/
self.YG_top_colorLayer.startPoint = CGPointMake(0, 0);
/**結(jié)束點(diǎn)----類型：(CGPoint)*/
self.YG_top_colorLayer.endPoint = CGPointMake(1, 0);
self.timer = [NSTimer scheduledTimerWithTimeInterval:0.3f
target:self
selector:@selector(TimerEvent)
userInfo:nil
repeats:YES];
}
- 簡(jiǎn)單實(shí)現(xiàn)計(jì)時(shí)器的方法，實(shí)際開放中要根據(jù)下載進(jìn)度或者需求去設(shè)置
#pragma mark - 定時(shí)器響應(yīng)事件
- (void)TimerEvent
{
//定時(shí)改變顏色（后邊兩個(gè)效果圖，第一個(gè)是注釋掉了這行代碼這個(gè)行的，第二個(gè)是沒有注釋的）；
self.YG_top_colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor colorWithRed:arc4random() % 255 / 255.0
green:arc4random() % 255 / 255.0
blue:arc4random() % 255 / 255.0
alpha:1.0].CGColor];
//定時(shí)改變分割點(diǎn)
self.YG_top_colorLayer.locations = @[@(arc4random() % 2 / 10.0f), //取0.0~0.2之間的數(shù)值
@(arc4random() % 4 / 10.0f + 0.21f), //取0.21~0.4之間的數(shù)值
@(arc4random() % 6 / 10.0f + 0.41f), //取0.41~0.6之間的數(shù)值
@(arc4random() % 8 / 10.0f + 0.61f)]; //取0.61~0.8之間的數(shù)值
//定時(shí)增加進(jìn)度條寬度
CGRect progressRect = [self.YG_top_colorLayer frame];
if (progressRect.size.width < YG_SCREEN_WIDTH) {
progressRect.size.width += 10;
} else {
progressRect.size.width = 15;
}
[self.YG_top_colorLayer setFrame:progressRect];
}
-
無顏色變化的效果
無顏色變化的效果.gif
- 有顏色變化的效果
無奈。。gif上效果并不是很明顯....而且這次沒有UI設(shè)計(jì)師在配色上的指導(dǎo)，我的顏色好丑啊.....
- 下邊是底部那條 對(duì)角線方向上 變色 彩帶的繪制方法
#pragma mark -- 創(chuàng)建底部 沿對(duì)角線變色的彩帶
-(void)creatYGBottomColorLayer
{
/**創(chuàng)建*/
CAGradientLayer * YG_bottom_colorLayer = [CAGradientLayer layer];
/**設(shè)置frame*/
YG_bottom_colorLayer.frame = (CGRect){CGPointMake(0, YG_SCREEN_HEIGHT-164), CGSizeMake(YG_SCREEN_WIDTH, 20)};
/**修改位置為屏幕居中*/
// YG_bottom_colorLayer.position = self.view.center;
/**添加到View上*/
[self.view.layer addSublayer:YG_bottom_colorLayer];
/**顏色分配----類型(NSArray)*/
YG_bottom_colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor yellowColor].CGColor];
/*也可以用下面的方式創(chuàng)建顏色的數(shù)組
[NSArray arrayWithObjects:
(id)[[[UIColor redColor] colorWithAlphaComponent:1] CGColor],
(id)[[[UIColor blueColor] colorWithAlphaComponent:1] CGColor],
(id)[[[UIColor greenColor] colorWithAlphaComponent:1] CGColor],
(id)[[UIColor yellowColor] CGColor],
nil];
*/
/**顏色分割線----類型(NSArray<NSNumber *>)*/
YG_bottom_colorLayer.locations = @[@(0.2),@(0.4),@(0.6),@(0.8)];
/*也可以用下邊的方式創(chuàng)建顏色分割線
[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.2],
[NSNumber numberWithFloat:0.4],
[NSNumber numberWithFloat:0.6],
[NSNumber numberWithFloat:0.8],
[NSNumber numberWithFloat:1.0],
nil];
*/
/**起始點(diǎn)----類型：(CGPoint)*/
YG_bottom_colorLayer.startPoint = CGPointMake(0, 0);
/**結(jié)束點(diǎn)----類型：(CGPoint)*/
YG_bottom_colorLayer.endPoint = CGPointMake(1, 1);
}
- 下邊這個(gè)沒啥用的啊，不建議浪費(fèi)時(shí)間看這個(gè)
#pragma mark -- 添加標(biāo)簽
-(void)creatMyLabel
{
UILabel * label = [[UILabel alloc]init];
label.frame = CGRectMake(0, 0, 200, 30);
label.text = @"小馬兒 你到是給我 加載啊 你！";
label.textAlignment = NSTextAlignmentCenter;
label.textColor = [UIColor whiteColor];
label.center = self.view.center;
[self.view addSubview:label];
}
【code_小馬】
晌午時(shí)光
很喜歡的一篇文章，拿出來和大家分享
【第八集】
阿珊對(duì)于他和如風(fēng)的第一次正式會(huì)面很不滿意，第二天她決定拋開我直接和如風(fēng)一對(duì)一?！ “⑸簛淼搅巳顼L(fēng)的工地，在陽光的照耀下赤裸著上身的如風(fēng)讓阿珊目眩神迷?！ 叭顼L(fēng)！”阿珊喊。 如風(fēng)慌忙扔下手里的沙袋跑了過來說：“什么事？我姐出了什么事么？” “如畫她沒事?！卑⑸赫f?！ 芭?，那我回去干活了。”如風(fēng)態(tài)度頓時(shí)冷漠了下來。 阿珊一把拉住他說：“你先別走！我有事??！” 如風(fēng)掙開她的手說：“對(duì)不起，你的事跟我沒關(guān)系?！薄 “⑸簺]想到他竟會(huì)如此冷漠，她從小到大還從未遭到這樣的冷遇，她含著眼淚說：“你怎么這樣呢！我來是想請(qǐng)你吃頓飯的，交個(gè)朋友不好嗎？” 如風(fēng)不為所動(dòng)，仍舊冷漠的說：“你想和我交往是么？” 阿珊紅了臉，使勁揪著裙子沒有應(yīng)答。 如風(fēng)接著說：“你喜歡我什么呢？只是長(zhǎng)的還好嗎？我們不是一個(gè)世界的，你永遠(yuǎn)走不到我這里，所以算了吧?！薄 “⑸汉懿桓市模f：“那我有什么不好呢？你的世界怎么了，連一個(gè)女孩都容不下嗎？” 如風(fēng)低下頭幽幽地說：“那里有個(gè)人。” 阿珊大怒說：“說得好聽，原來是有女朋友了？既然有就直說好了，這么逗人玩顯得很帥嗎？” 如風(fēng)說：“隨便你怎么說吧，總之我們不可能?！薄 “⑸赫f：“別小看人了！誰要和你在一起！” 阿珊抽泣著跑了，如風(fēng)突然想起了什么，喊道：“喂！你等一下！” 阿珊以為還有余寰，站住了腳。 如風(fēng)說：“別跟我姐說你來找我了。” 阿珊徹底死心，她回頭喊道：“誰還會(huì)記得你！這輩子我都不會(huì)提你的名字！” 第二天上課，阿珊?jiǎn)栁遥骸澳愕艿苡信?？” 我不明所以的說：“沒有啊?！薄 昂?！你蒙在鼓里罷了！”阿珊說，“你這么不解風(fēng)情的姐姐跟你說了也不管用！” 我默默低下頭，阿珊的話就像在我心里扔了顆石頭?！ 『孟駨?3歲以后，在童年和少年的分界線上，我就沒再和外人親近過，我的世界里只有如風(fēng)，他也一樣。而現(xiàn)在，在他那邊真的多了一個(gè)人嗎？所以那天他才會(huì)莫名其妙的發(fā)了一頓脾氣？ 整整一天我都混混沌沌的，晚上下起了雨，如風(fēng)遲遲沒有回來。平時(shí)他也有收工晚的時(shí)候，我都是在家等他的，可今天我卻坐不住了，心里很不安。我知道阿珊的話讓我震動(dòng)了，我不愿意看見如風(fēng)身邊站著任何一個(gè)旁人。.............................
