最近看到很多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:^{// 增加滚动区域topUIEdgeInsets 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:^{// 恢复滚动区域topUIEdgeInsets 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一下，谢谢~?
