一言不合先上效果:
自动阅读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
