效果一

Snip20170821_2.png

- (void)replicatorBase{
    UIView *containView = [[UIView alloc]init];
    containView.center = self.view.center;
    containView.bounds = CGRectMake(0, 0, 200, 200);
    containView.backgroundColor = [UIColor redColor];
    [self.view addSubview:containView];
    
    
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(50, 50, 50, 50);
    layer.backgroundColor = [UIColor greenColor].CGColor;
    layer.cornerRadius = 10;
    layer.masksToBounds = YES;
    
    CGFloat replicatorWidth = 50;
    CGFloat replicatorHeight = 50;
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.position = CGPointMake(containView.frame.size.width/2, containView.frame.size.height/2);
    replicatorLayer.bounds = CGRectMake(0, 0, replicatorWidth, replicatorHeight);
    replicatorLayer.backgroundColor = [UIColor yellowColor].CGColor;
    [containView.layer addSublayer:replicatorLayer];
    
    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DRotate(transform, M_PI / 5.0, 0, 0, 1);
    replicatorLayer.instanceTransform = transform;
    replicatorLayer.instanceCount = 20;
    replicatorLayer.instanceDelay = 0.2;
    replicatorLayer.repeatCount = HUGE;
        replicatorLayer.instanceBlueOffset = -0.05;
        replicatorLayer.instanceGreenOffset = -0.05;
    [replicatorLayer addSublayer:layer];
    //replictorLayer 和其上面的layer的关系：replicatorlayer负责创建多个重复的容器，用于存放layer，另一方便负责容器的摆放位置（位移，缩放，旋转），layer在replicationlayer的位置共同决定了最终layer的位置。
}

效果二

Snip20170821_3.png

- (void)replicatorCircleBase{
    UIView *containView = [[UIView alloc]init];
    containView.center = self.view.center;
    containView.bounds = CGRectMake(0, 0, 200, 300);
    containView.backgroundColor = [UIColor redColor];
    [self.view addSubview:containView];
    
    
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(0, 0, 20, 20);
    layer.backgroundColor = [UIColor greenColor].CGColor;
    layer.cornerRadius = 10;
    layer.masksToBounds = YES;
    
    CGFloat replicatorWidth = 50;
    CGFloat replicatorHeight = 100;
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, nil,CGRectMake((replicatorWidth - CGRectGetWidth(containView.frame))/2, (replicatorHeight - CGRectGetHeight(containView.frame))/2, CGRectGetWidth(containView.frame), CGRectGetHeight(containView.frame)));
    //圆周运动和containview和replicatorlayer两者都有关系，具体原因无法确定。
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.duration = 4;
    animation.repeatCount = HUGE;
    animation.path = path;
    [layer addAnimation:animation forKey:nil];
    
    
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.position = CGPointMake(containView.frame.size.width/2, containView.frame.size.height/2);
    replicatorLayer.bounds = CGRectMake(0, 0, replicatorWidth, replicatorHeight);
    replicatorLayer.backgroundColor = [UIColor yellowColor].CGColor;
    [containView.layer addSublayer:replicatorLayer];
    
    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DRotate(transform, M_PI / 5.0, 0, 0, 1);
    //        replicatorLayer.instanceTransform = transform;
    replicatorLayer.instanceCount = 20;
    replicatorLayer.instanceDelay = 0.2;
    replicatorLayer.repeatCount = HUGE;
    //    replicatorLayer.instanceBlueOffset = -0.05;
    //    replicatorLayer.instanceGreenOffset = -0.05;
    [replicatorLayer addSublayer:layer];
}

效果三

Snip20170821_4.png

- (void)replicatorCircleHigh{
    UIView *containView = [[UIView alloc]init];
    containView.center = self.view.center;
    containView.bounds = CGRectMake(0, 0, 200, 200);
    containView.backgroundColor = [UIColor redColor];
    [self.view addSubview:containView];
    
    
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(50, 50, 20, 20);
    layer.backgroundColor = [UIColor greenColor].CGColor;
    layer.cornerRadius = 10;
    layer.masksToBounds = YES;
    layer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1);
    
    CGFloat replicatorWidth = 50;
    CGFloat replicatorHeight = 50;
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.duration = 2;
    animation.repeatCount = HUGE;
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)];
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 0.1)];
    [layer addAnimation:animation forKey:nil];
    
    
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.position = CGPointMake(containView.frame.size.width/2, containView.frame.size.height/2);
    replicatorLayer.bounds = CGRectMake(0, 0, replicatorWidth, replicatorHeight);
    replicatorLayer.backgroundColor = [UIColor yellowColor].CGColor;
    [containView.layer addSublayer:replicatorLayer];
    
    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DRotate(transform, 2*M_PI/20.0, 0, 0, 1);
    // M_2_PI =2/π
    replicatorLayer.instanceTransform = transform;
    replicatorLayer.instanceCount = 20;
    replicatorLayer.instanceDelay = 0.1;
    replicatorLayer.repeatCount = HUGE;
    //    replicatorLayer.instanceBlueOffset = -0.05;
    //    replicatorLayer.instanceGreenOffset = -0.05;
    [replicatorLayer addSublayer:layer];

}

