这篇介绍的是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；
- 给两个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
这篇就介绍这么多动画效果，欢迎大家提意见；下篇介绍实现颜色渐变效果
