說個故事: UI設計對大家說:“我們拒絕炒現飯!"。 然后就加了一波特效。 程序員猝。
#####效果分析: 1.水波動畫。 2.背景顏色漸變。
CGMutablePathRef
和三角函數畫出波浪線,讓后利用CADisplayLink
將內容實時更新到屏幕上。 2.背景顏色漸變,利用漸變層CAGradientLayer
將背景顏色由到深漸變,然后在利用定時器加三角函數實時變動起點和終點的顏色。
#####代碼邏輯: 代碼直接看demo吧DCGradientView 背景顏色漸變的核心代碼如下:
#####關于顏色漸變嘗試過的代碼:
if (self.gradLayer == nil) {self.gradLayer = [CAGradientLayer layer];self.gradLayer.frame = self.bounds;}self.gradLayer.startPoint = CGPointMake(0, 0.8);self.gradLayer.endPoint = CGPointMake(1, 0.2);//create colors, important sectionNSMutableArray *colors = [NSMutableArray array];for (NSInteger deg = 0; deg <= 360; deg += 1) {UIColor *color;color = [UIColor colorWithHue:1.0 * deg / 360.0saturation:1.0brightness:1.0alpha:1.0];[colors addObject:(id)[color CGColor]];}[self.gradLayer setColors:[NSArray arrayWithArray:colors]];
復制代碼
效果如下:
還嘗試利用公式計算RGB。 Gradient = A + (B-A) / Step * N
每個RGB都要利用這個公式計算,A是開始值,B是結束值,Step分成的總份數,N是當前的份數。
NSMutableArray *colors = [NSMutableArray array];for (int i = 1; i<17; i ++) {float r = 37 + (13-37)/16*i;float g = 191 + (150-191)/16*i;float b = 191 + (173-191)/16*i;UIColor *color = [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1];[colors addObject:(id)[color CGColor]];}for (int i = 1; i<17; i ++) {float r2 = 13 + (37-13)/16*i;float g2 = 150 + (191-150)/16*i;float b2 = 173 + (191-173)/16*i;UIColor *color2 = [UIColor colorWithRed:r2/255.0 green:g2/255.0 blue:b2/255.0 alpha:1];[colors addObject:(id)[color2 CGColor]];}復制代碼
顏色由淺到深,再由深到淺逐漸變化,所以對稱著添加了一遍。這實現的效果跟最終效果很接近,但是仔細看會發現,顏色會有一條條的感覺,顏色分布不是很細膩。所以也放棄。
DCGradientView
怎么覺得代碼清楚得連注釋都不用寫-_-``
轉載請注明出處 ? XDChang