仿朋友圈下拉刷新动画（基础动画）

示意图：

2.0.gif

demo地址： 仿朋友圈下拉刷新动画

动画的起源源于好奇

因为刚开是学动画，恨不得把所有的都实现一遍，试了一下微信朋友圈的下拉刷新动画。
如果ViewController的第一个子视图为UIScrollview的子类，系统会默认有个偏移量 ，如果不想这样可以设置
self.automaticallyAdjustsScrollViewInsets = NO;
下面所有的Navbar 都是默认透明的，设置为不透明就需要处理下。

• 首先我们需要自定义一个headerView，但是不要设置self.layer.masksToBounds = Yes ,这样超出的部分都会被剪掉。
  header 的组成部分：

{
    UIImageView *_backgroundImageView; 
    UIImageView *_iconView;
    UILabel *_nameLabel;
}

因为要做成微信朋友圈的效果我们需要这样处理

//背景图 y 设置为 负的。
_backgroundImageView.frame = CGRectMake(0, -60, KWidth, CGRectGetHeight(self.frame)+60);
  
    _iconView.frame = CGRectMake(KWidth - 70 -15, CGRectGetHeight(self.frame)-40, 70, 70);
   
    _nameLabel.frame = CGRectMake(KWidth - 70 -15 -20-200, CGRectGetHeight(self.frame)-20-10, 200, 20);

• 接下来处理下拉刷新的部分
  tableview是Viewcontroller的第一个子视图，所以默认的Contentoffset.y为-64，我们需要的就是在下拉刷新的时候给headerview添加动画。
  可以将监听contentoffset抽取出来，减少Viewcontroller的冗杂。

1. 自定义一个view，给其一些属性：

#import 
typedef enum {
    LXWXRefreshViewStateNormal,
    LXWXRefreshViewStateWillRefresh,
    LXWXRefreshViewStateRefreshing,
} LXWXRefreshViewState;

@interface LX_RefreshView : UIView 


+ (instancetype)refreshHeaderWithCenter:(CGPoint)center;

//传入我们需要的处理下拉刷新的UIscrollview的子类
@property(nonatomic,strong)UIScrollView *scrollView;
//刷新ing的回调，用来处理数据
@property (nonatomic, copy) void(^refreshingBlock)();

@property (nonatomic, assign) LXWXRefreshViewState refreshState;
//结束刷新，回到主线程刷新tableview
- (void)endRefreshing;

2 .m文件中的处理

- (void)setupView
{
    self.backgroundColor = [UIColor clearColor];
    //动态添加到 headerview上，做动画处理
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AlbumReflashIcon"]];
    self.bounds = imageView.bounds;
    [self addSubview:imageView];
    
 //刷新时请求数据等待动画
    _rotateAnimation = [[CABasicAnimation alloc] init];
    _rotateAnimation.keyPath = @"transform.rotation.z";
    _rotateAnimation.fromValue = @0;
    _rotateAnimation.toValue = @(M_PI * 2);
    _rotateAnimation.duration = 1.0;
    _rotateAnimation.repeatCount = MAXFLOAT;
    
}

将viewcontroller中监听contentoffset属性迁移到这里，在设置属性的时候开始监听

- (void)setScrollView:(UIScrollView *)scrollView
{
    _scrollView = scrollView;
    

    [scrollView addObserver:self forKeyPath:ObserveKeyPath options:NSKeyValueObservingOptionNew context:nil];
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
   
    if (keyPath != ObserveKeyPath) return;
    
    [self updateRefreshHeaderWithOffsetY:self.scrollView.contentOffset.y];
}

在更新contentoffset.y 的时候做一些判断，处理旋转角度，可以自己调整。在拖拽以及停止拖拽的时候判断刷新状态，进而进行不同的动画处理。

- (void)updateRefreshHeaderWithOffsetY:(CGFloat)y
{
   
    CGFloat rotateValue = y / 47.0 * M_PI;
   
    if (y < contentOffetY) {
        y = contentOffetY;
               if (self.scrollView.isDragging && self.refreshState != LXWXRefreshViewStateWillRefresh) {
            self.refreshState = LXWXRefreshViewStateWillRefresh;
            
        } else if (!self.scrollView.isDragging && self.refreshState == LXWXRefreshViewStateWillRefresh) {
            
            self.refreshState = LXWXRefreshViewStateRefreshing;
        }    }
    
    if (self.refreshState == LXWXRefreshViewStateRefreshing) return;
    
    CGAffineTransform transform = CGAffineTransformIdentity;
//这里处理纵向偏移是因为 tableview为第一个子视图，我们需要设向下偏移，所以取负值。否则是看不到这个视图的。
    transform = CGAffineTransformTranslate(transform, 0, -y);
    transform = CGAffineTransformRotate(transform, rotateValue);
    
    self.transform = transform;
    
}

对不同刷新状态的处理 在刷新完成时我们需要再做一个动画，使其纵向消失，然后在动画完成后移除。

- (void)setRefreshState:(LXWXRefreshViewState)refreshState
{
    _refreshState =  refreshState;

    if (refreshState  == LXWXRefreshViewStateWillRefresh) {
        
        self.hidden = NO;
    }
    if (refreshState == LXWXRefreshViewStateRefreshing) {
        if (self.refreshingBlock) {
            self.refreshingBlock();
        }
        
        [self.layer addAnimation:_rotateAnimation forKey:AnimationKey];
    } else if (refreshState == LXWXRefreshViewStateNormal) {
        
        [self.layer removeAnimationForKey:AnimationKey];
        self.transform = CGAffineTransformIdentity;
        CABasicAnimation *basic =[CABasicAnimation animation];
        basic.keyPath = @"position";
        basic.fromValue =[NSValue valueWithCGPoint:self.center];
        basic.toValue = [NSValue valueWithCGPoint:CGPointMake(self.center.x, -self.center.y)];
        basic.duration = 0.5;
        basic.delegate = self;
        [self.layer addAnimation:basic forKey:PositionKey];
    }
}
-(void)animationDidStop:(CABasicAnimation *)anim finished:(BOOL)flag
{
    if ([anim.keyPath isEqualToString:PositionKey]) {
        [self.layer removeAnimationForKey:PositionKey];
        self.hidden = YES;
    }
}

刷新view 封装完成，接下来 我们在Viewcontroller中引用下即可