Today, I'd like to explain to the students the function of realizing a volume vibrating bar through the core animation. If you don't talk about much nonsense, go straight to the code and watch the demonstration video first

How to realize the volume vibrating bar?

• Create 3 layer s and play the y-axis scale animation in order

Implementation with CAReplicatorLayer

• 1. What is CAReplicatorLayer?
  A layer that can copy its own sub layer, and the copied layer has the same attributes, position, deformation and animation as the original sub layer.
• 2. CAReplicatorLayer property
  instanceCount: total number of sublayers (including original sublayers)
  instanceDelay: delay time of copying sub layer animation
  instanceTransform: copy sublayer deformation (excluding the original sublayer). Each copy sublayer is relative to the previous one.
  instanceColor: the sub layer color conflicts with the background color of the original sub layer, so choose one of the settings.
  instanceRedOffset, instanceGreenOffset, instanceBlueOffset, instanceAlphaOffset: color channel offset. Each copy sublayer is the offset relative to the previous one.

How to use CAReplicatorLayer?

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 0. Create background view
    UIView *bgView = [[UIView alloc] init];
    bgView.backgroundColor = [UIColor grayColor];
    CGFloat bgViewX = self.view.frame.size.width * 0.5  ;
    CGFloat bgViewY = 300;
    CGFloat bgViewW = 200;
    CGFloat bgViewH = 200;
    bgView.center = CGPointMake(bgViewX, bgViewY);
    bgView.bounds = CGRectMake(0, 0, bgViewW, bgViewH);
    [self.view addSubview:bgView];
    
    // 1. Create a copy layer to copy all the sub layers in the layer
    CAReplicatorLayer *repL = [CAReplicatorLayer layer];
    repL.frame = bgView.bounds;
    [bgView.layer addSublayer:repL];
    
    CALayer *layer = [CALayer layer];
    layer.anchorPoint = CGPointMake(0.5, 1);
    layer.position = CGPointMake(15, bgView.bounds.size.height);
    layer.bounds = CGRectMake(0, 0, 30, 150);
    layer.backgroundColor = [UIColor whiteColor].CGColor;
    [repL addSublayer:layer];
    
    // 2. Create animation
    CABasicAnimation *anim = [CABasicAnimation animation];
    anim.keyPath = @"transform.scale.y";
    anim.toValue = @0.1;
    anim.duration = 0.5;
    anim.repeatCount = MAXFLOAT;
    
    // Animate reverse
    anim.autoreverses = YES;
    [layer addAnimation:anim forKey:nil];
    
    // Total number of sublayers in replication layer
    // instanceCount: indicates how many sub layers are in the replication layer, including the original layer
    repL.instanceCount = 4;
    
    // Set the copy sublayer offset, excluding the original layer, relative to the original layer x offset
    repL.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
    
    // Set copy layer animation delay time
    repL.instanceDelay = 0.1;
    
    // If you set the original layer background color, you do not need to set this property
    repL.instanceColor = [UIColor greenColor].CGColor;
    
    repL.instanceGreenOffset = -0.3;
}