CAReplicatorLayer

CAReplicatorLayer 可以复制自己上面的子图层,一般用于图层倒影的实现。

其属性有如下:

instanceCount : 图层的复制个数

preservesDepth :

instanceDelay:后一个复制图层比前一个复制图层的动画延迟执行时间

instanceRedOffset:复制图层的颜色在red方向上的偏移

instanceGreenOffset:复制图层上的颜色在greed方向上的偏移

instanceBlueOffset:复制图层上的颜色在blue方向上的偏移

instanceAlphaOffset:复制图层能上在alpha通道上的偏移

使用该图层还能非常方便的实现一些有有规律重复运动的动画,比如水波纹的扩散动画、模仿音频播放的音轨动画等

1、模仿音频播放的音轨动画关键代码

- (void)configReplicatorLayer
{
NSInteger count = CGRectGetWidth(self.frame) /(2 * self.layerMargin + layerWidth) ;
CAReplicatorLayer * replicatorLayer = (CAReplicatorLayer *)self.layer;
replicatorLayer.instanceCount = count;
replicatorLayer.instanceColor = self.layerColor.CGColor;
replicatorLayer.instanceTransform = CATransform3DMakeTranslation(self.layerMargin * 2 + layerWidth, 0, 0);
replicatorLayer.preservesDepth = YES;
replicatorLayer.instanceDelay = self.instanceDelay;
replicatorLayer.instanceGreenOffset = 0.1;
}
- (void) initSubLayers
{
self.animationLayer.frame = CGRectMake(self.layerMargin, 0, layerWidth, CGRectGetHeight(self.frame));
self.animationLayer.anchorPoint = CGPointMake(0.5, 1);
self.animationLayer.position = CGPointMake(layerWidth/2.0, CGRectGetHeight(self.frame));
self.animationLayer.backgroundColor = [UIColor greenColor].CGColor;
[self.layer addSublayer:self.animationLayer];
self.animationLayer.transform = CATransform3DScale(self.animationLayer.transform, 1, 0.2, 1);
}
- (void)startAnimation
{
if (_isAnimation){
return ;
}
CABasicAnimation * basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
basicAnimation.toValue = @(1.0);
basicAnimation.fromValue = @(0);
basicAnimation.repeatCount = MAXFLOAT;
basicAnimation.duration = self.duration;
basicAnimation.autoreverses = YES;
basicAnimation.removedOnCompletion = NO;
basicAnimation.fillMode = kCAFillModeForwards;
[self.animationLayer addAnimation:basicAnimation forKey:@"scale"];
_isAnimation = YES;
}

2、 水波纹扩散动画关键动画

- (void) initSubLayers
{
double r = MIN(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))/2.0;
self.animationLayer.frame = CGRectMake(CGRectGetWidth(self.frame)/2.0 - r, CGRectGetHeight(self.frame)/2.0f - r, 2 *r, 2*r);
UIBezierPath * path = [self drawCircle:r center:self.animationLayer.position];
self.animationLayer.path = path.CGPath;
self.animationLayer.transform = CATransform3DMakeScale(0, 0, 1);
[self.layer addSublayer:self.animationLayer];
}
- (void)startAnimation{
if (_isAnimation) {
return;
}
CAAnimationGroup * group = [[CAAnimationGroup alloc] init];
group.duration = self.animationTime;
group.repeatCount = MAXFLOAT;
CABasicAnimation * basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
basicAnimation.toValue = @(1);
basicAnimation.duration = self.animationTime;
basicAnimation.repeatCount = MAXFLOAT;
CAKeyframeAnimation *opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.duration = self.animationTime;
opacityAnimation.values = @[@(0.3), @0.45,@0.6 ,@0];
opacityAnimation.keyTimes = @[@0, @0.2,@0.7, @1];
NSArray * animationArray = @[basicAnimation,opacityAnimation];
group.animations = animationArray;
[self.animationLayer addAnimation:group forKey:@"pulse"];
_isAnimation = YES;
}
- (void)configReplicatorLayer
{
CAReplicatorLayer * rlayer = (CAReplicatorLayer *)self.layer;
rlayer.instanceDelay = self.instanceCount >0? self.animationTime/self.instanceCount:0;
rlayer.instanceCount = self.instanceCount;
}

效果图如下 :截得是静态图。动画效果脑补