在iOS开发的道路上越走越远iOS Developer程序员

仿网易严选iOS下拉刷新动画(两个小圆球绕中心旋转)

2017-06-02  本文已影响204人  骑着猪的小哥哥
类似网易严选的上拉刷新动画(两个小圆球绕中心旋转)

(自己截了几张图  随便用PS做了几张简单动画)

项目需求要做一个类似网易严选的上拉刷新动画((下拉到一定角度的时候两个小圆球分离 然后开始旋转 上推的时候两个小圆球缓慢重合起来))

实现原理

自定义UIView,然后添加两个画出两个小圆球,分离动画用最简单的UIView动画就好了,动起来是通过CAAnimation动画因为涉及的东西不是很难,下面就直接贴代码了

代码实现

先建个UIView 然后再添加两个小圆球

LQHeaderView.h

```

#import

#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width

#define QUAN_Y 8

@interface LQHeaderView : UIView

@property (nonatomic , strong) UIView *leftView;

@property (nonatomic,strong) UIView * rightView;

-(void)viewwithwidth:(CGFloat)width;

@end

```


LQHeaderView.m

```

#import "LQHeaderView.h"

@interface LQHeaderView()

@end

@implementation LQHeaderView

-(void)viewwithwidth:(CGFloat)width{

CGFloat with =  width-12-10;

_leftView = [[UIView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/2, with,QUAN_Y,QUAN_Y)];

_leftView.backgroundColor = [UIColor redColor];

_leftView.layer.masksToBounds = YES;

_leftView.layer.cornerRadius =QUAN_Y/2;

[self  addSubview:_leftView];

_rightView = [[UIView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/2, with,QUAN_Y,QUAN_Y)];

_rightView.backgroundColor = [UIColor blueColor];

_rightView.layer.masksToBounds = YES;

_rightView.layer.cornerRadius =QUAN_Y/2;

[self  addSubview:_rightView];

}

@end

```

因为我要做的是下拉拉动画(下拉到一定角度的时候两个小圆球分离 然后开始旋转 上推的时候两个小圆球缓慢重合起来)我们项目上拉控件集成的MJRefresh 所以需要继承MJRefreshStateHeader

MJLQHeader.h

```

#import "MJRefreshStateHeader.h"

#import "LQHeaderView.h"

#define QUAN_Y 8

@interface MJLQHeader : MJRefreshStateHeader

@end

```

MJLQHeader

