tags: Animation
上篇iOS animation動(dòng)畫三個(gè)角色(上)介紹了主角CALayer和幾個(gè)動(dòng)畫劇本外臂。本篇以幾個(gè)小例子配以武功秘籍繼續(xù)介紹其他主角
- 形狀圖層 CAShapeLayer 繪制不規(guī)則圖形(太極拳)
- 漸變圖層 CAGradientLayer 顏色漸變躺坟、陰影(隱身術(shù))
- 復(fù)制圖層 CAReplicatorLayer 迭代復(fù)制同一個(gè)圖層(分身術(shù))
CAShapeLayer 太極圈
繼承自CALayer吁津，因此肤舞，可使用CALayer的所有屬性。但是铸豁，CAShapeLayer需要和貝塞爾曲線配合使用才有意義汰寓。
關(guān)于UIBezierPath
path:表示路徑，可以用貝塞爾曲線缠俺，也可以自定義路徑
fillcolor:表示填充色
strokeColor：線條顏色
linewidth：線的寬度
strokeStart：stroke的起始點(diǎn)(0~1)
strokeEnd:stroke的結(jié)束點(diǎn)(0~1)
實(shí)例
@interface ProgressView : UIView
@end
@implementation ProgressView
-(id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
CAShapeLayer * shapelayer = [CAShapeLayer layer];
UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(frame.size.width/2, frame.size.height/2) radius:frame.size.width/2 startAngle:0 endAngle:2*M_PI clockwise:YES];
//[UIBezierPath bezierPathWithRoundedRect:frame cornerRadius:frame.size.width/2];
//路徑
shapelayer.path = path.CGPath;
//填充色
shapelayer.fillColor = [UIColor clearColor].CGColor;
// 設(shè)置線的顏色
shapelayer.strokeColor = [UIColor orangeColor].CGColor;
//線的寬度
shapelayer.lineWidth = 5;
[self.layer addSublayer:shapelayer];
//設(shè)置stroke起始點(diǎn)
// shapelayer.strokeStart = 0;
// shapelayer.strokeEnd = 0.75;
CABasicAnimation * anima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
anima.fromValue = [NSNumber numberWithFloat:0.f];
anima.toValue = [NSNumber numberWithFloat:1.f];
anima.duration = 4.0f;
anima.repeatCount = MAXFLOAT;
anima.timingFunction = UIViewAnimationOptionCurveEaseInOut;
[shapelayer addAnimation:anima forKey:@"strokeEndAniamtion"];
CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
anima3.toValue = [NSNumber numberWithFloat:-M_PI*2];
anima3.duration = 2.0f;
anima3.repeatCount = MAXFLOAT;
anima3.timingFunction = UIViewAnimationOptionCurveEaseInOut;
[self.layer addAnimation:anima3 forKey:@"rotaionAniamtion"];
}
return self;
}
@end
演示圖
shapeloading
CAGradientLayer 隱身術(shù)显晶，漸變術(shù)
繼承calayer，主要用于處理顏色漸變的圖層壹士。主要有以下的Properties
@property(copy) NSArray *colors
漸變顏色的數(shù)組
注意這幾個(gè)數(shù)字在0到1之間單調(diào)遞增磷雇。
@property CGPoint startPoint
映射locations中第一個(gè)位置，用單位向量表示躏救，比如（0唯笙，0）表示從左上角開始變化。默認(rèn)值是(0.5,0.0)盒使。
@property CGPoint endPoint
映射locations中最后一個(gè)位置崩掘，用單位向量表示，比如（1少办，1）表示到右下角變化結(jié)束苞慢。默認(rèn)值是(0.5,1.0)。
@property(copy) NSString *type
默認(rèn)值是kCAGradientLayerAxial英妓，表示按像素均勻變化挽放。除了默認(rèn)值也無其它選項(xiàng)。
//做顏色漸變
-(void)testslidetounlock
{
UILabel * textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, 200, 30)];
textLabel.center = self.view.center;
textLabel.textColor = [UIColor colorWithWhite:1 alpha:0.8];
textLabel.textAlignment = NSTextAlignmentCenter;
textLabel.text = @">> 滑動(dòng)來解鎖 >>>";
[self.view addSubview:textLabel];
CAGradientLayer *gradient = [CAGradientLayer layer];
// gradient.backgroundColor = [UIColor grayColor].CGColor;
gradient.frame = textLabel.bounds;
UIColor *startColor = [UIColor whiteColor];
UIColor *endColor = [UIColor clearColor];
gradient.colors = @[(id)endColor.CGColor,(id)startColor.CGColor, (id)endColor.CGColor];
gradient.startPoint = CGPointMake(0, 0);//(左蔓纠，下)
gradient.endPoint = CGPointMake(1, 0);//(右辑畦，下)
// [textLabel.layer insertSublayer:gradient atIndex:0];
gradient.locations = @[@.2,@.5,@.8];
textLabel.layer.mask = gradient;
CABasicAnimation * gradientanimation = [CABasicAnimation animationWithKeyPath:@"locations"];
gradientanimation.fromValue = @[@0, @0,@0.25];
gradientanimation.toValue = @[@0.75,@1 ,@1];
gradientanimation.duration = 2.5;
gradientanimation.repeatCount = HUGE;
[gradient addAnimation:gradientanimation forKey:@"gradientanimation"];//gradient, forKey: nil)
}
演示圖
滑動(dòng)開鎖動(dòng)畫
CAReplicatorLayer 分身術(shù)
復(fù)制器圖層(觀音送給孫悟空的三根毫毛，吹一下就變成無數(shù)的猴子猴孫)
CAReplicatorLayer是一個(gè)容器層
復(fù)制自己子層的layer,并且復(fù)制的出來的layer和原來的子layer擁有相同的動(dòng)效腿倚。然后通過設(shè)置一些屬性纯出，可以設(shè)置其偏移位置讓其依次排列，也可以設(shè)置不同的觸發(fā)時(shí)間這樣就形成了動(dòng)畫的效果
常用于做loading動(dòng)畫
repicator例子
此處包含兩個(gè)動(dòng)畫，一個(gè)是正在播放的狀態(tài)動(dòng)畫潦刃，一個(gè)是加載的動(dòng)畫
播放狀態(tài)動(dòng)畫
@interface PlayingAnimationView : UIView
@end
@implementation PlayingAnimationView
-(id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer new];
replicatorLayer.bounds = CGRectMake(0, 0, frame.size.width, frame.size.height);
replicatorLayer.anchorPoint = CGPointMake(0, 0);
[self.layer addSublayer:replicatorLayer];
CALayer * rectangle = [CALayer new];
CGFloat width = (frame.size.width - 30)/4;
rectangle.bounds = CGRectMake(0, 0, width, frame.size.height - 10);//: 0, y: 0, width: 30, height: 90)
rectangle.anchorPoint = CGPointMake(0, 0);
rectangle.position = CGPointMake(frame.origin.x + 10, frame.origin.y + 110);
rectangle.cornerRadius = 2;
rectangle.backgroundColor = [UIColor whiteColor].CGColor;
[replicatorLayer addSublayer:rectangle];
CABasicAnimation * moveRectangle = [CABasicAnimation animationWithKeyPath:@"position.y"];
moveRectangle.toValue = @(rectangle.position.y - 70);
moveRectangle.duration = 0.7;
moveRectangle.autoreverses = true;
moveRectangle.repeatCount = HUGE;
[rectangle addAnimation:moveRectangle forKey:nil];
//復(fù)制動(dòng)畫和狀態(tài)
//重復(fù)次數(shù)
replicatorLayer.instanceCount = 4;
//平移點(diǎn)的間隔 x y z
replicatorLayer.instanceTransform = CATransform3DMakeTranslation(width + 10, 0, 0);
replicatorLayer.masksToBounds = true;
replicatorLayer.instanceDelay =0.3;//延遲動(dòng)畫開始時(shí)間 以造成上下移動(dòng)的效果
}
return self;
}
@end
我們觀察到主要CAReplicatorLayer可以對(duì)它自己的子Layer進(jìn)行復(fù)制操作。創(chuàng)建了CAReplicatorLayer實(shí)例后懈叹，設(shè)置了它的尺寸大小乖杠、位置、錨點(diǎn)位置澄成、背景色胧洒，并且將它添加到了replicatorAnimationView的Layer中。
CAReplicatorLayer.h
中文翻譯如下：
復(fù)制器層創(chuàng)建的副本指定數(shù)量的其子層墨状，每個(gè)副本都可能有幾何卫漫，時(shí)間和適用于它的顏色變換。
| 名稱 | 功能 |
|---|---|
| instanceCount | 要?jiǎng)?chuàng)建的副本個(gè)數(shù)(默認(rèn)一個(gè)) |
| preservesDepth | 是否將3D例子系統(tǒng)平面化到一個(gè)圖層(默認(rèn)NO) |
| instanceDelay | 動(dòng)畫時(shí)間延遲肾砂。默認(rèn)為0 |
| instanceTransform | 迭代圖層的位置 CATransform3D對(duì)象(創(chuàng)建方法用:CATransform3DMakeRotation圓形排列列赎，CATransform3DMakeTranslation水平排列) |
| instanceColor | 顏色組件添加到實(shí)例k - 1產(chǎn)生的顏色實(shí)例的調(diào)制顏色k。清晰的顏色(默認(rèn)不透明白色) |
| instanceRedOffset镐确，instanceGreenOffset包吝，instanceBlueOffset，instanceAlphaOffset | 加到實(shí)例K-1的顏色的顏色分量源葫，以產(chǎn)生實(shí)例k的調(diào)制顏色诗越。默認(rèn)為鮮明的色彩（無變化）。 |
等待加載動(dòng)畫
@interface LoadingView : UIView
@end
@implementation LoadingView
-(id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer new];
replicatorLayer.bounds = CGRectMake(0, 0, frame.size.width, frame.size.height);
replicatorLayer.position = CGPointMake(frame.size.width/2, frame.size.height/2);
[self.layer addSublayer:replicatorLayer];
CALayer * circle = [CALayer new];
circle.bounds = CGRectMake(0, 0, 15, 15);
circle.position = CGPointMake(frame.size.width/2, frame.size.height/2 - 55);
circle.cornerRadius = 7.5;
circle.backgroundColor = [UIColor whiteColor].CGColor;
[replicatorLayer addSublayer:circle];
//復(fù)制15個(gè)同樣的layer
replicatorLayer.instanceCount = 15;
CGFloat angle = 2 * M_PI/ 15.;
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
replicatorLayer.instanceDelay = 1./15.;//延遲動(dòng)畫開始時(shí)間 以造成旋轉(zhuǎn)的效果
CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scale.fromValue = @1;
scale.toValue = @0.1;
scale.duration = 1;
scale.repeatCount = HUGE;
circle.transform = CATransform3DMakeScale(0.01, 0.01, 0.01);
[circle addAnimation:scale forKey:nil];
}
return self;
}
@end
總結(jié)：結(jié)合上篇文章體會(huì)一下息堂，一些原來看起來很復(fù)雜的動(dòng)畫其實(shí)挺簡(jiǎn)單的嚷狞。主要是要分解出最原始的狀態(tài)，如果有重復(fù)就像孫悟空一樣拔一根毫毛變出很多的猴子猴孫出來荣堰，一個(gè)大片用了這些主角床未，有了劇本，作為程序猿的你這個(gè)導(dǎo)演可以開拍大片了振坚。
- 原創(chuàng)地址 http://www.reibang.com/p/5d50bbc6b1de
- iOS animation動(dòng)畫的三個(gè)角色(上)http://www.reibang.com/p/88ab3415a3fe
- 如果有興趣歡迎下載DEMO
- 喜歡就點(diǎn)個(gè)贊唄即硼！
