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、 水波纹扩散动画关键动画

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

Last updated