iOS 阅读器功能小记——自动阅读

一言不合先上效果:

自动阅读GIF.gif

效果分析：

穿透效果：上层view局部变为透明，显示下层view。并非发生大小或位置上的改变。

实现思路：

直接上代码：我是在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];
    //创建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只关注具体的形状路径，和本身的颜色无关，所以扫描的阴影样式我使用图片来实现。

- (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];
}

小结：

我是通过水波动画的实现想到这样实现的，通过CADisplayLink修改shapeLayer的path从而实现view的局部透明效果。可能我的方案不是最佳方案，如果大家有更好的方案可以留言给我，一起学习，谢谢。

补充：

看到评论区很多朋友问我有没有demo，所以我做了一个简单的demo放在GitHub上。希望用到觉得可以的朋友给我点个star或喜欢。谢谢大家。
下载地址：https://github.com/rabbitmouse/ZQAutoReadBookDemo