仿《内涵段子》loading

来源：情诗网 2021-01-26 分类：内涵情话

效果

分析

效果很简单就是一条线做做画圆的动作。这种形状的变化我们还是选着用CAShapeLayer因为它有path属性可以设置layer的形状，然后他还有strokeStart和strokeEnd属性这两个属性控制路径显示的开始和结束
strokeEnd代表显示的路径结束位置的百分比
strokeStar代表显示的路径开始位置的百分比

这里我们要切记取值范围是0到1

动画用的属性分析完了，接下来我们分析下怎么实现

首先我们来看长度逐渐变短怎么实现
很简单，我们把strokeStar和strokeEnd结合起来，同时做动画

- (void)loadingAnimation {
    CABasicAnimation *strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    strokeStartAnimation.fromValue         = @0;
    strokeStartAnimation.toValue           = @1.;
    strokeStartAnimation.timingFunction    = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    CABasicAnimation *strokeEndAnimation   = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAnimation.fromValue           = @.0;
    strokeEndAnimation.toValue             = @1.;
    strokeEndAnimation.timingFunction      = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    strokeEndAnimation.duration            = self.duration * 0.5;
    
    CAAnimationGroup *strokeAniamtionGroup = [CAAnimationGroup animation];
    strokeAniamtionGroup.duration          = self.duration;
    
    strokeAniamtionGroup.delegate          = self;
    strokeAniamtionGroup.animations        = @[strokeEndAnimation,strokeStartAnimation];
    [self.loadingLayer addAnimation:strokeAniamtionGroup forKey:@"strokeAniamtionGroup"];
}

【注意：】正常情况下这两个属性同事做动画会什么都看不到，因为显示的路径显示的起点和结束的起点一样了，这里最关键的就是把起点(strokeStar)和结束点(strokeEnd)挫开，我这里把strokeEndAnimation动画持续时长设置为strokeStartAnimation动画的持续时长的一半，但是他们又是在同一个strokeAniamtionGroup中，所以在执行动画中strokeEnd的速度会比strokeStart快一倍，就巧妙的达到了效果

接下来是我踩过的坑

我们看到这是一个圆我第一个想到的是在layoutSubviews方法中直接通过view的bounds来获取圆

UIBezierPath *path      = [UIBezierPath bezierPathWithOvalInRect:self.bounds]

但是你可以发现效果图中绕的圆每次实际上是饶了4/3个圆，尴尬的是strokeStar和strokeEnd属性取值范围是[0,1]，这导致了我只能对整个圆的路径做动画，达不到4/3圆的效果。

方案一：等strokeEnd动画做完了，我在动画结束的代理函数-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag里再补上1/3个圆动画，但是我们用的是CAAnimationGroup根本监听不到strokeEndAnimation就算监听到后面还有strokeStar的处理所以这【方案不可行】

方案二：在group动画中我添加一个把整个view旋转1/3 * 2π的角度，但是你可能要在你的loadingview中加一个旋转层，劳民伤财有兴趣的老铁可以试下。

方案三（正解）：刚才我们都太局限性了，看到这是个圆就把path局限为一个角度2π的圆，我们可以用UIBezierPath的另一个方法把角度调到4/3*2π，这样当storkEnd为1.0的时候就正好走的是4/3个圆而不是3/3个圆

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

接下来我们要做的
1、每次动画完成的时候更换path，因为下一个停留点又不一样了
2、防止循环调用不释放内存，这很简单，添加一个isEnable属性标记他是否再继续调用就可以

#pragma mark -CAAnimationDelegate
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    if (!self.isEnable) {
        return;
    }
    _index++;
//    AILog(@"---用于测试是否循环调用----");
    self.loadingLayer.path                 = [self cycleBezierPathIndex:_index %3].CGPath;
    [self loadingAnimation];
}

我另一篇文章如何来实现一个自定义的刷新控件也有类似的动画仅供学习

源码地址喜欢的GitHub给个star支持

源码位置

仿《内涵段子》loading

效果

分析

接下来是我踩过的坑

热门文章