美文网首页
关于 mask 蒙板

关于 mask 蒙板

作者: 居然是村长 | 来源:发表于2018-04-24 15:38 被阅读42次

[toc]

一句话理解:使用 mask 层的 alpha,替换原视图的 aplha
为了搞图片蒙板,还得用 ps 搞个图,结果 ps 的蒙板,其实是一个东西
技术这个东西,很多都是相通的,多学习

Layer Mask

image

普通

- (void)viewDidLoad {
    [super viewDidLoad];
    self.baseView.layer.mask = [self avatorMask:self.baseView];
}

- (CALayer *)avatorMask:(UIView *)baseView {
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = baseView.bounds;
    CGFloat w = baseView.bounds.size.width;
    CGFloat h = baseView.bounds.size.height;
    CGFloat radius = h > w ? w/2.0 : h/2.0;
    maskLayer.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(radius, radius) radius:radius startAngle:0 endAngle:2*M_PI clockwise:YES].CGPath;
    maskLayer.fillColor = [UIColor whiteColor].CGColor;
    
    return maskLayer;
}

渐变(alpha 渐变)

- (void)viewDidLoad {
    [super viewDidLoad];
    self.baseView.layer.mask = [self avatorMask:self.baseView];
}

- (CALayer *)gradientMask:(UIView *)baseView {
    CAGradientLayer *gradientLayer =  [CAGradientLayer layer];
    gradientLayer.frame = baseView.bounds;
    gradientLayer.colors = @[(__bridge id)[UIColor colorWithWhite:1 alpha:0.2].CGColor,
                            (__bridge id)[UIColor colorWithWhite:1 alpha:1].CGColor,
                             (__bridge id)[UIColor colorWithWhite:1 alpha:0.5].CGColor,
                            ];
    gradientLayer.locations = @[@(0.2), @(0.5), @(0.8)];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 1);
    gradientLayer.type = kCAGradientLayerAxial;

    return gradientLayer;
}

View Mask

iOS 8 新属性 maskView,使用起来还算方便吧,代码可以少写很多

image

普通图片(只用透明-非透明)

    UIImageView *maskView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"mask"]];
    maskView.frame = self.baseView.bounds;
    self.baseView.maskView = maskView;

渐变图片(alpha 渐变)

    UIImageView *maskView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"mask2"]];
    maskView2.frame = self.baseView2.bounds;
    self.baseView2.maskView = maskView2;

附录

demo 地址

相关文章

网友评论

      本文标题:关于 mask 蒙板

      本文链接:https://www.haomeiwen.com/subject/esejlftx.html