(自己截了幾張圖? 隨便用PS做了幾張簡(jiǎn)單動(dòng)畫)
項(xiàng)目需求要做一個(gè)類似網(wǎng)易嚴(yán)選的上拉刷新動(dòng)畫（（下拉到一定角度的時(shí)候兩個(gè)小圓球分離 然后開始旋轉(zhuǎn) 上推的時(shí)候兩個(gè)小圓球緩慢重合起來））
實(shí)現(xiàn)原理
自定義UIView，然后添加兩個(gè)畫出兩個(gè)小圓球，分離動(dòng)畫用最簡(jiǎn)單的UIView動(dòng)畫就好了，動(dòng)起來是通過CAAnimation動(dòng)畫因?yàn)樯婕暗臇|西不是很難，下面就直接貼代碼了
代碼實(shí)現(xiàn)
先建個(gè)UIView 然后再添加兩個(gè)小圓球
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
```
因?yàn)槲乙龅氖窍吕瓌?dòng)畫（下拉到一定角度的時(shí)候兩個(gè)小圓球分離 然后開始旋轉(zhuǎn) 上推的時(shí)候兩個(gè)小圓球緩慢重合起來）我們項(xiàng)目上拉控件集成的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 - 實(shí)現(xiàn)父類的方法
- (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
// 根據(jù)狀態(tài)做事情
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];;
}
}
//分離動(dòng)畫
-(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) {
}];
}
//重合動(dòng)畫
-(void)stop{
stats=5;
[UIView animateWithDuration:0.5 // 動(dòng)畫時(shí)長(zhǎng)
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) {
// 動(dòng)畫完成后執(zhí)行
// 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);
}];
}
//動(dòng)畫開始
-(void)oneYuanDian{
//? ? //位移動(dòng)畫
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;
//組動(dòng)畫
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{
//? ? //位移動(dòng)畫
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;
//組動(dòng)畫
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;
}
//重合動(dòng)畫
-(void)stopppp{
stats=5;
[UIView animateWithDuration:0.5 // 動(dòng)畫時(shí)長(zhǎng)
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) {
// 動(dòng)畫完成后執(zhí)行
// 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? 上傳了個(gè)? https://github.com/gjjggg/WYLQMJRefresh.git
