QQ空间广告图展示的动画效果

其实最近一直在写前端,昨天看到QQ空间有条广告图展示很有意思,今天抽空写了下~

GIF.gif

原理很简单啦, 两张重叠的图, 最上面一张使用mask属性再设置圆半径为0,这样就可以达到隐藏效果,然后 圆半径随着滚动逐渐变大,图也就显示出来了

核心代码也不多,我大概写一下:

我是在TableViewCell中去改变圆半径大小的

- (void)setRadius:(CGFloat)radius{
    
    [self.path removeAllPoints];
    
    [self.path addArcWithCenter:CGPointMake(60, 60) radius:radius startAngle:0.0 endAngle:180.0 clockwise:YES];
    
    self.pathLayer.path = self.path.CGPath;
    
    self.coverView.layer.mask = self.pathLayer;
}

具体代码可以参考我的demo,在列表中的"UISearchBarController"里,有问题可以留言讨论

GitHub欢迎Star