利用CAGradientLayer自定义颜色渐变view

说个故事：
UI设计对大家说:“我们拒绝炒现饭!"。
然后就加了一波特效。
程序员猝。

效果分析：

1.水波动画。
2.背景颜色渐变。

需求我就看到两个字：渐变

实现思路：

1.水波动画，用CGMutablePathRef和三角函数画出波浪线，让后利用CADisplayLink将内容实时更新到屏幕上。

2.背景颜色渐变，利用渐变层CAGradientLayer将背景颜色由到深渐变，然后在利用定时器加三角函数实时变动起点和终点的颜色。

DCGradientView.gif

代码逻辑：

代码直接看demo吧DCGradientView
背景颜色渐变的核心代码如下：

利用定时器实时改变颜色RGB

关于颜色渐变尝试过的代码：

 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循环里面的区间值，从而达到某一颜色渐变的效果。但是选取的颜色始终达不到设计的要求，所以放弃。

还尝试利用公式计算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#

怎么觉得代码清楚得连注释都不用写-_-``

转载请注明出处

最后编辑于：2017.12.07 01:26:40