說個故事：
UI設(shè)計對大家說:“我們拒絕炒現(xiàn)飯!"。
然后就加了一波特效。
程序員猝。

效果分析：

1.水波動畫。
2.背景顏色漸變。

需求我就看到兩個字：漸變

實現(xiàn)思路：

1.水波動畫，用CGMutablePathRef和三角函數(shù)畫出波浪線，讓后利用CADisplayLink將內(nèi)容實時更新到屏幕上。

2.背景顏色漸變，利用漸變層CAGradientLayer將背景顏色由到深漸變，然后在利用定時器加三角函數(shù)實時變動起點和終點的顏色。

DCGradientView.gif

代碼邏輯：

代碼直接看demo吧DCGradientView
背景顏色漸變的核心代碼如下：

利用定時器實時改變顏色RGB

關(guān)于顏色漸變嘗試過的代碼：

 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 section
    NSMutableArray *colors = [NSMutableArray array];
    for (NSInteger deg = 0; deg <= 360; deg += 1) {
        
        UIColor *color;
        color = [UIColor colorWithHue:1.0 * deg / 360.0
                           saturation:1.0
                           brightness:1.0
                                alpha:1.0];
        [colors addObject:(id)[color CGColor]];
    }
    [self.gradLayer setColors:[NSArray arrayWithArray:colors]];

效果如下：

DCGradientView1.gif

可以通過改變for循環(huán)里面的區(qū)間值，從而達到某一顏色漸變的效果。但是選取的顏色始終達不到設(shè)計的要求，所以放棄。

還嘗試?yán)霉接嬎鉘GB。
Gradient = A + (B-A) / Step * N每個RGB都要利用這個公式計算，A是開始值，B是結(jié)束值，Step分成的總份數(shù)，N是當(dāng)前的份數(shù)。

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]];

    }

顏色由淺到深，再由深到淺逐漸變化，所以對稱著添加了一遍。這實現(xiàn)的效果跟最終效果很接近，但是仔細(xì)看會發(fā)現(xiàn)，顏色會有一條條的感覺，顏色分布不是很細(xì)膩。所以也放棄。

DCGradientView#

怎么覺得代碼清楚得連注釋都不用寫-_-``

轉(zhuǎn)載請注明出處