這篇介紹的是CAShaperLayer制作一個(gè)直線進(jìn)度條试溯，圓環(huán)進(jìn)度條，注水動(dòng)畫郊酒；話不多說遇绞，直接代碼
GitHub工程地址本篇主要的內(nèi)容在Layer/CAShaperLayer/ShaperLayer里
1键袱、直線進(jìn)度條
實(shí)現(xiàn)代碼
/*直線進(jìn)度條*/
- (CAShapeLayer *)lineAnimationLayer
{
if(!_lineAnimationLayer){
_lineAnimationLayer = [CAShapeLayer layer];
_lineAnimationLayer.strokeColor = [UIColor greenColor].CGColor;
_lineAnimationLayer.lineWidth = 5;
// 設(shè)置路徑
UIBezierPath * path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 200)];
[path addLineToPoint:CGPointMake(300, 200)];
_lineAnimationLayer.path = path.CGPath;
/*動(dòng)畫,keyPath是系統(tǒng)定的關(guān)鍵詞，可以自己去幫助文檔里面查看*/
CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
// animation的動(dòng)畫時(shí)長(zhǎng)
animation.duration = 4.0;
// 動(dòng)畫的其實(shí)位置
animation.fromValue = @(0);
// 動(dòng)畫的結(jié)束位置
animation.toValue = @(1);
// 動(dòng)畫執(zhí)行次數(shù)
animation.repeatCount = MAXFLOAT;
// 添加動(dòng)畫并設(shè)置key摹闽；這個(gè)key值是自己定義的
[_lineAnimationLayer addAnimation:animation forKey:@"lineAnimationLayer"];
}
return _lineAnimationLayer;
}
運(yùn)行結(jié)果
進(jìn)度條.gif
2蹄咖、圓環(huán)進(jìn)度條
實(shí)現(xiàn)代碼：
/*圓環(huán)進(jìn)度條*/
- (CAShapeLayer *)animationLayer
{
if(!_animationLayer){
_animationLayer = [[CAShapeLayer alloc] init];
_animationLayer.strokeColor = [UIColor blueColor].CGColor;
_animationLayer.fillColor = [UIColor clearColor].CGColor;
_animationLayer.lineWidth = 10;
// 繪制曲線，也就是動(dòng)畫路徑
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(kWidth/2-50, 460, 100, 100)];
// 創(chuàng)建動(dòng)畫付鹿，keyPath為指定的路勁澜汤，有專門的字符串，自己定義的字符串是不起作用的
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
// 動(dòng)畫起點(diǎn)
animation.fromValue = @(0);
// 動(dòng)畫終點(diǎn)
animation.toValue = @(1);
// 動(dòng)畫時(shí)間
animation.duration = 3.0;
// 動(dòng)畫執(zhí)行次數(shù)
animation.repeatCount = 100;
_animationLayer.path = path.CGPath;
[_animationLayer addAnimation:animation forKey:@"strokeEndAnimation"];
}
return _animationLayer;
}
實(shí)現(xiàn)效果：
圓環(huán)進(jìn)度條.gif
3倘屹、注水動(dòng)畫效果
實(shí)現(xiàn)步驟：
- 1.先創(chuàng)建兩個(gè)imageView，一個(gè)為沒有填充色的默認(rèn)圖慢叨，一個(gè)為有顏色的填充圖纽匙，兩張imageView位置一樣，填充圖在默認(rèn)圖之上拍谐；
- 2.設(shè)置填充圖的layer的mask烛缔，在這個(gè)mask上面有兩個(gè)shaperLayer，分別為animationUp和animationDown轩拨，兩個(gè)layer都需要實(shí)現(xiàn)fillColor践瓷；
- 給兩個(gè)layer添加動(dòng)畫路徑，animationUp的動(dòng)畫路徑為(-5,-5),到(30.f,30.f); animationDown的動(dòng)畫路徑為(65.f,65.f),到(30.f,30.f);
實(shí)現(xiàn)代碼：
.h文件：
/**
*注水動(dòng)畫效果屬性
*/
/*注水動(dòng)畫需要的灰色圖*/
@property (nonatomic,strong) UIImageView *grayImageView;
/*注水動(dòng)畫需要的填充圖*/
@property (nonatomic,strong) UIImageView *greenImageView;
/*注水動(dòng)畫上半部分的layer*/
@property (nonatomic,strong) CAShapeLayer *animationUp;
/*注水動(dòng)畫的下半部分的layer*/
@property (nonatomic,strong) CAShapeLayer *animationDown;
.m文件
/**
*注水動(dòng)畫效果圖
* 首先底部是一張默認(rèn)圖亡蓉，也就是沒有填充的圖片
* 在默認(rèn)圖同樣的位置上晕翠，在放置一張和默認(rèn)圖一樣的填充圖，覆蓋默認(rèn)圖
* 設(shè)置填充圖greenImageView的layer.mask為一個(gè)CALayer的類layer
* 將animationUp和animationDown添加到layer上面
* 創(chuàng)建動(dòng)畫路勁砍濒，分別為up和down的路徑
* 執(zhí)行動(dòng)畫
*/
/*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;
}
/**
*創(chuàng)建greenImageView的layer.mask
*/
-(CALayer *)greenHeadMaskLayer{
CALayer * mask = [CALayer layer];
mask.frame = self.greenImageView.bounds;
// 實(shí)現(xiàn)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];
// 實(shí)現(xiàn)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;
}
/*開始動(dòng)畫*/
-(void)startAnimation{
/*up 動(dòng)畫屬性*/
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 動(dòng)畫屬性*/
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"];
}
調(diào)用
self.greenImageView.layer.mask = [self greenHeadMaskLayer];
[self startAnimation];
實(shí)現(xiàn)效果：
注水動(dòng)畫.gif
這篇就介紹這么多動(dòng)畫效果淋肾，歡迎大家提意見；下篇介紹實(shí)現(xiàn)顏色漸變效果
