簡(jiǎn)介
CAReplicatorLayer 是 CALayer 的子類(lèi)博投，是一個(gè)圖層容器伪煤，可以添加特定的圖層到其中加袋，并復(fù)制出多個(gè)圖層，例如你把一個(gè)單一的形狀抱既，通過(guò)簡(jiǎn)單的設(shè)置职烧，在屏幕上就可以顯示多個(gè)相同的形狀。
你可以使用 CAReplicatorLayer 結(jié)合動(dòng)畫(huà)制作出很多酷炫的動(dòng)畫(huà)。本章利用CAReplicatorLayer 制作幾個(gè)可以充當(dāng)加載提示的指示器蚀之，來(lái)演示下復(fù)制圖層的使用蝗敢。
加載指示器
CAReplicatorLayer
屬性解析：
instanceCount //元素圖層的數(shù)量，默認(rèn)為1
instanceDelay //元素圖層之間的延遲時(shí)間足删，默認(rèn)為0
instanceTransform //可以移動(dòng)寿谴、縮放、旋轉(zhuǎn)元素圖層
使用步驟：
- 創(chuàng)建元素圖層
- 創(chuàng)建動(dòng)畫(huà)對(duì)象失受，并添加到元素圖層上
- 創(chuàng)建復(fù)制圖層
演示示例
- 示例1
圓環(huán)點(diǎn)
- 先使用 CALayer 制作一個(gè)元素圓點(diǎn)
CGSize size = CGSizeMake(100, 100); //大小
UIColor *color = [UIColor redColor]; //顏色
CALayer* itemLayer = [CALayer layer];
itemLayer.bounds = CGRectMake(0, 0, size.width/6, size.width/6);
itemLayer.position = CGPointMake(size.width/2, 5);
itemLayer.cornerRadius = itemLayer.bounds.size.width/2; //圓形
itemLayer.backgroundColor = color.CGColor; //顏色
itemLayer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1); //最初大小縮小為0.1
- 元素圖層添加動(dòng)畫(huà)
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.fromValue = @1;
animation.toValue = @0.1;
animation.duration = 0.5; //動(dòng)畫(huà)時(shí)間
animation.repeatCount = HUGE_VALF;
[itemLayer addAnimation:animation forKey:@"animation"]; //添加到元素圖層上
- 創(chuàng)建CAReplicatorLayer 復(fù)制層
CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
replicatorLayer.frame = CGRectMake(0, 0, size.width, size.height);
replicatorLayer.position = self.view.center;
replicatorLayer.backgroundColor = [UIColor clearColor].CGColor;
// 核心代碼：
NSInteger numOfSpot = 15; //復(fù)制的數(shù)量
replicatorLayer.instanceCount = numOfSpot;
CGFloat angle = (M_PI*2.0)/numOfSpot; //旋轉(zhuǎn)的角度
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1); //旋轉(zhuǎn)效果
replicatorLayer.instanceDelay = 1.0/numOfSpot; //下一個(gè)元素添加的延遲時(shí)間
[replicatorLayer addSublayer:itemLayer]; // 添加元素圓點(diǎn)
[self.view.layer addSublayer:replicatorLayer];
- 示例2
這里寫(xiě)圖片描述
// 關(guān)鍵幀動(dòng)畫(huà)
// 計(jì)算三個(gè)圓點(diǎn)位置
CGPoint p0,p1,p2;
p0 = CGPointMake(size.width/2.0, size.height);
p1 = CGPointMake(size.width/2.0*(1-cos(M_PI*30/180.0)), size.width/2.0*(1-sin(M_PI*30/180.0)));
p2 = CGPointMake(size.width/2.0*(1+cos(M_PI*30/180.0)), size.width/2.0*(1-sin(M_PI*30/180.0)));
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.duration = 1.5;
animation.values = @[[NSValue valueWithCGPoint:p0],[NSValue valueWithCGPoint:p1],[NSValue valueWithCGPoint:p2],[NSValue valueWithCGPoint:p0]];
animation.timingFunctions = @[
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]
]; //運(yùn)動(dòng)速率
animation.repeatCount = HUGE_VALF;
// 添加關(guān)鍵幀動(dòng)畫(huà)
[itemLayer addAnimation:animation forKey:@"animation"];
// 核心代碼
NSInteger numOfSpot = 3; //數(shù)量
replicatorLayer.instanceCount = numOfSpot;
CGFloat angle = (M_PI*2) / numOfSpot; //計(jì)算角度
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1); //旋轉(zhuǎn)
[replicatorLayer addSublayer:itemLayer]; //添加元素圓點(diǎn)
Demo地址
總結(jié)
CAReplicatorLayer 是一個(gè)圖層容器讶泰，可以接受特定的圖層并復(fù)制出多個(gè)圖層。
