先上完整的效果圖,??Gif效果太差將就看看:

效果圖
主要是利用
CAShapeLayer和UIBezierPath,CAEmitterLayer來實現(xiàn),應為本次重點做的是動畫效果
為了節(jié)省時間,下拉刷新邏輯就借用了MJRefresh
自定義一個類繼承MJRefreshHeader支持修改顏色和閑置狀態(tài)的動畫。
默認給了一個??,大家可以發(fā)揮想象。
@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];
});
}
說一下七彩泡泡的實現(xiàn)效果吧,其實也很簡單利用
CAEmitterLayer發(fā)射器實現(xiàn)
- (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上 。 屬性有點多具體含義參考這里

泡泡發(fā)射器
支持自定義閑置動畫

自定義path
Demo代碼已經(jīng)上傳到GitHub 傳送門