所闻所获4：下拉刷新控件2

　　在上一篇博文讨论了下拉刷新控件的框架，这一篇博文将会主要讨论刷新过程中控件的动画效果。

1、首先回顾一下在GMPullToRefresh类中的初始化方法：

- (id)initWithScrollView:(UIScrollView *)scrollView {
//初始化
...
 
//定制提示文字
...
 
//矩形上升动画图
self.activityView=[self activityIndicatorView];
 
//圆圈转动动画
self.circleView=[[CircleProgessView alloc] initWithFrame:CGRectMake(self.titleLabel.frame.origin.x-30-5, self.bounds.size.height*0.5-15, 30, 30)];
[self addSubview:self.circleView];
 
//指定state
...
 
return self;
}

　　其中分别有两个动画，一个是矩形上升动画，一个是圆形转圈动画。先来看看矩形上升动画，这个动画的基本原理是这样的：它放置了两张图片，蓝色图片在后、白色图片在前，动画的过程就是让白色图片的高度变小，让它从下往上地缩小，造成蓝色图片从下往上上升的效果。它的设置方法如下：

- (GMActivityView *)activityIndicatorView {
    if(!_activityView) {
        _activityView = [[GMActivityView alloc] initWithFrame:CGRectMake(self.titleLabel.frame.origin.x-30, self.bounds.size.height*0.5-10, 20, 20)];
        _activityView.hidesWhenStopped = NO;
        [self addSubview:_activityView];
    }
    return _activityView;
}

　　可以看到，这是实例化了一个GMActivityView类的对象。

2、在GMActivityView类中的初始化方法如下：

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self configSubViews];
    }
    return self;
}
 
- (void)configSubViews {
    //用一张白色的图片先挡在蓝色图片上面
    self.frontView=[[UIView alloc] initWithFrame:self.bounds];
    UIImageView *fImage=[[UIImageView alloc] initWithFrame:self.frontView.bounds];;
    fImage.image=[UIImage imageNamed:FRONT_IMAGE];
    [self.frontView addSubview:fImage];
    self.frontView.backgroundColor=[UIColor clearColor];
    self.frontView.clipsToBounds=YES;
   
    //蓝色图片放后面
    self.backView=[[UIView alloc] initWithFrame:self.bounds];
    UIImageView *bImage=[[UIImageView alloc] initWithFrame:self.backView.bounds];;
    bImage.image=[UIImage imageNamed:BACK_IMAGE];
    [self.backView addSubview:bImage];
    self.backView.backgroundColor=[UIColor clearColor];
    self.backView.clipsToBounds=YES;
   
    [self addSubview:self.backView];
    [self addSubview:self.frontView];
}

 

3、那么就初始化好了这个页面，在上一篇博文中已经提到，在scrollView拖动的过程中，会不断调用到GMPullToRefresh类的scrollViewDidScroll:方法，并且将scrollView实时的contentOffset传进来。而在scrollViewDidScroll:方法中，会不断根据实时的contentOffset判断控件应处的state，如有需要就调用setState:方法修改控件的state。我们通过这两个方法来解析矩形的所有动画效果：

(1)、scrollViewDidScroll:方法，它除了根据实时的contentOffset修改state之外，还有一部分代码是用来根据contentOffset和state去定制不同的动画：

- (void)scrollViewDidScroll:(CGPoint)contentOffset {
    //根据实时的contentOffset设置state
    ...
   
    if (self.state==GMPullToRefreshStateHidden||self.state==GMPullToRefreshStateVisible) {
        //取绝对值
        float moveY = fabs(self.scrollView.contentOffset.y);
        if (moveY > kFrameHeight)
            moveY = kFrameHeight;
        //根据拖动距离和触发距离的比例，来定制圆弧的长度
        ...
        //根据拖动距离和触发距离的比例，来定制矩形的高度
        [self.activityView drawViewWithProgress:(moveY/kFrameHeight)];
       
    } else if (self.state==GMPullToRefreshStateTriggered) {
        ...
    }
}

　　在上面的方法中，使用了drawViewWithProgress:方法，这个方法是根据拖动距离和触发距离的比例来定制矩形高度的。效果就是，在拖动到触发之前，矩形会随着拖动这个动作上升，它的代码如下：

- (void)drawViewWithProgress:(CGFloat)progress{
    if (progress>1) {
        progress=1;
    }
    if (progress<0) {
        progress=0;
    }
   
    CGRect frontViewFrame = self.frontView.frame;
    CGFloat frontViewHeight = self.frame.size.height*(1-progress);
    [self.frontView setFrame:CGRectMake(frontViewFrame.origin.x, frontViewFrame.origin.y, frontViewFrame.size.width, frontViewHeight)];
}

 

(2)、setState:方法，这个方法在设定state之后，就会根据不同的state去定制动画了。这个方法中关于动画的代码如下：

- (void)setState:(GMPullToRefreshState)newState {
    _state = newState;
    switch (newState) {
        case GMPullToRefreshStateHidden:
            ...
            [self.activityView stopAnimation];
            self.activityView.isFull = NO;
            ...
            break;
           
        case GMPullToRefreshStateVisible:
            ...
            [self.activityView stopAnimation];
            self.activityView.isFull = NO;
            break;
           
        case GMPullToRefreshStateTriggered:
            ...
            self.activityView.isFull = YES;
            break;
           
        case GMPullToRefreshStateLoading:
            ...
            [self.activityView startAnimation];
            ...
            break;
    }
}

　　其中总共调用到了GMActivityView 类的3个方法：startAnimation、isFull和stopAnimation。这3个方法就是矩形图形的所有动画效果了，它们的代码如下：

- (void)startAnimation {
    __weak GMActivityView *weakSelf = self;
    self.hidden = NO;
    self.isFull = NO;
    self.isStop = NO;
    CGRect rect = self.bounds;
    rect.size.height = 0;
   
    [UIView animateWithDuration:SPEED_TIME delay:SPEED_DELAY options:UIViewAnimationOptionCurveLinear animations:^{
        //frontView白色图片从完全显示变化到高度为0，出现了蓝色图片高度增加的效果
        weakSelf.frontView.frame = rect;
    } completion:^(BOOL finished) {
        if (weakSelf.isStop) {
            return;
        }
        //不断循环
        [weakSelf startAnimation];
    }];
}
 
//这个方法指定的是白色图片的高度：当!isFull的时候，白色图片完全显示，蓝色图片看不见；当isFull的时候，白色图片不见，蓝色图片完全显示。
- (void)setIsFull:(BOOL)isFull {
    _isFull = isFull;
    if (!isFull) {
        self.frontView.frame = self.bounds;
    }else {

        CGRect rect = self.bounds;
        rect.size.height = 0;
        self.frontView.frame = rect;
    }
}
 
- (void)stopAnimation {
    self.isStop = YES;
    self.isFull = YES;
    if (self.hidesWhenStopped) {
        self.hidden = YES;
    }
}

　　这就是矩形图形的整个动画过程。

4、接下来看看转圈圆形的动画，首先回到1中的GMPullToRefresh类的初始化方法：

- (id)initWithScrollView:(UIScrollView *)scrollView {
//初始化
...
 
//定制提示文字
...
 
//矩形上升动画图
...
 
//圆圈转动动画
self.circleView=[[CircleProgessView alloc] initWithFrame:CGRectMake(self.titleLabel.frame.origin.x-30-5, self.bounds.size.height*0.5-15, 30, 30)];
[self addSubview:self.circleView];
 
//指定state
...
 
return self;
}

 

5、那么下一步就看看CircleProgessView类的初始化方法：

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
        progress = 0;
    }
    return self;
}

6、这样就把圆弧初始化好了，并指定了它圆弧的完整度为0。它的动画效果和矩形上升图类似，同样是在scrollViewDidScroll:方法中，不断根据实时的contentOffset判断控件应处的state，如有需要就调用setState:方法修改控件的state。同样地，我们通过这两个方法来解析矩形的所有动画效果：

(1)、scrollViewDidScroll:方法，这个方法中定制动画的代码中，关于圆弧的代码不只是转动的。当下拉距离未达到触发距离的过程中，圆弧的动画是从短变长的，在达到触发距离的时候圆弧刚好画完。这个时候如果继续往下拖动，圆弧会开始转动，根据拖动的速度和距离决定圆弧转动的速度和角度。如果放开手，圆弧进入自主转动的动画，这个效果定义在setState:方法里：

- (void)scrollViewDidScroll:(CGPoint)contentOffset {
    ...
   
    if (self.state==GMPullToRefreshStateHidden||self.state==GMPullToRefreshStateVisible) {
        //取绝对值
        float moveY = fabs(self.scrollView.contentOffset.y);
        if (moveY > kFrameHeight)
            moveY = kFrameHeight;
        //根据拖动距离和触发距离的比例，来定制圆弧的长度
        [self.circleView drawCircleWithProgress:(moveY-kFrameHeight*0.5) / (kFrameHeight*0.5)];
        //用同样的方法来定制方形的高度
        ...
       
    } else if (self.state==GMPullToRefreshStateTriggered) {
        [self.circleView drawCircleWithProgress:1.];
        //超过触发距离了，圆圈继续转
        float moveY=fabs(self.scrollView.contentOffset.y);
        self.circleView.transform = CGAffineTransformMakeRotation((moveY-kFrameHeight)/60*360*M_PI/180);
    }
}

　　可以看到，它引用了CircleProgessView类的drawCircleWithProgress：方法，方法内容如下：

-(void)drawCircleWithProgress:(CGFloat)mProgress{
    progress = mProgress;
    [self setNeedsDisplay];//这个方法会调用drawRect:方法
}
 
- (void)drawRect:(CGRect)rect {
    if (progress>1) {
        progress=1;
    }
    if (progress<0) {
        progress=0;
    }
    CGContextRef context = UIGraphicsGetCurrentContext();
   
    CGContextSetLineWidth(context, 1);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
    CGFloat startAngle = 0;
    CGFloat step = 11.4*M_PI/6 * progress;//弧线对应的角度
    CGContextAddArc(context, self.bounds.size.width/2, self.bounds.size.height/2, self.bounds.size.width/2-1, startAngle, startAngle+step, 0);
    //CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
    //x和y是原点位置
    //radius是半径
    //startAngle为0，即是以坐标原点为圆心时x轴的方向
    //endAngle为45*(M_PI/180)是往下方偏移45度
    //clockwise为0是顺时针画，为1是逆时针画
   
    CGContextStrokePath(context);
}

 

(2)、然后再来看看setState:方法，它会根据不同的state定制不同的动画：

- (void)setState:(GMPullToRefreshState)newState {
    _state = newState;
    switch (newState) {
        case GMPullToRefreshStateHidden:
            [self.circleView stopAnimation];
            ...
            break;
           
        case GMPullToRefreshStateVisible:
            ...
            [self.circleView stopAnimation];
            ...
            break;
           
        case GMPullToRefreshStateTriggered:
            ...
            self.circleView.transform = CGAffineTransformMakeRotation(0);
            ...
            break;
           
        case GMPullToRefreshStateLoading:
            ...
            self.circleView.transform = CGAffineTransformMakeRotation(0);
            [self.circleView startAnimation];
            ...
            break;
    }
}

　　主要调用到了startAnimation方法和stopAnimation方法，它们的代码如下：

-(void)startAnimation {
    [self drawCircleWithProgress:1];
   
    //绕z轴旋转
    CABasicAnimation* rotate =  [CABasicAnimation animationWithKeyPath: @"transform.rotation.z"];
    rotate.removedOnCompletion = FALSE;
    rotate.fillMode = kCAFillModeForwards;
    [rotate setToValue: [NSNumber numberWithFloat: M_PI / 2]];
    rotate.repeatCount = HUGE_VALF;
   
    rotate.duration = 0.25;
    rotate.cumulative = TRUE;
   
    //控制动画速度
    rotate.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    //kCAMediaTimingFunctionLinear 线性（匀速）|
    //kCAMediaTimingFunctionEaseIn 先慢|
    //kCAMediaTimingFunctionEaseOut 后慢|
    //kCAMediaTimingFunctionEaseInEaseOut 先慢 后慢 中间快|
    //kCAMediaTimingFunctionDefault 默认|
   
    [self.layer addAnimation:rotate forKey:@"rotateAnimation"];
}
 
-(void)stopAnimation{
    [self.layer removeAnimationForKey:@"rotateAnimation"];
}

　　至此完成了圆弧转圈的动画。