假期遇上臺風(fēng)天停電 休息了好幾天齿桃。
今天大概說說CAGradientLayer的使用。
CAGradientLayer是用于處理漸變色的層結(jié)構(gòu)德频,比如想設(shè)置一個背景色的一部分為藍色苍息,一部分為紅色,這時候就可以使用CAGradientLayer來設(shè)置了壹置。CAGradientLayer的漸變色和前面所使用的CALayer竞思、CAShapeLayer一樣都可以做隱式動畫。CAGradientLayer與CAShapeLayer配合使用(CAShapeLayer上一篇有講解了)钞护,CAShapeLayer提供一個形狀盖喷,CAGradientLayer提供一個漸變色的背景。其實就是把CAShapeLayer當(dāng)作CAGradientLayer的mask屬性(遮罩)來使用了难咕。CAGradientLayer可以實現(xiàn)png圖片遮罩無法實現(xiàn)的效果课梳,而且更效率。
另外余佃,CAGradientLayer有一個坐標(biāo)系統(tǒng)暮刃,是從(0,0)到(1,1)繪制的矩形,CAGradientLayer的frame不為正方形的話爆土,坐標(biāo)系統(tǒng)就會被拉伸椭懊。還有兩個屬性,startPoint和endPoint的設(shè)置會影響顏色的繪制方向步势,即從上到下或者從左到右等氧猬,由坐標(biāo)系統(tǒng)決定。
畫圖還是那么差勁坏瘩,能看懂就好 - -
比如startPoint是(0,0) endPoint是(0,1)則顏色的繪制方向由左到右盅抚。其他的類推。CAGradientLayer的多種顏色的分割由0->1的比例決定不由它的frame決定倔矾。
代碼部分
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
//初始化
self.gradientLayer = [CAGradientLayer layer];
self.gradientLayer.frame = CGRectMake(0, 0, 200, 200);
//laye的position和view的center一樣 居中屬性
self.gradientLayer.position = self.view.center;
//邊寬
self.gradientLayer.borderWidth = 1.f;
[self.view.layer addSublayer:self.gradientLayer];
//設(shè)置顏色
self.gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor];
//設(shè)置顏色漸變方向 (0,0)->(1,1)則45度方向 (0,0)->(1,0)上->下
self.gradientLayer.startPoint = CGPointMake(0, 0);
self.gradientLayer.endPoint = CGPointMake(0, 1);
//設(shè)置顏色分割點
self.gradientLayer.locations = @[@(0.25),@(0.5),@(0.75)];
由于代碼較多就不貼出來了妄均,有需要下載的可以去http://www.code4app.com/thread-10691-1-1.html
下面是實現(xiàn)色差動畫的效果
下面這些效果我都整理了 放在demo中了,可以去這里下載這里就不一一貼出來了哪自,注釋也寫的比較多丰包,很容易理解。
先放一張截圖的吧提陶。運行時的效果烫沙。因為視頻轉(zhuǎn)成gif后不知道為什么變成很差的效果匹层,可能是幀數(shù)吧隙笆。代碼中運行時還是很不錯的效果的锌蓄。。撑柔。有大神知道原因的告訴我一下感激不盡瘸爽。
色差實現(xiàn),先設(shè)定漸變方向铅忿,再設(shè)置2種以上的顏色一種是透明的剪决,另外一種就隨意了。如果沒有透明色檀训,就會掩蓋掉view柑潦,第三就是顏色分割點的值。注意:分割點的值和顏色的數(shù)量要匹配峻凫。
色差實現(xiàn)的效果
環(huán)形帶間隔的進度條實現(xiàn) 或者全部飽滿的也有渗鬼,在代碼中。
加載提示框
后續(xù)還會繼續(xù)更新一些其他的內(nèi)容荧琼,如果覺得對你有用請點個喜歡吧譬胎。謝謝。