MaskAnimation动画

demo地址

Mask基本知识

在UIView中有一个maskView属性，我们可以利用这个属性很方便的做出一些有意思的效果

这个属性在iOS8之后开始使用，用来表示视图的遮罩。

注意：

• maskView的颜色不显示，最终效果图怎么显示只跟maskView每个point的alpha相关。
• 当一个view设置了maskView后，那么它只会显示与maskView重叠部分，即在此图中只会显示maskView部分(maskView跟view没有层次，可以理解maskView嵌在View里)

可以这样理解，是将maskView每个point的alpha赋值给View的重叠部分相对应的point，这样view的重叠每个point都有个alpha值了，view重叠部分就可能显示多种透明色。

1.图片过度效果

图片过度
用到的知识有maskview
CAGradientLayer
CABasicAnimation

1.1思路

左边layer
右边layer

1. 在同一个位置添加两张图片
2. 然后将上面的maskview上添加左右两倍各一个遮罩层，设置这两个遮罩层的颜色为clearColor，遮罩层的高度设置成图片高度的两倍，宽度为图片的一半
3. 左边的子maskview上利用CAGradientLayer添加一层效果如图左边layer的子layer
4. 右边的子maskview上利用CAGradientLayer添加一层效果如图右边layer的子layer
5. 添加隐式动画

核心代码

  UIImageView *baseGround = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
    baseGround.image        = [UIImage imageNamed:@"1"];
    baseGround.center       = self.view.center;
    [self.view addSubview: baseGround];
    
    UIImageView *upGround = [[UIImageView alloc] initWithFrame:baseGround.frame];
    upGround.image        = [UIImage imageNamed:@"2"];
    [self.view addSubview:upGround];
    
    //添加遮罩
    UIView *mask      = [[UIView alloc] initWithFrame:upGround.bounds];
    upGround.maskView = mask;
    
    //左边
    UIView *leftMask = [[UIView alloc] init];
    leftMask.frame =CGRectMake(0, 0, 100, 400); //高度是整个view的两倍，让透明的在下面
    leftMask.backgroundColor = [UIColor clearColor];
    //利用 CAGradientLayer添加透明度 上面一半透明度1 下面一半从1渐变到0
    CAGradientLayer *layer =  [CAGradientLayer layer];
    layer.colors = @[ (__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:1].CGColor,
                             (__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:1].CGColor,
                             (__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5].CGColor,
                             (__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:0].CGColor,                             ];
    layer.locations =  @[@(0.0), @(0.5), @(0.66),@(0.84)];
    layer.frame = leftMask.bounds;
    [leftMask.layer addSublayer:layer];
//
    UIView *rightMask = [[UIView alloc] init];
    rightMask.frame = CGRectMake(100, -200, 100, 400); //高度是整个view的两倍，让透明的在上面面
    rightMask.backgroundColor = [UIColor clearColor];
//利用 CAGradientLayer添加透明度 上面一半透明度1 下面一半从0渐变到1 ，让透明的在下面
    CAGradientLayer *layer1 =  [CAGradientLayer layer];
    layer1.colors = @[
                     (__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:0].CGColor,
                     (__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5].CGColor,
                     (__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:1].CGColor,
                      (__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:1].CGColor,];
    layer1.locations =  @[@(0),@(0.16), @(0.32), @(0.5)];
    layer1.frame = leftMask.bounds;
    [rightMask.layer addSublayer:layer1];
    
    [mask addSubview:leftMask];
    [mask addSubview:rightMask];

    //animaition
    
    CABasicAnimation *rightanimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
    rightanimation.duration = 3;
    rightanimation.beginTime = CACurrentMediaTime() + 2;
    rightanimation.fromValue =  @(rightMask.center.y);
    rightanimation.toValue  =  @(rightMask.center.y + 400);
    rightanimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    rightanimation.autoreverses = YES;
    rightanimation.repeatCount = HUGE_VALF;
    rightanimation.repeatCount = HUGE_VALF;
    [rightMask.layer addAnimation:rightanimation forKey:@"position"];
    
    CABasicAnimation *leftanimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
    leftanimation.duration = 3;
    leftanimation.beginTime = CACurrentMediaTime() + 2;
    leftanimation.fromValue =  @(leftMask.center.y);
    leftanimation.toValue  =  @(leftMask.center.y - 400);
    leftanimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    leftanimation.autoreverses = YES;
    leftanimation.repeatCount = HUGE_VALF;
    leftanimation.repeatCount = HUGE_VALF;
   [leftMask.layer addAnimation:leftanimation forKey:@"position"];