CoreAnimation之maskLayer使用

demo 地址：MaskLayer使用

1.gif

因为初学动画的缘故，对mask 蒙版理解不是很到位。

demo中的三个例子效果其实都是有前景和背景图视图，mask只是加在前景视图上，在使用mask的时候，会直接覆盖掉被遮盖图层（如果frame 与被覆盖层相同的话），然后我们可以通过改变mask layer 的一些属性做一些动画。

首先看下 ❤️ 形的注水效果

1. 要实现这样的效果，我们需要准备两张图片，比如
背景：

心2.png

前景：

心.png

我们需要做的就是设置一个mask 蒙版加载前景视图上，

  
        self.maskLayer =[CAShapeLayer layer];
       //大小一样
        self.maskLayer.frame = self.imageView.bounds;
        CGPoint center  =  CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);
        UIBezierPath *path =[UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:0 endAngle:2 *M_PI clockwise:YES];
        self.maskLayer.path = path.CGPath;
        self.imageView.layer.mask =  self.maskLayer;

2. 实现注水效果的第二步，我们要实现那样的动态效果，视图中能看到的是蒙版与前景共同作用的效果。当我们把蒙版从 下方移动到上方，就可以可以实现。
首先在初始化maskLayer时需要设置maskLayer的位置

self.maskLayer.position =CGPointMake(self.bounds.size.width/2, self.bounds.size.height * 1.5);

然后做一个基础动画即可：

CABasicAnimation *animation =[CABasicAnimation animation];
    animation.keyPath = @"position";
    animation.duration = 2;
    animation.repeatCount = HUGE;
    animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(self.bounds.size.width/2, self.bounds.size.height * 1.5)]; //因为蒙版大小和前景图大小一样，我们需要把中心点向下移动一倍的高度
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2)];
    [self.maskLayer addAnimation:animation forKey:nil];
    self.maskLayer.position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height * 1.5);

这样基本上 一个简单的动画就实现了，如果想实现两个方向的 注水，可以添加两个subLayer作为蒙版

文字渐变

参考文章
也是使用了两个视图 加一个蒙版

@property(nonatomic,strong)UILabel *forelLabel;
@property(nonatomic,strong)UILabel *backLabel;
@property(nonatomic,strong)CAGradientLayer *maskLayer;

动画代码

-(void)setType:(GradientType)type
{
    _type = type;
    switch (type) {
        case fadeOne:
            self.maskLayer.colors = @[(id)[UIColor clearColor],(id)[UIColor redColor].CGColor,(id)[UIColor blackColor].CGColor,(id)[UIColor clearColor].CGColor];
            self.maskLayer.locations = @[@(0.01),@(0.1),@(0.9),@(0.99)];
            [self fadeString:(self.bounds.size.width)];
            break;
        case fadeTwo:
             self.maskLayer.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor redColor].CGColor,(id)[UIColor clearColor].CGColor];
             self.maskLayer.locations = @[@(0.25),@(0.5),@(0.75)];
             self.maskLayer.startPoint = CGPointMake(0, 0);
             self.maskLayer.endPoint = CGPointMake(1, 0);
           
             self.maskLayer.position = CGPointMake(-self.bounds.size.width/2.0, self.bounds.size.height/2.0);
           //默认中心点修改为左侧一半处。
            [self iphoneFade: (self.bounds.size.width+self.bounds.size.width/2.0)];
            break;
        default:
            break;
    }
}

-(void)fadeString:(CGFloat) toValue
{
    CABasicAnimation *basicAnimation = [CABasicAnimation animation];
    basicAnimation.keyPath = @"transform.translation.x";
    basicAnimation.fromValue = @(0);
    basicAnimation.toValue = @(toValue);
    basicAnimation.duration = 2;
    basicAnimation.repeatCount = HUGE;
    basicAnimation.removedOnCompletion = NO;
    basicAnimation.fillMode = kCAFillModeForwards;
    [self.maskLayer addAnimation:basicAnimation forKey:nil];

}
-(void)iphoneFade:(CGFloat) toValue
{
    CABasicAnimation *basicAnimation = [CABasicAnimation animation];
    basicAnimation.keyPath = @"transform.translation.x";
    basicAnimation.fromValue = @(0);
    basicAnimation.toValue = @(toValue);
    basicAnimation.duration = 2;
    basicAnimation.repeatCount = HUGE;
    basicAnimation.removedOnCompletion = NO;
    basicAnimation.fillMode = kCAFillModeForwards;
    [self.maskLayer addAnimation:basicAnimation forKey:nil];
}