Simulating volume vibration bar in iOS Animation

Simulating volume vibration bar in iOS Animation
Volume vibration bar:

If yes?

Create three layers and play the y-axis scaling animation in sequence.

Using CAReplicatorLayer

1. What is CAReplicatorLayer?

A layer that can copy its own child layer. The copied layer has the same attributes, positions, deformation, and animation as the native child layer.

2. CAReplicatorLayer attributes

instanceCount: Total number of child layers (including native child layers) instanceDelay: Specifies the animation delay duration of the Child layer. instanceTransform: The replication sub-layer is deformed (not including the native sub-layer), and each replication sub-layer is relative to the previous one. instanceColor: Child layer color, which conflicts with the background color of the Native Child layer. Therefore, select either of them. instanceRedOffset、instanceGreenOffset、instanceBlueOffset、instanceAlphaOffset: The offset of the color channel. Each replication sub-layer is the offset relative to the previous one. If CAReplicatorLayer is used

1. Create a copy layer, add the music vibration bar layer to the copy layer, and then copy the child layer.

CAReplicatorLayer *layer = [CAReplicatorLayer layer];    layer.frame = CGRectMake(50, 50, 200, 200);    layer.backgroundColor = [UIColor lightGrayColor].CGColor;    [self.view.layer addSublayer:layer];

2. Create a volume vibration bar and set the animation. The animation scales around the bottom and sets the anchor.

    CALayer *bar = [CALayer layer];    bar.backgroundColor = [UIColor redColor].CGColor;    bar.bounds = CGRectMake(0, 0, 30, 100);    bar.position = CGPointMake(15, 200);    bar.anchorPoint = CGPointMake(0.5, 1);    [layer addSublayer:bar];    CABasicAnimation *anim = [CABasicAnimation animation];    anim.keyPath = @transform.scale.y;    anim.toValue = @(0.1);    anim.autoreverses = YES;    anim.repeatCount = MAXFLOAT;    [bar addAnimation:anim forKey:nil];

3. Copy sub-Layer

// Set four sub-layers and three copy layer layers. instanceCount = 4; // sets the relative position of the replication sub-layer. Each X axis differs by 40 layers. instanceTransform = CATransform3DMakeTranslation (40, 0, 0); // sets the animation delay duration layer of the copy child layer. instanceDelay = 0.3;