Using IOS animation to simulate the realization of volume vibrating bar _ios

iOS animation to simulate the volume vibration bar, that is, the use of Careplicatorlayer implementation, the following detailed introduction of Careplicatorlayer and implementation methods.

Volume Vibrating Bar

Effect Chart:

How to achieve it?

Create 3 layer, play the y-axis zoom animation sequentially

Using Careplicatorlayer to realize

1, what is Careplicatorlayer?

A layer that can duplicate its own child layer, and the copied layer and the primary child layer have the same attributes, position, deformation, and animation.

2, Careplicatorlayer Property

• InstanceCount: Total number of children (including native child layer)
• Instancedelay: Replication Child Layer Animation delay length
• Instancetransform: Replicates the child layer deformation (excluding the native child layer), each copy child layer is relative to the previous one.
• Instancecolor: The color of the child layer will conflict with the background color of the native child, so the two choices are set.
• Instanceredoffset, Instancegreenoffset, Instanceblueoffset, Instancealphaoffset: Color channel offset, each copy child layer is relative to the previous offset.
• If you use Careplicatorlayer to implement

1. First create the copy layer, the music vibration bar layer added to the copy layer, and then copy the child layer is good.

Careplicatorlayer *layer = [Careplicatorlayer layer];

 Layer.frame = CGRectMake (M, m);

 Layer.backgroundcolor = [Uicolor Lightgraycolor]. Cgcolor;

 [Self.view.layer Addsublayer:layer];

2. First create a volume vibration bar, and set the animation, animation is around the bottom zoom, set anchor point

 Calayer *bar = [Calayer layer];

 Bar.backgroundcolor = [Uicolor Redcolor]. Cgcolor;

 Bar.bounds = CGRectMake (0, 0, m);

 Bar.position = Cgpointmake (in);

 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 child layer

Set 4 child layers, 3 duplicate layers
 layer.instancecount = 4;

 Sets the relative position of the replication child layer, each x-axis difference of
 layer.instancetransform = catransform3dmaketranslation (0, 0);

 Set the delay animation of the replication child
 Layer.instancedelay = 0.3;

Through the above introduction of the Careplicatorlayer and the use of Careplicatorlayer to achieve the simulation of the volume of the case of the vibration bar demo, I hope to be helpful.