效果四

Snip20170821_5.png

- (void)replicatorCircleHigh2{
    UIView *containView = [[UIView alloc]init];
    containView.center = self.view.center;
    containView.bounds = CGRectMake(0, 0, 200, 200);
    containView.backgroundColor = [UIColor redColor];
    [self.view addSubview:containView];
    
    
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(50, 50, 10, 30);
    layer.backgroundColor = [UIColor greenColor].CGColor;
    
    CGFloat replicatorWidth = 50;
    CGFloat replicatorHeight = 50;
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.duration = 2;
    animation.repeatCount = HUGE;
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)];
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 0.1)];
//    [layer addAnimation:animation forKey:nil];
    
    
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.position = CGPointMake(containView.frame.size.width/2, containView.frame.size.height/2);
    replicatorLayer.bounds = CGRectMake(0, 0, replicatorWidth, replicatorHeight);
    replicatorLayer.backgroundColor = [UIColor yellowColor].CGColor;
    [containView.layer addSublayer:replicatorLayer];
    
    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DRotate(transform, 2*M_PI/20.0, 0, 0, 1);
    replicatorLayer.instanceTransform = transform;
    replicatorLayer.instanceCount = 20;
    replicatorLayer.instanceDelay = 0.1;
    replicatorLayer.repeatCount = HUGE;
    [replicatorLayer addSublayer:layer];

}

效果五

Snip20170821_1.png

- (void)indictor{
    UIView *containView = [[UIView alloc]init];
    containView.center = self.view.center;
    containView.bounds = CGRectMake(0, 0, 200, 200);
    containView.backgroundColor = [UIColor redColor];
    [self.view addSubview:containView];
    
    CGFloat layerWidth = 10.0;
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(CGRectGetMidX(containView.bounds), 0, layerWidth, layerWidth*2.5);
    layer.backgroundColor = [UIColor greenColor].CGColor;
    layer.opacity = 0.f;
    
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    basicAnimation.fromValue = @1;
    basicAnimation.toValue = @0;
    basicAnimation.duration = 1.f;
    basicAnimation.repeatCount = HUGE;
    [layer addAnimation:basicAnimation forKey:nil];
    
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.frame = containView.bounds;
    replicatorLayer.instanceCount = 30.f;
    replicatorLayer.instanceDelay = 1/30.f;
    replicatorLayer.instanceTransform = CATransform3DMakeRotation(2*M_PI/30, 0, 0, 1);
    [containView.layer addSublayer:replicatorLayer];
    [replicatorLayer addSublayer:layer];
}

效果六

Snip20170821_6.png

- (void)waveAnimation{
    UIView *view = [[UIView alloc]init];
    view.center = self.view.center;
    view.bounds = CGRectMake(0, 0, self.view.frame.size.width, 300);
    view.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:view];
    
    CGFloat width = 15.f;
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.bounds = CGRectMake(0, 0, width, width);
    shapeLayer.position = CGPointMake(self.view.bounds.size.width/2, 50);
    shapeLayer.backgroundColor = [UIColor greenColor].CGColor;
    shapeLayer.cornerRadius = width/2;
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    CATransform3D scaleTransform = CATransform3DMakeScale(100, 100, 100);
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    animation.toValue = [NSValue valueWithCATransform3D:scaleTransform];
    animation.duration = 2.f;
    
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.toValue = @(0);
    opacityAnimation.duration = 2.f;
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[animation,opacityAnimation];
    group.duration = 2.f;
    group.repeatCount = CGFLOAT_MAX;
    [shapeLayer addAnimation:group forKey:nil];
    
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    [replicatorLayer addSublayer:shapeLayer];
    replicatorLayer.instanceCount = 4;
    replicatorLayer.instanceDelay = 0.5f;
    [view.layer addSublayer:replicatorLayer];
}

效果七

Snip20170821_7.png

- (void)threePointScale{
    UIView *containView = [[UIView alloc]init];
    containView.center = self.view.center;
    containView.bounds = CGRectMake(0, 0, 200, 200);
    containView.backgroundColor = [UIColor redColor];
    [self.view addSubview:containView];
    
    CGFloat interval = 5;
    CGFloat radius = (100 - 2*interval)/3;
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(0, (100 - radius)/2, radius, radius);
    layer.backgroundColor = [UIColor greenColor].CGColor;
    layer.cornerRadius = radius/2;
    layer.masksToBounds = YES;
    
    CGFloat replicatorWidth = 100;
    CGFloat replicatorHeight = 100;
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.duration = 0.9;
    animation.repeatCount = HUGE;
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 0)];
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.2, 0.2, 0)];
    [layer addAnimation:animation forKey:nil];
    
    
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.position = CGPointMake(containView.frame.size.width/2, containView.frame.size.height/2);
    replicatorLayer.bounds = CGRectMake(0, 0, replicatorWidth, replicatorHeight);
    replicatorLayer.backgroundColor = [UIColor yellowColor].CGColor;
    [containView.layer addSublayer:replicatorLayer];
    
    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DMakeTranslation(radius + interval, 0, 0);
    replicatorLayer.instanceTransform = transform;
    replicatorLayer.instanceCount = 3;
    replicatorLayer.instanceDelay = 0.2;
    replicatorLayer.repeatCount = HUGE;
    [replicatorLayer addSublayer:layer];
}

