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;