当前位置: 代码迷 >> Iphone >> 利用CALayer动画片实现渐变进度条
  详细解决方案

利用CALayer动画片实现渐变进度条

热度:25   发布时间:2016-04-25 05:45:12.0
利用CALayer动画实现渐变进度条

今天是第一次写博客,希望在今后的日子里大家可以共同进步提高。闲话不多说了,首先看一下效果图。

 

 

 

  其实这个空间是比较简单的调用CALayer动画的空间,首先我们做一下简单的分析。这个动画的组成分为两部分,第一部分为填充部分,即“strokeEnd”,另一部分则是填充颜色,即“stroke color”。有这两个动画组成了一个CALayer的组动画。

  实现原理大致明确我们来用代码实现一下,我们先修改一下它的初始化方法:

-(instancetype)initWithFrameAndProsse:(CGRect)frame prosseInfo:(ProssenInfo)prosseInfo

{

    self = [super initWithFrame:frame];

    if(self)

    {

        _prossenInfo             = prosseInfo;

       

        [self setCAShapeLayer];

    }

    return self;

}

  这里面我将所需的一部分关于CAShapeLayer的参数写成了一个结构体,方便使用和查找,接下来我们初始化一下CAShapeLayer这个属性:

-(void)setCAShapeLayer

{

    _prosseShape                 = [CAShapeLayer layer];

    _prosseShape.strokeColor     = _prossenInfo.lineColor;

    _prosseShape.lineWidth       = _prossenInfo.width;

    _prosseShape.strokeStart     = 0;

    _prosseShape.strokeEnd       = 0;

    _prosseShape.path            = [self prossePath];

    _prosseShape.lineJoin        = kCALineJoinRound;

    _prosseShape.lineCap         = kCALineCapRound;

    _prosseShape.beginTime       =0.1f;

    

    [self.layer addSublayer:_prosseShape];

}这里我们需要注意

   _prosseShape.lineJoin        = kCALineJoinRound;

    _prosseShape.lineCap         = kCALineCapRound;这两句话,如果不加上的话实现出来的进度条就不是圆角的。

我们改如何给路径呢?

-(AnimationPoint)animationPoint

{

   

    CGFloat startPoint_x    = self.frame.size.width*(_prossenInfo.minLength<_prossenInfo.maxLength?_prossenInfo.minLength:_prossenInfo.maxLength);

    CGFloat endPoint_x      = self.frame.size.width*(_prossenInfo.minLength>_prossenInfo.maxLength?_prossenInfo.minLength:_prossenInfo.maxLength);

    

    AnimationPoint point    = AnimationPointMake\

                              (CGPointMake(startPoint_x, self.frame.size.height/2.f-_prossenInfo.width/2.f), \

                               CGPointMake(endPoint_x, self.frame.size.height/2.f-_prossenInfo.width/2.f));

    

    return point;

 

}

 

 

-(CGMutablePathRef)prossePath

{

    AnimationPoint point    = [self animationPoint];

    CGMutablePathRef pathRef=CGPathCreateMutable();

    

    CGPathMoveToPoint(pathRef, NULL,point.startPoint.x, point.startPoint.y);

    

    CGPathAddLineToPoint(pathRef, NULL, point.endPoint.x,point.endPoint.y);

   

    CGPathCloseSubpath(pathRef);

   

    return pathRef;

}

我们给定了这个Layer的起始填充部分,颜色,宽度以及路径,接下来我们开始着手关于它的动画。

-(void)starAnimation:(NSArray *)colorArray time:(NSTimeInterval)time

{

   __block BOOL colors = NO;

    __weak CAShapeLayer *shape = _prosseShape;

    __block NSMutableArray *animationArray = [NSMutableArray array];

    _aniTime = time;

    

    [shape animateKey:@"strokeEnd"

                   fromValue:[NSNumber numberWithFloat:0.f]

                     toValue:[NSNumber numberWithFloat:0.5f]

                   customize:^BOOL(CABasicAnimation *animation) {

                       animation.duration = time;

                       if (colorArray != nil) {

                           colors  = YES;

                           [animationArray addObject:animation];

                           [shape keyAnimation:@"strokeColor"

                                            keyValues:colorArray

                                            customize:^BOOL(CAKeyframeAnimation *animation) {

                                                animation.duration = time;

                                                 animation.calculationMode = kCAAnimationPaced;

                                                [animationArray addObject:animation];

                                                return colors;

                                            }];

                           [shape animationGroupWithDuration:time

                                                         animations:animationArray

                                                          customize:^(CAAnimationGroup *animation) {

                                                             

                                                          }];

                       }

                       else

                       {

                           colors  = NO;

                           animation.delegate = self;

                       }

                       

                       return colors;

                   }];

}

  因为我们要实现的事渐变颜色的动画效果,所以我们需要给定两个参数,一个是颜色数组,一个是进度时间。(当然在实际的下载过程中我们是不知道进度时间的,所以这里本人封装的控件还不具备很好的完整性,但是我们可以通过修改 toValue:[NSNumber numberWithFloat:0.5f]这个函数参数来实现下载进度,本人会在下篇博客之前修改完毕)。接下来我们实现一下关于动画时间的计算,因为CALayer动画本来是不支持动画时间监听的,所以这里面我用了一个定时器。

-(void)animationDidStart:(CAAnimation *)anim

{

    _animationTimer  = [NSTimer scheduledTimerWithTimeInterval:AnimationTimer target:self selector:@selector(progressDidStart:) userInfo:nil repeats:YES];

    

}

-(void)progressDidStart:(NSTimer *)timer

{

    if (_delegate &&[_delegate respondsToSelector:@selector(prosseToPoint:withDot:)]) {

        animationProgress += 1/(_aniTime/AnimationTimer);

        if (animationProgress >= 1.0) {

            animationProgress = 1.0;

        }

        [_delegate prosseToPoint:CGPointZero withDot:animationProgress];

        

    }

}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag

{

 

    if (_delegate &&[_delegate respondsToSelector:@selector(prosseToPoint:withDot:)]) {

        animationProgress += 1/(_aniTime/AnimationTimer);

        if (animationProgress >= 1.0) {

            animationProgress = 1.0;

        }

        [_delegate prosseToPoint:CGPointZero withDot:animationProgress];

        

    }

    animationProgress = 0;

    [_animationTimer invalidate];

    _animationTimer = nil;

}

  这样我们一个简单的进度条控件就写好了,下面我们来调用一下:

    _proView = [[XDProsseView alloc]initWithFrameAndProsse:CGRectMake(10, 320, self.view.bounds.size.width-20, 50) prosseInfo:ProssenInfoMake(5,1.f , 0.0, [UIColor blueColor].CGColor)];

    _proView.delegate = self;

    [self.view addSubview:_proView];

初始化这个进度条,

   [_proView starAnimation:[NSArray arrayWithObjects:(id)[UIColor greenColor].CGColor,(id)[UIColor redColor].CGColor,(id)[UIColor blackColor].CGColor, nil] time:10.234f];

设置开始,时间,颜色等。

-(void)prosseToPoint:(CGPoint)point withDot:(double)dot

{

NSLog(@"监听进度条进度%@ %ld",NSStringFromCGPoint(point),dot);

}

第一次写博客,如果有什么不妥的地方,希望大家及时提出来,我一定会积极改正,谢谢!