今日头条下拉加载动画实现

前段时间有位好友让我抽时间看一下今日头条的下拉刷新实现,抽时间写了个demo,先看一下整体效果图.若您觉得不错,请在github上给我一颗Star.若在使用中发现BUG,请联系我邮箱zth0218@126.com

完整演示.gif

思路

---

观察这个动画,整体有2部分组成.
  第一部分为画线动画,包括外边框(带圆角)逆时针的绘制,内部左上角矩形顺时针绘制, 其他三条横线的绘制.
  第二部分为旋转动画,内部矩形框移动,有一种将其他三条横线挤压的效果.

• 画线动画

绘画部分.gif
  用到的有CAShapeLayer,UIBezierPath,CABasicAnimation.具体怎么用劳烦自己谷歌吧.
CAShapeLayer和UIBezierPath:实现图形的绘制.
CABasicAnimation: 实现绘制动画.

代码示例:

//外边框路径,逆时针  提供了2种方法,详细看Demo
 UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(pointX+sizeW-Radius, pointY)];
    [path addLineToPoint:CGPointMake(pointX+Radius, pointY)];
    [path addArcWithCenter:CGPointMake(pointX+Radius, pointY+Radius) radius:Radius startAngle:M_PI * 1.5 endAngle:M_PI clockwise:0];
    [path addLineToPoint:CGPointMake(pointX, pointY+sizeH-Radius)];
    [path addArcWithCenter:CGPointMake(pointX+Radius, pointY+sizeH-Radius) radius:Radius startAngle:M_PI endAngle:M_PI_2 clockwise:0];
    [path addLineToPoint:CGPointMake(pointX+sizeW-Radius, pointY+sizeH)];
    [path addArcWithCenter:CGPointMake(pointX+sizeW-Radius, pointY+sizeH-Radius) radius:Radius startAngle:M_PI_2 endAngle:0 clockwise:0];
    [path addLineToPoint:CGPointMake(pointX+sizeW, pointY+Radius)];
    [path addArcWithCenter:CGPointMake(pointX+sizeW-Radius, pointY+Radius) radius:Radius startAngle:0 endAngle:M_PI*1.5 clockwise:0];
    [path closePath];
    
    CAShapeLayer *shape_layer = [CAShapeLayer layer];
    shape_layer.strokeColor = AHColor(154, 154, 153).CGColor;
    shape_layer.fillColor = [UIColor clearColor].CGColor;
    shape_layer.lineCap = kCALineCapRound;
    shape_layer.lineJoin = kCALineJoinRound;
    shape_layer.lineWidth = 3.0f;
    shape_layer.path = path.CGPath;
    shape_layer.strokeEnd = 0;

- (CAShapeLayer *)shape_layer{
    //绘制外边框
    if (_shape_layer==nil) {
        _shape_layer = [self addBorderLayerToLayer];
//        UIBezierPath *_shape_layer_path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, sizeW, sizeH) cornerRadius:AHCornerRadius];
//        _shape_layer = [CAShapeLayer layer];
//        _shape_layer.strokeColor = AHColor(154, 154, 153).CGColor;
//        _shape_layer.fillColor = [UIColor clearColor].CGColor;
//        _shape_layer.lineCap = kCALineCapRound;
//        _shape_layer.lineJoin = kCALineJoinRound;
//        _shape_layer.lineWidth = 1.0f;
//        _shape_layer.path = [_shape_layer_path bezierPathByReversingPath].CGPath;
//        _shape_layer.strokeEnd = 0;  
    }
    return _shape_layer;
}

- (void)updateAnimationInLayer:(CAShapeLayer*)layer ForKey:(NSString*)animationKey Progress:(CGFloat)Refreshprogress{
    // 动画实现部分
    layer.strokeEnd = Refreshprogress;
    [self.shape_layer removeAnimationForKey:animationKey];
    CABasicAnimation *animate_Progress = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animate_Progress.fromValue = @(self.front_progress_percent);
    animate_Progress.toValue = @(Refreshprogress);
    [self.shape_layer addAnimation:animate_Progress forKey:animationKey];
    
}

• 旋转动画

旋转部分.gif
旋转部分要简单些,分解成4步骤即可,具体如下图,(ps:好吧我没找到简书4张图片并排放置的方法,哪位大神知道可以指导下我 zth0218@126.com,多谢)
1.png 2.png 3.png 4.png
三者在4种情况下的position,然后NSTimer实例每次调用方法时,更新各自的position和三条线的bouns即可.

左上角矩形 :运行顺序center0->center1->center2->center3

    center0 = CGPointMake(ratioW, ratioH);
    center1 = CGPointMake(sizeW-ratioW, ratioH);
    center2 = CGPointMake(sizeW-ratioW, sizeH-ratioH);
    center3 = CGPointMake(ratioW, sizeH-ratioH);

三条横线 :
三条短横线运行顺序line_center1->line_center2->line_center3->line_center4
三条长横线运行顺序line_center2->line_center5->line_center4->line_center6

    line_center1 = CGPointMake(center1.x-5, center1.y);
    line_center2 = CGPointMake((center2.x+center3.x)*0.5, center2.y);
    line_center3 = CGPointMake(center0.x+5, center2.y);
    line_center4 = CGPointMake(line_center2.x, center1.y);
    line_center5 = CGPointMake(line_center3.x, center1.y);
    line_center6 = CGPointMake(line_center1.x, center2.y);
    line_windth_0 = sizeW-2*(marginX+margin)-ratioW-marginX-20;

每1秒调取一次位置移动

- (void)fun{
    
    _inside_index++;
    if (_inside_index>3) {
        _inside_index = 0;
    }
    NSValue *rec_layer_position = [self infoData][@"inside_rectangle_layer_position"][_inside_index];
    self.inside_rectangle_layer.position = rec_layer_position.CGPointValue;
    NSValue *one_layer_positon = [self infoData][@"line_one_layer_position"][_inside_index];
    self.line_one_layer.position= one_layer_positon.CGPointValue;
    NSValue *two_layer_positon = [self infoData][@"line_two_layer_position"][_inside_index];
    self.line_two_layer.position = two_layer_positon.CGPointValue;
    self.line_one_layer.bounds = CGRectMake(0, 0, _inside_index%2==0?line_windth_0:line_windth_1, line_height);
    self.line_two_layer.bounds = CGRectMake(0, 0, _inside_index%2?line_windth_0:line_windth_1, line_height);
}

使用

---

代码示例:

- (void)viewDidLoad{
    
    [super viewDidLoad];
    
    self.reflayer =[[RefreshLayer alloc]initWithRect:CGRectMake(200, 200, 120, 120)];
    [self.view.layer addSublayer:self.reflayer];
    
}

- (IBAction)test:(UISlider *)sender {
    
    self.reflayer.Refreshprogress = sender.value;
    
}
- (IBAction)AnimationStart:(id)sender {
    [self.reflayer start];
}
- (IBAction)AnimationStop:(id)sender {
    [self.reflayer stop];
    
}

//页面消失，进入后台不显示该页面，关闭定时器
-(void)viewDidDisappear:(BOOL)animated
{
    //关闭定时器
     [self.reflayer stop];
}