Music Vibration Bar

02-Music Vibration Bar

Analysis of the vibration bar boundary:

每一个条都在做一个上下缩放的动画.而且不需要与用户交互.所以每一个震动条可以  CALayer来做.发现每一个都非常相似.所以先搞定一个,然后其它的直接复制就可以了.

1. Demo interface

分析,改它的缩放, 然后再还原

2. Build the interface

宽度200, 度:200,拖线

3. Add Calayer, Vibration bar, set size, size

CALayer *layer = [CALayer layer];设置背景 layer.backgroundColor = [UIColor redColor].CGColor; 设置尺寸 CGFloat barH = 120;CGFloat barW = 30;CGFloat X = 0;CGFloat Y = _contentsView.bounds.size.height - barH; layer.frame = CGRectMake(X, Y, barW, barH); [_contentsView.layer addSublayer:layer];

4. Adding animations

4.1添加高度缩小后,马上还原 为什么选用核心动画? 给图层做动画用核心动画,不需要与用户做交互.4.2采用哪一种核心动画?把它的缩放改成某个值就好了.选用CABasicAnimationCABasicAnimation *anim = [CABasicAnimation animation]; 动画时 anim.duration = 2;形变缩放动画anim.keyPath = @"transform.scale"; 改为0,让它缩 anim.toValue = @0;让动画一直执行 anim.repeatCount = MAXFLOAT;反转回去anim.autoreverses = YES;[layer addAnimation:anim forKey:nil];

Run Discovery:

不是我们想要的上下进行缩放?它是绕着中心点去缩放? 所以要设置锚点. 设置锚点就不能设置frame了, 要设置Position

Set anchor points

layer.anchorPoint = CGPointMake(0, 1);

Set position

Can not use frame again, set its bounds

layer.bounds = CGRectMake(0, 0, barW, barW);

Run Discovery:

是不是 x轴 和 Y轴 起缩放了 不需要X轴缩放,所以更改动画的KeyPathanim.keyPath = @"transfrom.scale.y"

5. Using the replication layer

The copy layer can replicate all the sub-layers inside it.

添加复制层,首先先要让这个层显示出来. 复制层必须加到一个层里面才能复制它的子层.不需要设置它的尺寸, 需要设置它的颜色.子层超过父层也能够显示,所以不用设置尺寸.CAReplicatorLayer *replicator = [CAReplicatorLayer layer]; 将复制层添加到_contententView.layer [_contentsView.layer addSublayer:replicator];instanceCount:表示原来层中的所有子层复制的份数 replicator.instanceCount = 2;在复制层中添加子层[replicator addSublayer:layer]; 运行发现没有两个,为什么?其实已经有两个了,两个的位置,尺寸都是一样的,所以看着只有一个.

Workaround:

让子层有偏移位置 instanceTransform:复制出来的层,相对上一个子层的形变replicator.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);现在复制出来的层,执行的动画,都一样, 怎么样才能有错乱的感觉? 相对于上一个层的动画延时replicator.instanceDelay = 0.3;使用它,应该把原始层的颜色设置为白色replicator.instanceColor = [UIColor greenColor].CGColor;

Music Vibration Bar