CAShapeLayer与UIBezierPath实现简单加载动
这是第一次写博客，写的不好地方请指教
先上效果图
Animation.gif
分析：
实现分别动画，这个图形由四个path组成，分别为左半圆，右半圆，左边直线，右边直线
CGPointCircleCenter =CGPointMake(self.pacman.frame.size.width/2,self.pacman.frame.size.height/2);
UIBezierPath* CircleLeft = [UIBezierPathbezierPath];
[CircleLeftaddArcWithCenter:CircleCenterradius:RollViewRadius startAngle:M_PI_2endAngle:M_PI_2+M_PIclockwise:YES];
CAShapeLayer* CircleLeftLayer = [CAShapeLayerlayer];
CircleLeftLayer.path= CircleLeft.CGPath;
CircleLeftLayer.strokeColor= [[UIColorlightGrayColor]CGColor];
CircleLeftLayer.fillColor= [[UIColorclearColor]CGColor];
右半圆
UIBezierPath* CircleRight = [UIBezierPathbezierPath];
[CircleRightaddArcWithCenter:CircleCenterradius:RollViewRadius startAngle:M_PI_2endAngle:-M_PI_2clockwise:NO];
CAShapeLayer* CircleRightLayer = [CAShapeLayerlayer];
CircleRightLayer.path= CircleRight.CGPath;
CircleRightLayer.strokeColor= [[UIColorlightGrayColor]CGColor];
CircleRightLayer.fillColor= [[UIColorclearColor]CGColor];
左直线
CGFloatLineY =2*RollViewRadius;
CGFloatLineX = CircleLeft.bounds.origin.x+RollViewRadius;
CGPointLineStartPoint =CGPointMake(LineX, LineY);
UIBezierPath* LineLeft = [UIBezierPathbezierPath];
[LineLeftmoveToPoint:CGPointMake(LineX -1.5*RollViewRadius, LineY)];
[LineLeftaddLineToPoint:LineStartPoint];
CAShapeLayer* LineLeftlLayer = [CAShapeLayerlayer];
LineLeftlLayer.path= LineLeft.CGPath;
LineLeftlLayer.strokeColor= [[UIColorlightGrayColor]CGColor];
RollViewRadius
右直线
UIBezierPath* LineRight = [UIBezierPathbezierPath];
[LineRightmoveToPoint:CGPointMake(LineX +1.5*RollViewRadius, LineY)];
LineRight.lineWidth=2;
[LineRightaddLineToPoint:LineStartPoint];
CAShapeLayer* LineRightlLayer = [CAShapeLayerlayer];
LineRightlLayer.path= LineRight.CGPath;
LineRightlLayer.strokeColor= [[UIColorlightGrayColor]CGColor];
动画部分是使用 strokeEnd 和 storkeStart来实现，值都是从[0,1]
strokeStart代表描绘开始点距离结束点的百分比，strokeEnd代表描绘终点距离结束点的百分比
注意：strokeEnd如果小于等于strokeStart 则绘制不出任何内容
/* These values define the subregion of the path used to draw the
* stroked outline. The values must be in the range [0,1] with zero
* representing the start of the path and one the end. Values in
* between zero and one are interpolated linearly along the path
* length. strokeStart defaults to zero and strokeEnd to one. Both are
* animatable. */(官方对属性的解释)
strokeStart设置成从 0 —1过程，就能看到从开始点一直擦除到终点的动画效果啦！（直线的效果就是这样出来的）
左直线动画
CABasicAnimation* LineLeftAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeStart"];
LineLeftAnimation.toValue= [NSNumbernumberWithFloat:1];
LineLeftAnimation.repeatCount=CGFLOAT_MAX;
LineLeftAnimation.removedOnCompletion=NO;
LineLeftAnimation.autoreverses=YES;
LineLeftAnimation.duration=DefaultDuration/2;
[layeraddAnimation:LineLeftAnimationforKey:@"LineLeft"];
右直线相似，所以不上代码了
设置storkeEnd从0—1的过程，就是从起点一直绘制的终点的过程，所以圆的效果也出来啦！
CABasicAnimation* CircleLeftAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];
CircleLeftAnimation.toValue= [NSNumbernumberWithFloat:1];
CircleLeftAnimation.fromValue= [NSNumbernumberWithInt:0];
CircleLeftAnimation.repeatCount=CGFLOAT_MAX;
CircleLeftAnimation.removedOnCompletion=NO;
CircleLeftAnimation.duration=DefaultDuration/2;
CircleLeftAnimation.autoreverses=YES;
[layeraddAnimation:CircleLeftAnimationforKey:@"CircleLeft"];
颜色的变化只需要改变一下strokeColor，因为没有设置背景色，所以这个属性修改没有用
CABasicAnimation* GraduallyColorAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeColor"];
GraduallyColorAnimation.toValue= (__bridgeid_Nullable)([[UIColorgreenColor]CGColor]);
GraduallyColorAnimation.fromValue= (__bridgeid_Nullable)([[UIColorlightGrayColor]CGColor]);
GraduallyColorAnimation.duration=DefaultDuration/2;
GraduallyColorAnimation.repeatCount=CGFLOAT_MAX;
GraduallyColorAnimation.autoreverses=YES;
GraduallyColorAnimation.removedOnCompletion=NO;
[layeraddAnimation:GraduallyColorAnimationforKey:@"changeColor"];
现在这个动画效果就已经实现啦！
GitHub地址，喜欢的可以点一下star，大家一起学习！
