音量条效果.gif
CAReplicatorLayer
1 CAReplicatorLayer的目的是为了高效生成许多相似的图层.它是可以复制自己子层的layer,并且复制出来的layer和原生子层有同样的属性，位置，形变，动画。
2 CAReplicatorLayer的属性
//拷贝的次数
@property NSInteger instanceCount;
//是否开启景深效果
@property BOOL preservesDepth;
//当CAReplicatorLayer的子Layer层进行动画的时候，拷贝的副本执行动画的延时
@property CFTimeInterval instanceDelay;
//拷贝副本的3D变换
@property CATransform3D instanceTransform;
//拷贝副本的颜色变换
@property(nullable) CGColorRef instanceColor;
//每个拷贝副本的颜色偏移参数
@property float instanceRedOffset;
@property float instanceGreenOffset;
@property float instanceBlueOffset;
//每个拷贝副本的透明度偏移参数
@property float instanceAlphaOffset;
本文一开始的例子就是通过CAReplicatorLayer来实现的.创建新项目,在控制器的viewDidLoad方法中添加如下代码
- (void)viewDidLoad {
[super viewDidLoad];
//创建图层
CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
//设置图层的位置为控制器view的中心点
replicator.position = self.view.center;
//设置复制层的大小(任意取值)
replicator.bounds = CGRectMake(0, 0, 250, 250);
//设置复制层的背景颜色
replicator.backgroundColor = [UIColor lightGrayColor].CGColor;
//将复制层添加到控制器的layer上
[self.view.layer addSublayer:replicator];
//创建一个振动层
CALayer *vibrateLayer = [CALayer layer];
//振动层的宽高
CGFloat width = 25;
CGFloat height = 100;
vibrateLayer.bounds = CGRectMake(0, 0, width, height);
//给定振动层的锚点
vibrateLayer.anchorPoint = CGPointMake(0.5, 1);
// 设置振动层的位置
vibrateLayer.position = CGPointMake(width * 0.5, replicator.bounds.size.height);
//设置振动层的圆角
vibrateLayer.cornerRadius = 10;
//设置振动层的背景颜色
vibrateLayer.backgroundColor = [UIColor magentaColor].CGColor;
//将需要被复制的振动层添加到复制层上
[replicator addSublayer:vibrateLayer];
//创建帧动画
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
//动画执行的持续时间
anim.duration = 1;
//修改的属性
anim.values = @[@(1),@(0.5),@(0)];
//旋转后再旋转到原来的位置,反极性开始
anim.autoreverses = YES;
anim.repeatCount = MAXFLOAT;
[vibrateLayer addAnimation:anim forKey:nil];
//设置复制层需要复制的个数
replicator.instanceCount = 4;
//设置复制出来子层的位移
replicator.instanceTransform = CATransform3DMakeTranslation(50, 0, 0);
// 执行动画的延迟
replicator.instanceDelay = 0.1;
//改变颜色
replicator.instanceAlphaOffset = - 0.1;
replicator.instanceRedOffset = -0.2;
}
