Gradient effect using CAGradientLayer creates horizontal lines.. (effect not smoother)

Question

I want to give my video player a gradient effect at top and bottom of the view. I am using following way for it, but it does not give a smoother effect, i.e. it creates two white horizontal lines at both ending point of the drawing.

Actually, I have created a subclass of UIView that uses a CAGradientLayer as its layer. I have done it to make layer follow superview's orientation and it works fine. Check this answer for reference

Here is sub class of UIView called GradientView

GradientView.h

@interface GradientView : UIView

@property (nonatomic, strong, readonly) CAGradientLayer *layer;

@end

GradientView.m

@implementation GradientView

@dynamic layer;

+ (Class)layerClass {
    return [CAGradientLayer class];
}

@end

Instance:

IBOutlet GradientView *viewControls;

Use it:

-(void)applyGradientEffect
{
    UIColor *endColor     = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.90];
    UIColor *centerColor  = [UIColor clearColor];

    viewControls.layer.colors = [NSArray arrayWithObjects:
                                 (id)[endColor CGColor],
                                 (id)[centerColor CGColor],
                                 (id)[centerColor CGColor],
                                 (id)[endColor CGColor],
                                 nil];

    viewControls.layer.startPoint = CGPointMake(0.5, 1.0); 
    viewControls.layer.endPoint = CGPointMake(0.5, 0.0);  
}

I have also tried with locations property of CAGradientLayer instead of startPoint and endPoint properties, something like following code snippet. Still it is not smoother enough.

viewControls.layer.locations = [NSArray arrayWithObjects:
    [NSNumber numberWithFloat:0.0f],
    [NSNumber numberWithFloat:0.2],
    nil];

The gradient effect is smoother only if I use only 2 colors from bottom to top like following code. (It will create gradient effect at bottom edge only, I need such an effect at both top and bottom)

-(void)applyGradientEffect
{    
    UIColor *endColor     = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.90];
    UIColor *centerColor  = [UIColor clearColor];

    viewControls.layer.colors = [NSArray arrayWithObjects:
                                 (id)[endColor CGColor],
                                 (id)[centerColor CGColor],
                                 nil];

    viewControls.layer.startPoint = CGPointMake(0.5, 1.0); 
    viewControls.layer.endPoint = CGPointMake(0.5, 0.0);
}

What may be the reason? Is it default behavior in this case? Am I doing anything wrong with drawing?

I'm not an expert on gradients, but have you tried making the final part of the gradient longer? Right now, your fade is completely uniform. Either start with a lower initial alpha (like 0.5) and see if this helps? If so, then you know you need a longer 'y' length factor so that the last part of the fade has longer to fade to clear (less stark at the end). — thephatp, May 31 '16 at 13:22
Let's say you are applying a gradient over a height = 100 (let's say pixels to more easily describe), and say your gradient goes from alpha = 1.0 to alpha 0.0. This would create a gradient such that each each pixel has a decreased alpha of 0.01. However, if you went from alpha = 0.5 to 0.0 over the same 100 pixels, then each pixel would have a decreased alpha of 0.005, creating a "smoother" effect. So, try setting your starting gradient with alpha 0.5 instead of 0.9 and see if that makes the "horizontal line" effect go away (or be less prominent). If it does, you know you need a smoother grad. — thephatp, May 31 '16 at 14:10
Let me try it out..I remember that I have tried with 12-15 points rather than just 4 points mentioned in the code. Still, there was no benefit — NSPratik, May 31 '16 at 14:23

Gradient effect using CAGradientLayer creates horizontal lines.. (effect not smoother)

0 Answers0