iOS-音乐震动条效果

一.代码如下:

//  ViewController.m

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *contentV;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    
    //复制层
    CAReplicatorLayer *repL = [CAReplicatorLayer  layer];
    repL.frame = self.contentV.bounds;
    [self.contentV.layer addSublayer:repL];
    //复制的份数
    repL.instanceCount = 5;
    //形变操作
    repL.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
    //设置复制出来的子层动画的延时执行时长
    repL.instanceDelay = 1;
    
    //创建一个振动条
    CALayer *layer = [CALayer layer];
    layer.backgroundColor = [UIColor redColor].CGColor;
    layer.bounds = CGRectMake(0, 0, 30, 100);
    layer.anchorPoint = CGPointMake(0, 1);
    layer.position = CGPointMake(0, self.contentV.bounds.size.height);
    [repL addSublayer:layer];
    
    //添加动画
    CABasicAnimation *anim = [CABasicAnimation animation];
    anim.keyPath = @"transform.scale.y";
    anim.toValue = @0;
    anim.repeatCount = MAXFLOAT;
    anim.duration = 1;
    anim.autoreverses = YES;
    [layer addAnimation:anim forKey:nil];
    
       
}

@end

效果图如下:

笔记:

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

1.演 界
分析,改它的缩放,然后再还原

2.搭建界宽度200, 度:200,拖线

3.添加CALayer,振动条,设置尺,,
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.添加动画
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];

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

设置锚点

layer.anchorPoint = CGPointMake(0, 1);
设置position
layer.position = CGPointMake(0, _contentsView.bounds.size.height);不能够再frame,设置它的bounds
layer.bounds = CGRectMake(0, 0, barW, barW);

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

5.使 复制层复制层可以把它 的所有 层给复制.

添加复制层, 先先要让这个层显 出来.复制层必须加到 个层 才能复制它的 层.
不需要设置它的尺,需要设置它的颜. 层超过 层也能够显,所以不 设置尺.

CAReplicatorLayer *replicator = [CAReplicatorLayer layer];将复制层添加到_contententView.layer[_contentsView.layer addSublayer:replicator];

instanceCount:表 原来层中的所有 层复制的份数replicator.instanceCount = 2;

在复制层中添加 层

[replicator addSublayer:layer];运 发现没有两个,为什么?

其实已经有两个了,两个的位置,尺 都是 样的,所以看着只有 个.

解决办法:让 层有偏移位置instanceTransform:复制出来的层,相对上 个 层的形变replicator.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);

现在复制出来的层,执 的动画,都 样,怎么样才能有错乱的感觉?相对于上 个层的动画延时

replicator.instanceDelay = 0.3;

使 它,应该把原始层的颜 设置为 replicator.instanceColor = [UIColor greenColor].CGColor;