背景颜色渐变重影

渐变重影

开发过程中，大多设置渐变色背景是不带透明度的，但是有些浅色背景下，设置黑色的透明度，然而在locations 分界处，由于系统渲染时带透明度会重叠：如：

    UIView *sview = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREENWIDTH, 180)];
    NSArray *colors = @[
                        (id)[UIColor sup_colorFromHex:0x000000 alpha:0] .CGColor,
                        (id)[UIColor sup_colorFromHex:0x000000 alpha:0.55].CGColor,
                        (id)[UIColor sup_colorFromHex:0x000000 alpha:0.65].CGColor,
                    ];
    [self setGradientView:sview bgVIew:self.view gradientColors: colors];
    [self.view addSubview:sview];

效果如图: 重叠部分带黑线

image.png

修正方法

如果将中间颜色透明度适当调整，那么效果会好很多，因此 渐变设置透明度在iOS系统需注意使用

    UIView *sview = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREENWIDTH, 180)];
    NSArray *colors = @[
                        (id)[UIColor sup_colorFromHex:0x000000 alpha:0] .CGColor,
                        (id)[UIColor sup_colorFromHex:0x000000 alpha:0.3].CGColor,
                        (id)[UIColor sup_colorFromHex:0x000000 alpha:0.55].CGColor,
                    ];
    [self setGradientView:sview bgVIew:self.view gradientColors: colors];
    [self.view addSubview:sview];

image.png

/// 设置背景色渐变方法
- (void)setGradientView:(UIView *)view  bgVIew:(UIView *)bgVIew
          gradientColors:(NSArray *)colors {
    CAGradientLayer* gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(0, SCREENHEIGHT-180 ,SCREENWIDTH, 180);
    gradientLayer.colors = colors;
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint =  CGPointMake(0, 1.0);
    gradientLayer.locations = @[@0.0,@0.5,@1.0];
    [bgVIew.layer addSublayer:gradientLayer];
    gradientLayer.mask = view.layer;
    gradientLayer.masksToBounds = YES;
    view.frame = gradientLayer.bounds;
}