最近看到很多app下拉刷新的酷炫效果,图片伴随下拉高度逐帧变化的那种效果。查了很多资料,还是找不到这样的效果demo。。。不过也找到一个通过计算高度画线的线条动画来实现的demo,这个效果也是非常不错的
demo传送门
实现这种效果需要有比较复杂的画线算法,时间成本比较大。于是我自己思考实现了一种更简单的下拉动画效果,实现的总体思路和普通的下拉刷新差不多,先获取gif图所有帧,再在scrollViewDidScroll:回调里进行取帧逻辑。其中会用到ibireme大神的YYImage图像框架,用于gif取帧操作。
一些下拉刷新组件是通过KVO和手势结合来实现的,这样实现更适合组件化,比如MJRefresh。我这边为了图方便就直接通过scrollViewDidScroll:和scrollViewWillEndDragging:回调方法来实现了。核心方法见以下代码
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat y = scrollView.contentOffset.y;
NSLog(@"offsetY:%f",y);
CGFloat dis = head_h/self.imgArr.count;
int yy = abs((int)y);
//小于界限高度则计算图片索引,并显示相应图片
if (y < 0 && yy < head_h) {
//通过下拉高度获取图片索引
NSInteger index = yy/dis;
index = index >= self.imgArr.count ? self.imgArr.count - 1 : index;
NSLog(@"index:%ld",index);
[self.refreshImg stopAnimating];
self.refreshImg.currentAnimatedImageIndex = index;
}
}
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
CGFloat y = scrollView.contentOffset.y;
int yy = abs((int)y);
//大于等于界限高度则执行刷新
if (y < 0 && yy >= head_h) {
[self ll_beginRefresh];
}
}
//开始刷新
- (void)ll_beginRefresh
{
[UIView animateWithDuration:0.3 animations:^{
// 增加滚动区域top
UIEdgeInsets inset = self.tableView.contentInset;
inset.top = self->head_h;
self.tableView.contentInset = inset;
// 设置滚动位置
CGPoint offset = self.tableView.contentOffset;
offset.y = -self->head_h;
[self.tableView setContentOffset:offset animated:NO];
} completion:^(BOOL finished) {
//开始动画
[self.refreshImg startAnimating];
self->_pullHandler(self);
}];
}
//结束刷新
- (void)ll_endRefresh
{
[self.refreshImg startAnimating];
[UIView animateWithDuration:0.3 animations:^{
// 恢复滚动区域top
UIEdgeInsets inset = self.tableView.contentInset;
inset.top = 0;
self.tableView.contentInset = inset;
// 设置滚动位置
CGPoint offset = self.tableView.contentOffset;
offset.y = 0;
[self.tableView setContentOffset:offset animated:NO];
} completion:^(BOOL finished) {
//结束动画
[self.refreshImg stopAnimating];
}];
}
最后实现效果
最后附上整个demo源码,demo只是提供实现思路,还有很多细节能优化,觉得不错的话star一下,谢谢~?