效果八

Snip20170821_8.png

- (void)replicatorLayerTriangle{
    UIView *containView = [[UIView alloc]init];
    containView.center = self.view.center;
    containView.bounds = CGRectMake(0, 0, 200, 200);
    containView.backgroundColor = [UIColor redColor];
    [self.view addSubview:containView];
    
    CGFloat radius = 100/4;
    CGFloat transX = 100 - radius;
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(0, 0, radius, radius);
    layer.backgroundColor = [UIColor greenColor].CGColor;
    layer.cornerRadius = radius/2;
    layer.masksToBounds = YES;
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.duration = 1;
    animation.repeatCount = HUGE;
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, 0, 0, 0, 0)];
    CATransform3D toValue = CATransform3DTranslate(CATransform3DIdentity, transX, 0.0, 0.0);
    toValue = CATransform3DRotate(toValue,120.0*M_PI/180.0, 0.0, 0.0, 1.0);
    animation.toValue = [NSValue valueWithCATransform3D:toValue];
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [layer addAnimation:animation forKey:nil];
    
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];

    CGFloat ceterx = containView.frame.size.width/2 - transX/2;
    //等边三角形理论支撑
    CGFloat cetery = containView.frame.size.height/2 - (1/3.0)*(transX/2)*sqrtf(3.0);
    replicatorLayer.position = CGPointMake(ceterx, cetery);
    replicatorLayer.bounds = CGRectMake(0, 0, radius, radius);
    replicatorLayer.backgroundColor = [UIColor yellowColor].CGColor;
    [containView.layer addSublayer:replicatorLayer];
    
    CATransform3D transform = CATransform3DIdentity;
    //这里有个技巧，第二个点和第一个点平行又和第一个点成120度夹角。否则动画效果看起来特别别扭。如果是四个点也是同样的道理
    transform = CATransform3DTranslate(transform, transX, 0, 0);
    transform = CATransform3DRotate(transform, 120.0*M_PI/180.0, 0, 0, 1);
    replicatorLayer.instanceTransform = transform;
    replicatorLayer.instanceCount = 3;
    replicatorLayer.instanceDelay = 0.0;
    replicatorLayer.repeatCount = HUGE;
    [replicatorLayer addSublayer:layer];
}

效果九

Snip20170821_9.png

- (void)replicatorLayerManyPoint{
    UIView *containView = [[UIView alloc]init];
    containView.center = self.view.center;
    containView.bounds = CGRectMake(0, 0, 200, 200);
    containView.backgroundColor = [UIColor redColor];
    [self.view addSubview:containView];

    NSInteger column = 3;
    CGFloat between = 5.0;
    CGFloat radius = (100 - between * (column - 1))/column;
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(0, 0, radius, radius);
    layer.backgroundColor = [UIColor greenColor].CGColor;
    layer.cornerRadius = radius/2;
    layer.masksToBounds = YES;
    
    
    CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    alphaAnimation.fromValue = @(1.0);
    alphaAnimation.toValue = @(0.0);
    
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
    scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 0)];
    scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.2, 0.2, 0)];
    scaleAnimation.repeatCount = HUGE;
    scaleAnimation.duration = 0.6;
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[alphaAnimation,scaleAnimation];
    group.repeatCount = HUGE;
    group.duration = 1.f;
    [layer addAnimation:group forKey:nil];

    CAReplicatorLayer *replicatorLayerX = [CAReplicatorLayer layer];
    replicatorLayerX.backgroundColor = [UIColor yellowColor].CGColor;
    replicatorLayerX.frame = CGRectMake(0, 0, 100, radius);
    replicatorLayerX.instanceDelay = 0.3;
    replicatorLayerX.instanceCount = 3;
    replicatorLayerX.instanceTransform = CATransform3DTranslate(CATransform3DIdentity, radius+between, 0, 0);
    [replicatorLayerX addSublayer:layer];
    
    CAReplicatorLayer *replicatorLayerY = [CAReplicatorLayer layer];
    replicatorLayerY.backgroundColor = [UIColor cyanColor].CGColor;
    replicatorLayerY.position = CGPointMake(containView.frame.size.width/2, containView.frame.size.height/2);
    replicatorLayerY.bounds = CGRectMake(0, 0, 100, 100);
    replicatorLayerY.instanceDelay = 0.3;
    replicatorLayerY.instanceCount = 3;
    replicatorLayerY.instanceTransform = CATransform3DTranslate(CATransform3DIdentity, 0, radius+between, 0);
    [replicatorLayerY addSublayer:replicatorLayerX];
    [containView.layer addSublayer:replicatorLayerY];

}