html js微信朋友圈下拉刷新效果,仿朋友圈下拉刷新动画（基础动画）

示意图：

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的冗杂。

自定义一个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中引用下即可