先上完整的效果图,😆Gif效果太差将就看看:
效果图
主要是利用
CAShapeLayer
和UIBezierPath
,CAEmitterLayer
来实现,应为本次重点做的是动画效果
为了节省时间,下拉刷新逻辑就借用了MJRefresh
自定义一个类继承MJRefreshHeader
支持修改颜色和闲置状态的动画。
默认给了一个😄,大家可以发挥想象。
@interface ZTHeaderRefresh : MJRefreshHeader
@property (nonatomic, strong) UIBezierPath *path;
@property (nonatomic, strong) UIColor *tintColor;
@end
使用方法与
MJRefresh
相同
__weak typeof(self) weakSelf = self;
ZTHeaderRefresh *header = [ZTHeaderRefresh headerWithRefreshingBlock:^{
[weakSelf requsetData];
}];
header.tintColor = [UIColor orangeColor];
// UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 50, 40) cornerRadius:10];
// header.path = path;
self.tableView.mj_header = header;
- (void)requsetData {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self.tableView.mj_header endRefreshing];
});
}
说一下七彩泡泡的实现效果吧,其实也很简单利用
CAEmitterLayer
发射器实现
- (CAEmitterLayer *)refreshingLayer {
if (!_refreshingLayer) {
_refreshingLayer = [CAEmitterLayer layer];
_refreshingLayer.renderMode = kCAEmitterLayerAdditive;
_refreshingLayer.emitterShape = kCAEmitterLayerRectangle;
_refreshingLayer.emitterCells = @[[self getEmitterCell]];
}
return _refreshingLayer;
}
//cell
- (CAEmitterCell *)getEmitterCell
{
CAEmitterCell *cell = [[CAEmitterCell alloc] init];
CGFloat colorChangeValue = 1;
cell.blueRange = colorChangeValue;
cell.redRange = colorChangeValue;
cell.greenRange = colorChangeValue;
cell.birthRate = 5;
cell.speed = 5.f;
cell.velocity = -20.f;
cell.velocityRange = -40.f;
cell.yAcceleration = - 20.f;
cell.emissionRange = M_PI;
cell.contents = (__bridge id )([UIImage imageNamed:@"bubble"].CGImage);
cell.lifetime = 15;
cell.lifetimeRange = 20;
cell.scale = 0.1;
cell.scaleRange = 0.3;
return cell;
}
懒加载一个
CAEmitterLayer
配置好cell, bubble 是一个泡泡图片,添加到父View上 。 属性有点多具体含义参考这里
泡泡发射器
支持自定义闲置动画
自定义path
Demo代码已经上传到GitHub 传送门