一言不合先上效果:

自動閱讀GIF.gif

效果分析：

穿透效果：上層view局部變?yōu)橥该?，顯示下層view。并非發(fā)生大小或位置上的改變。

實現(xiàn)思路：

直接上代碼：我是在superController（閱讀界面控制器）上添加一個子控制器視圖childController，以下代碼為childController中代碼。

@property (nonatomic, strong) CADisplayLink *link;//幀定時器
@property (nonatomic, strong) CAShapeLayer  *shapeLayer;
@property (nonatomic, strong) UIImageView  *backImage;
@property (nonatomic, strong) UIImageView  *shadowImage;

@property (nonatomic, assign) CGFloat topY;
@property (nonatomic, assign) CGFloat speed;

@property (nonatomic, assign) BOOL isPaused;

- (void)viewDidLoad {
    [super viewDidLoad];
    
    _backImage = [[UIImageView alloc] initWithFrame:self.view.frame];
    [self.view addSubview:_backImage];
    //創(chuàng)建mask需要的形狀
    _shapeLayer = [CAShapeLayer layer];
    _backImage.layer.mask = _shapeLayer;
    //陰影效果需要的圖片
    _shadowImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 5)];
    _shadowImage.image = [UIImage imageNamed:[self.dk_manager.themeVersion isEqualToString:DKThemeVersionNight] ? @"shadow_line_night":@"shadow_line_dawn"];
    [self.view addSubview:_shadowImage];
    //添加點擊手勢，暫停動畫
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTap)];
    [self.view addGestureRecognizer:tap];
}

- (void)updateWithView:(UIImage *)image {
    _shapeLayer.path = [UIBezierPath bezierPathWithRect:self.view.frame].CGPath;
    self.backImage.image = image;
}

這里說明一下，backImage顯示的是superController的view，通過截屏的方式生成image。下面是截屏的代碼。

- (UIImage *)captureView:(UIView *)view {
    CGRect rect = view.bounds;
    UIGraphicsBeginImageContextWithOptions(rect.size, YES, 0.0f);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [view.layer renderInContext:context];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

開始做動畫：

需要注意的是mask只關注具體的形狀路徑，和本身的顏色無關，所以掃描的陰影樣式我使用圖片來實現(xiàn)。

- (void)startAuto {
    if (_link == nil) {
        // 啟動定時調用
        _link = [CADisplayLink displayLinkWithTarget:self selector:@selector(getCurrent:)];
        [_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
    }
}

-(void)getCurrent:(CADisplayLink *)displayLink{
    self.isRunning = YES;
    if(_topY >= self.view.frame.size.height) {
        _topY = 0;
        self.shadowImage.center = CGPointMake(self.view.center.x, self.shadowImage.bounds.size.height/2);
        
        [_link invalidate];
        _link = nil;
        
        [_delegate finishReadPage:self];
        return;
    }
    _topY += _speed;
    [self setCurrentShadowLayer];
    [self setCurrentMaskLayer];
}

- (void)setCurrentMaskLayer {
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, nil, 0, _topY);
    CGPathAddLineToPoint(path, nil, self.view.frame.size.width, _topY);
    CGPathAddLineToPoint(path, nil, self.view.frame.size.width, self.view.frame.size.height);
    CGPathAddLineToPoint(path, nil, 0, self.view.frame.size.height);
    CGPathCloseSubpath(path);
    
    _shapeLayer.path = path;
    CGPathRelease(path);
}

- (void)setCurrentShadowLayer {
    [UIView animateWithDuration:0.1 animations:^{
        CGPoint pos = self.shadowImage.center;
        pos.y += _speed;
        self.shadowImage.center = pos;
    }];
}

控制暫停

- (void)singleTap {
    _isPaused ^= 1;
    [_link setPaused:_isPaused];
}

小結：

我是通過水波動畫的實現(xiàn)想到這樣實現(xiàn)的，通過CADisplayLink修改shapeLayer的path從而實現(xiàn)view的局部透明效果。可能我的方案不是最佳方案，如果大家有更好的方案可以留言給我，一起學習，謝謝。

補充：

看到評論區(qū)很多朋友問我有沒有demo，所以我做了一個簡單的demo放在GitHub上。希望用到覺得可以的朋友給我點個star或喜歡。謝謝大家。
下載地址：https://github.com/rabbitmouse/ZQAutoReadBookDemo