CAShaperLayer(二 直线进度条，圆环进度条，注水动画)

这篇介绍的是CAShaperLayer制作一个直线进度条，圆环进度条，注水动画；话不多说，直接代码

GitHub工程地址本篇主要的内容在Layer/CAShaperLayer/ShaperLayer里

1、直线进度条

实现代码

/*直线进度条*/
- (CAShapeLayer *)lineAnimationLayer
{
    if(!_lineAnimationLayer){
        _lineAnimationLayer = [CAShapeLayer layer];
        _lineAnimationLayer.strokeColor = [UIColor greenColor].CGColor;
        _lineAnimationLayer.lineWidth = 5;
//        设置路径
        UIBezierPath * path = [UIBezierPath bezierPath];
        [path moveToPoint:CGPointMake(50, 200)];
        [path addLineToPoint:CGPointMake(300, 200)];
        _lineAnimationLayer.path = path.CGPath;
        /*动画,keyPath是系统定的关键词，可以自己去帮助文档里面查看*/
        CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
//        animation的动画时长
        animation.duration = 4.0;
//        动画的其实位置
        animation.fromValue = @(0);
        
//        动画的结束位置
        animation.toValue = @(1);
//        动画执行次数
        animation.repeatCount = MAXFLOAT;
//        添加动画并设置key；这个key值是自己定义的
        [_lineAnimationLayer addAnimation:animation forKey:@"lineAnimationLayer"];
    
    }
    return _lineAnimationLayer;
}

运行结果

进度条.gif

2、圆环进度条

实现代码：

/*圆环进度条*/
- (CAShapeLayer *)animationLayer
{
    if(!_animationLayer){
        
        _animationLayer = [[CAShapeLayer alloc] init];
        _animationLayer.strokeColor = [UIColor blueColor].CGColor;
        _animationLayer.fillColor = [UIColor clearColor].CGColor;
        _animationLayer.lineWidth = 10;
//        绘制曲线，也就是动画路径
        UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(kWidth/2-50, 460, 100, 100)];
//        创建动画，keyPath为指定的路劲，有专门的字符串，自己定义的字符串是不起作用的
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
//        动画起点
        animation.fromValue = @(0);
//        动画终点
        animation.toValue = @(1);
//        动画时间
        animation.duration = 3.0;
//        动画执行次数
        animation.repeatCount = 100;
        
        _animationLayer.path = path.CGPath;
        [_animationLayer addAnimation:animation forKey:@"strokeEndAnimation"];
    }
    return _animationLayer;
}

实现效果：

圆环进度条.gif

3、注水动画效果

实现步骤：

• 1.先创建两个imageView，一个为没有填充色的默认图，一个为有颜色的填充图，两张imageView位置一样，填充图在默认图之上；
• 2.设置填充图的layer的mask，在这个mask上面有两个shaperLayer，分别为animationUp和animationDown，两个layer都需要实现fillColor；
• 3. 给两个layer添加动画路径，animationUp的动画路径为(-5,-5),到(30.f,30.f); animationDown的动画路径为(65.f,65.f),到(30.f,30.f);

实现代码：

.h文件：

/**
 *注水动画效果属性
 */
/*注水动画需要的灰色图*/
@property (nonatomic,strong) UIImageView *grayImageView;
/*注水动画需要的填充图*/
@property (nonatomic,strong) UIImageView *greenImageView;
/*注水动画上半部分的layer*/
@property (nonatomic,strong) CAShapeLayer *animationUp;
/*注水动画的下半部分的layer*/
@property (nonatomic,strong) CAShapeLayer *animationDown;

.m文件

/**
 *注水动画效果图
 * 首先底部是一张默认图，也就是没有填充的图片
 * 在默认图同样的位置上，在放置一张和默认图一样的填充图，覆盖默认图
 * 设置填充图greenImageView的layer.mask为一个CALayer的类layer
 * 将animationUp和animationDown添加到layer上面
 * 创建动画路劲，分别为up和down的路径
 * 执行动画
 */

/*grayImageView*/
- (UIImageView *)grayImageView
{
    if(!_grayImageView){
        _grayImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bull_head_gray"]];
        _grayImageView.frame = CGRectMake(0, 0, 60, 60);
        _grayImageView.center = CGPointMake(kWidth/2, kHeight/2);
        [self addSubview:_grayImageView];
    }
    return _grayImageView;
}

/*grayImageView*/
- (UIImageView *)greenImageView
{
    if(!_greenImageView){
        _greenImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bull_head_green"]];
        _greenImageView.frame = CGRectMake(0, 0, 60, 60);
        _greenImageView.center = CGPointMake(kWidth/2, kHeight/2);
        [self addSubview:_greenImageView];
    }
    return _greenImageView;
}

/**
 *创建greenImageView的layer.mask
 */
-(CALayer *)greenHeadMaskLayer{
    CALayer * mask = [CALayer layer];
    mask.frame = self.greenImageView.bounds;
    
//    实现animationUP
    self.animationUp = [CAShapeLayer layer];
    self.animationUp.bounds = CGRectMake(0, 0, 60.f, 60.f);
    self.animationUp.position = CGPointMake(-5.f, -5.f);
    self.animationUp.fillColor = [UIColor greenColor].CGColor;
    self.animationUp.opacity = 0.8;
    self.animationUp.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(30.f, 30.f) radius:30.f startAngle:0 endAngle:2*M_PI clockwise:YES].CGPath;
    [mask addSublayer:self.animationUp];
    
    //    实现animationDown
    self.animationDown = [CAShapeLayer layer];
    self.animationDown.bounds = CGRectMake(0, 0, 60.f, 60.f);
    self.animationDown.position = CGPointMake(65.f, 65.f);
    self.animationDown.fillColor = [UIColor greenColor].CGColor;
    self.animationDown.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(30.f, 30.f) radius:30.f startAngle:0 endAngle:2*M_PI clockwise:YES].CGPath;
    [mask addSublayer:self.animationDown];
    
    return mask;
}

/*开始动画*/
-(void)startAnimation{
    /*up 动画属性*/
    CABasicAnimation * up = [CABasicAnimation animationWithKeyPath:@"position"];
    up.duration = 3.0;
    up.fromValue = [NSValue valueWithCGPoint:CGPointMake(-5, -5)];
    up.toValue = [NSValue valueWithCGPoint:CGPointMake(30.f, 30.f)];
    up.repeatCount = MAXFLOAT;
    [self.animationUp addAnimation:up forKey:@"animationUp"];
    
    /*down 动画属性*/
    CABasicAnimation * down = [CABasicAnimation animationWithKeyPath:@"position"];
    down.duration = 3.0;
    down.fromValue = [NSValue valueWithCGPoint:CGPointMake(65.f, 65.f)];
    down.toValue = [NSValue valueWithCGPoint:CGPointMake(30.f, 30.f)];
    down.repeatCount = MAXFLOAT;
    [self.animationDown addAnimation:down forKey:@"animationDown"];
}

调用

     self.greenImageView.layer.mask = [self greenHeadMaskLayer];
     [self startAnimation];

实现效果：

注水动画.gif

---

这篇就介绍这么多动画效果，欢迎大家提意见；下篇介绍实现颜色渐变效果