maskView与CAGradientLayer详解

#maskView基本原理
- png图片透明像素的原理
- maskView可类比于多张png图片的叠加遮罩,原理类似
- maskView是iOS8以上才有的,如果要考虑兼容低版本,用maskLayer替代


```
//使用maskView的情况
@property (nonatomic, strong)UIImageView *addImageView; //声明叠加图片View


self.addImageView = [[UIImageView alloc]initWithFrame:CGRectMake(50, 50, 200, 200)];
    [self.view addSubview:self.addImageView];
self.addImageView.image = [UIImage imageNamed:@"base"];//一张底图
UIImageView *mask = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
mask.image = [UIImage imageNamed:@"mask"];//一张png图片,左边黑色,渐变到右边白色
self.addImageView.maskView = mask;//生成了叠加在一起一边半透明的图片,左边黑色部分正常显示,右边渐变白色显示模糊到无


```
######注意:maskView并不能用addSubview来添加遮罩


#maskView配合CAGradientLayer的使用
- 用CAGradientLayer直接产生带透明像素通道的layer
- 用maskView直接加载带CAGradientLayer的view
- 可以通过对CAGradientLayer进行动画的操作实现动画效果


#####看实例代码
```
self.addImageView = [[UIImageView alloc]initWithFrame:CGRectMake(50, 450, 200, 200)];
    [self.view addSubview:self.addImageView];
    self.addImageView.image = [UIImage imageNamed:@"base"];//一张底图
    //创建出渐变的layer
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.addImageView.bounds;
    gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
                             (__bridge id)[UIColor blackColor].CGColor,
                             (__bridge id)[UIColor clearColor].CGColor];
    gradientLayer.locations = @[@(0.05),@(0.5),@(0.95)];
    //设置渐变方向
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 0);
    //容器view ->用于加载创建出的CAGradientLayer
    UIView *containerView = [[UIView alloc]initWithFrame:self.addImageView.bounds];
    [containerView.layer addSublayer:gradientLayer];
    //设定maskView
    self.addImageView.maskView = containerView;
    CGRect frame = containerView.frame;
    frame.origin.x -=200;
    containerView.frame = frame;
    //给maskView做动画效果
    [UIView animateWithDuration:3.f animations:^{
        //改变位移
        CGRect frame = containerView.frame;
        frame.origin.x += 400;
        //重新赋值
        containerView.frame = frame;
    }];


```
####我们不仅可以使用CAGradientLayer创建的蒙版,我们还可以对他进行动画效果的设置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值