Skip to content

Instantly share code, notes, and snippets.

@bimawa
Created July 25, 2013 09:12
Show Gist options
  • Save bimawa/6078100 to your computer and use it in GitHub Desktop.
Save bimawa/6078100 to your computer and use it in GitHub Desktop.
How to set gradient transparent mask for UIVIew.layer. its needs for create scroll fade animation effect.
- (void)viewDidLoad
{
[super viewDidLoad];
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Screen Shot 2013-07-23 at 5.29.05 PM.png"]];
UIView *viewWithMask = [[UIView alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 100)];
[viewWithMask setBackgroundColor:[UIColor greenColor]];
// Recreate gradient mask with new fade length
CAGradientLayer *gradientMask = [CAGradientLayer layer];
gradientMask.bounds = viewWithMask.layer.bounds;
gradientMask.position = CGPointMake(CGRectGetMidX(viewWithMask.bounds), CGRectGetMidY(viewWithMask.bounds));
gradientMask.shouldRasterize = YES;
gradientMask.rasterizationScale = [UIScreen mainScreen].scale;
gradientMask.startPoint = CGPointMake(0.0, CGRectGetMidY(viewWithMask.frame));
gradientMask.endPoint = CGPointMake(1.0, CGRectGetMidY(viewWithMask.frame));
// setup fade mask colors and location
id transparent = (id)[UIColor clearColor].CGColor;
id opaque = (id)[UIColor blackColor].CGColor;
gradientMask.colors = @[transparent, opaque, opaque, transparent];
// calcluate fade
CGFloat fadePoint = 50 / CGRectGetWidth(viewWithMask.bounds);
NSNumber *leftFadePoint = @(fadePoint);
NSNumber *rightFadePoint = @(1 - fadePoint);
// apply calculations to mask
gradientMask.locations = @[@0, leftFadePoint, rightFadePoint, @1];
viewWithMask.layer.mask = gradientMask;
[viewWithMask.layer setCornerRadius:50];
[viewWithMask.layer setMasksToBounds:NO];
[viewWithMask addSubview:imageView];
[self.view addSubview:viewWithMask];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment