动画特效九：下拉刷新

至此，效果图例如以下：

4. 加入圆环转圈圈动画。

在initWithFrame:scrollView方法的底部加入例如以下代码：

- (void)addOvalShapeLayer {
    self.ovalShapeLayer = [CAShapeLayer layer];
    self.ovalShapeLayer.strokeColor = [UIColor whiteColor].CGColor;
    self.ovalShapeLayer.fillColor = [UIColor clearColor].CGColor;
    self.ovalShapeLayer.lineWidth = 4.0;
    self.ovalShapeLayer.lineDashPattern = @[@(2),@(3)];
    CGFloat refreshRadius = self.frame.size.height / 2 * 0.8;
    self.ovalShapeLayer.path = [UIBezierPath bezierPathWithOvalInRect:
                                CGRectMake(self.frame.size.width / 2 - refreshRadius, self.frame.size.height / 2 - refreshRadius, 2 * refreshRadius, 2 *refreshRadius)].CGPath;
    [self.layer addSublayer:self.ovalShapeLayer];
}

在initWithFrame:scrollView方法的底部加入例如以下代码：

- (void)addAirplaneLayer {
    self.airplaneLayer = [CALayer layer];
    self.airplaneLayer.opacity = 0.0;
    UIImage *image = [UIImage imageNamed:@"airplane.png"];
    self.airplaneLayer.contents = (__bridge id)(image.CGImage);
    self.airplaneLayer.frame = CGRectMake(0, 0, image.size.width, image.size.height);
    self.airplaneLayer.position = CGPointMake(self.frame.size.width / 2 + self.frame.size.height / 2 * 0.8, self.frame.size.height / 2);
    [self.layer addSublayer:self.airplaneLayer];
}

先看看圆圈的动画效果。注意到。当你将scrollView网下拉的时候，圆圈的白色就越来越多；当往上拉的时候，圆圈的白色就越来越少。

而这个效果能够通过ovalshapeLayer的strokeEnd属性值来控制。strokeEnd的取值范围是(0.0~1.0),当为0.0的时候。看不到圆圈；当为1.0的时候，整个圆圈显示完整；当为0.25和0.50的时候。效果图分别例如以下：

所以，我们在代码方法中写入下面代码，便能够看出圆圈的即时变化

// 拖动tableview的时候。就显示圆圈添加或者降低效果(在scrollView拖拽过程中会一直触发)
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

        // scrollView.contentOffset.y 往下拉值为负，往上提值为正
        CGFloat offsetY = MAX(-(scrollView.contentOffset.y + scrollView.contentInset.top), 0);
        self.progress = MIN(MAX(offsetY / self.frame.size.height, 0), 1);
        [self redrawFromProgress:self.progress];

}

- (void)redrawFromProgress:(CGFloat)progress {
    self.ovalShapeLayer.strokeEnd = progress;
    // 伴随着滚动。有种透明的效果
    self.airplaneLayer.opacity = progress;
}

/*拉动的距离(0~1)*/
@property (nonatomic, assign) CGFloat progress;

/*是否正在刷新*/
@property (nonatomic, assign, getter=isRefreshing) BOOL refreshing;

代码例如以下：

// 在scrollView停止拖拽的时候会触发
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
    if (!self.isRefreshing && self.progress >= 1.0) {
        [self beginRefreshing];
    }
}

- (void)beginRefreshing {

    self.refreshing = YES;
    [UIView animateWithDuration:4.0 animations:^{
        UIEdgeInsets newInsets = self.scrollView.contentInset;
        newInsets.top += self.frame.size.height;
        self.scrollView.contentInset = newInsets;
    } completion:^(BOOL finished) {
        [self endRefreshing];
    }];
    
    // 圆圈效果
    CABasicAnimation *strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    strokeStartAnimation.fromValue = @(-0.5);
    strokeStartAnimation.toValue = @(1.0);
    
    CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAnimation.fromValue = @(0.0);
    strokeEndAnimation.toValue = @(1.0);

    CAAnimationGroup *strokeAnimationGroup = [CAAnimationGroup animation];
    strokeAnimationGroup.duration = 1.5;
    strokeAnimationGroup.repeatDuration = 6.0;
    strokeAnimationGroup.animations = @[strokeStartAnimation, strokeEndAnimation];
    [self.ovalShapeLayer addAnimation:strokeAnimationGroup forKey:nil];
    
    // 飞机效果
    // 1. 绕着圆圈移动
    CAKeyframeAnimation *flightAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    flightAnimation.path = self.ovalShapeLayer.path;
    flightAnimation.calculationMode = kCAAnimationPaced;
    
    // 2. 有转动效果
    CABasicAnimation *airplaneOrientationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    airplaneOrientationAnimation.fromValue = @0;
    airplaneOrientationAnimation.toValue = @(2 * M_PI);
    
    CAAnimationGroup *flightAnimationGroup = [CAAnimationGroup animation];
    flightAnimationGroup.duration = 1.5;
    flightAnimationGroup.repeatDuration = 6.0;
    flightAnimationGroup.animations = @[flightAnimation,airplaneOrientationAnimation];
    [self.airplaneLayer addAnimation:flightAnimationGroup forKey:nil];
}

- (void)endRefreshing {
    self.refreshing = NO;
    [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        UIEdgeInsets newInsets = self.scrollView.contentInset;
        newInsets.top -= self.frame.size.height;
        self.scrollView.contentInset = newInsets;
    } completion:nil];
}