maskView与CAGradientLayer详解

布满荆棘的人生 2021-09-14 14:38 344阅读 0赞

\#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创建的蒙版，我们还可以对他进行动画效果的设置