```

#import "MJLQHeader.h"

@interface MJLQHeader(){

LQHeaderView *_gifView;

CGFloat BGRefreshViewH;

CAAnimationGroup * groupTwoAnimation ;

CAAnimationGroup * groupOneAnimation ;

int stats;

}

@end

@implementation MJLQHeader

-(void)create{

self.mj_h = 30+5+5+5;

LQHeaderView *gifView = [[LQHeaderView alloc] init];

gifView.mj_x = 0;

gifView.mj_y = 0;

gifView.mj_w = self.mj_w;

gifView.mj_h = self.mj_h;

[self addSubview:_gifView = gifView];

[gifView viewwithwidth:self.mj_h];

BGRefreshViewH =  self.mj_h -12-10;

_gifView.contentMode = UIViewContentModeCenter;

}

#pragma mark - 实现父类的方法

- (void)prepare

{

[super prepare];

self.mj_h = 30+5+5+5;

[self create];

// 初始化间距

//    self.labelLeftInset = 20;

}

- (void)placeSubviews

{

[super placeSubviews];

}

- (void)setState:(MJRefreshState)state

{

MJRefreshCheckState

// 根据状态做事情

if(state == MJRefreshStatePulling){

[self fenli];

}else if(state == MJRefreshStateRefreshing){

[self oneYuanDian];

[self twoYuanDian];

}else if (state == MJRefreshStateIdle && stats!=102) {

[self stop];

}  else if (state == MJRefreshStateIdle && stats ==102) {

[self fenli];;

}

}

//分离动画

-(void)fenli

{

stats =5;

[UIView animateWithDuration:0.5

animations:^{

_gifView.leftView.frame = CGRectMake(SCREEN_WIDTH/2+9,BGRefreshViewH, QUAN_Y, QUAN_Y);

_gifView.rightView.frame = CGRectMake(SCREEN_WIDTH/2-9,BGRefreshViewH, QUAN_Y, QUAN_Y);

}

completion:^(BOOL finished) {

}];

}

//重合动画

-(void)stop{

stats=5;

[UIView animateWithDuration:0.5 // 动画时长

animations:^{

[_gifView.rightView.layer removeAllAnimations];

[_gifView.leftView.layer removeAllAnimations];

_gifView.leftView.frame = CGRectMake(SCREEN_WIDTH/2,BGRefreshViewH, QUAN_Y, QUAN_Y);

_gifView.rightView.frame = CGRectMake(SCREEN_WIDTH/2,BGRefreshViewH, QUAN_Y, QUAN_Y);

}

completion:^(BOOL finished) {

// 动画完成后执行

// code...https://git.coding.net/Super-Rabbit/ShunLianDemo.git

//                        [self oneYuanDian];

//                        [self twoYuanDian];

_gifView.leftView.frame = CGRectMake(SCREEN_WIDTH/2,BGRefreshViewH, QUAN_Y, QUAN_Y);

_gifView.rightView.frame = CGRectMake(SCREEN_WIDTH/2,BGRefreshViewH, QUAN_Y, QUAN_Y);

}];

}

//动画开始

-(void)oneYuanDian{

//    //位移动画

CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];

UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(SCREEN_WIDTH/2, BGRefreshViewH) radius:9 startAngle:0 endAngle:M_PI*2 clockwise:YES];

anima1.path = arcPath.CGPath;

//组动画

groupOneAnimation = [CAAnimationGroup animation];

groupOneAnimation.animations = [NSArray arrayWithObjects:anima1, nil];

groupOneAnimation.duration = 0.9f;

groupOneAnimation.repeatCount= HUGE_VALF;

[groupOneAnimation setRemovedOnCompletion:NO];

[_gifView.leftView.layer addAnimation:groupOneAnimation forKey:@"groupAnimation"];

}

-(void)twoYuanDian{

//    //位移动画

CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];

UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(SCREEN_WIDTH/2, BGRefreshViewH) radius:9 startAngle:M_PI endAngle:M_PI*3 clockwise:YES];

anima1.path = arcPath.CGPath;

//组动画

groupTwoAnimation = [CAAnimationGroup animation];

groupTwoAnimation.animations = [NSArray arrayWithObjects:anima1, nil];

groupTwoAnimation.duration = 0.9f;

groupTwoAnimation.repeatCount= HUGE_VALF;

[groupTwoAnimation setRemovedOnCompletion:NO];

[_gifView.rightView.layer addAnimation:groupTwoAnimation forKey:@"groupAnimation"];

}

- (void)setPullingPercent:(CGFloat)pullingPercent

{

[super setPullingPercent:pullingPercent];

NSLog(@"pullingPercent  %lf",pullingPercent);

NSString * string = [NSString stringWithFormat:@"%lf",pullingPercent];

if(pullingPercent>1.5 && stats==5 ){

[self oneYuanDian];

[self twoYuanDian];

stats=100;

}if([string isEqualToString:@"0.000000"]){

[self stopppp];

}

}

- (void)endRefreshing

{

[super endRefreshing];

stats =102;

}

//重合动画

-(void)stopppp{

stats=5;

[UIView animateWithDuration:0.5 // 动画时长

animations:^{

[_gifView.rightView.layer removeAllAnimations];

[_gifView.leftView.layer removeAllAnimations];

//                        _gifView.leftView.frame = CGRectMake(SCREEN_WIDTH/2,BGRefreshViewH, QUAN_Y, QUAN_Y);

//                        _gifView.rightView.frame = CGRectMake(SCREEN_WIDTH/2,BGRefreshViewH, QUAN_Y, QUAN_Y);

}

completion:^(BOOL finished) {

// 动画完成后执行

// code...https://git.coding.net/Super-Rabbit/ShunLianDemo.git

//                        [self oneYuanDian];

//                        [self twoYuanDian];

_gifView.leftView.frame = CGRectMake(SCREEN_WIDTH/2,BGRefreshViewH, QUAN_Y, QUAN_Y);

_gifView.rightView.frame = CGRectMake(SCREEN_WIDTH/2,BGRefreshViewH, QUAN_Y, QUAN_Y);

}];

}

@end

```

写的不是很清楚  git  上传了个  https://github.com/gjjggg/WYLQMJRefresh.git

上一篇下一篇

猜你喜欢

热点阅读