快捷導(dǎo)航

基于iOS實(shí)現(xiàn)音樂(lè)震動(dòng)條效果

更新時(shí)間：2017年07月22日 11:55:08 作者：憤怒的小明

這篇文章主要為大家詳細(xì)介紹了基于iOS實(shí)現(xiàn)音樂(lè)震動(dòng)條效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、簡(jiǎn)單分析

音樂(lè)震動(dòng)條不需要與用戶交互。我們可以使用復(fù)制層來(lái)操作。添加震動(dòng)條。添加動(dòng)畫。

復(fù)制層說(shuō)明

//創(chuàng)建復(fù)制層
-(void)createRepl{
 //復(fù)制層
 CAReplicatorLayer * repL = [CAReplicatorLayer layer];
 repL.frame = self.contentV.bounds;
 //復(fù)制6份
 repL.instanceCount = 6;
 //形變，每一個(gè)形變都是相對(duì)于上一個(gè)復(fù)制出來(lái)的子層開(kāi)始的
 repL.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
 //動(dòng)畫延時(shí)執(zhí)行
 repL.instanceDelay = 0.5;
 ///要設(shè)置復(fù)制層的顏色 原始層的顏色要設(shè)為白色.
 repL.instanceColor = [UIColor redColor].CGColor;
 [self.contentV.layer addSublayer:repL];

 self.repL = repL;
}

二、代碼

//
// ViewController.m
// 03_UIView75_音樂(lè)震動(dòng)條
//
// Created by 杞文明 on 17/7/21.
// Copyright © 2017年 杞文明. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *contentV;
@property (weak,nonatomic) CAReplicatorLayer * repL;
@property (weak,nonatomic) CALayer * layer;
@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];

 //1.創(chuàng)建復(fù)制層次
 [self createRepl];

 //2.添加音量震動(dòng)條
 [self addVoiceBar];

 //3.添加動(dòng)畫
 [self addAnimation];
}


//創(chuàng)建復(fù)制層
-(void)createRepl{
 //復(fù)制層
 CAReplicatorLayer * repL = [CAReplicatorLayer layer];
 repL.frame = self.contentV.bounds;
 //復(fù)制6份
 repL.instanceCount = 6;
 //形變，每一個(gè)形變都是相對(duì)于上一個(gè)復(fù)制出來(lái)的子層開(kāi)始的
 repL.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
 //動(dòng)畫延時(shí)執(zhí)行
 repL.instanceDelay = 0.5;
 ///要設(shè)置復(fù)制層的顏色 原始層的顏色要設(shè)為白色.
 repL.instanceColor = [UIColor redColor].CGColor;
 [self.contentV.layer addSublayer:repL];

 self.repL = repL;
}

//添加音量震動(dòng)條
-(void)addVoiceBar{
 CALayer * layer = [CALayer layer];
 layer.frame = CGRectMake(0, self.contentV.bounds.size.height-150, 30, 150);
 layer.backgroundColor = [UIColor whiteColor].CGColor;

 layer.position = CGPointMake(0, self.contentV.bounds.size.height);
 layer.anchorPoint = CGPointMake(0, 1);

 [self.repL addSublayer:layer];
 self.layer = layer;
}

//添加動(dòng)畫
-(void)addAnimation{
 //添加動(dòng)畫 對(duì)y方向縮放
 CABasicAnimation * anim = [CABasicAnimation animation];
 //設(shè)置屬性
 anim.keyPath = @"transform.scale.y";
 anim.toValue = @0;
 anim.repeatCount = MAXFLOAT;
 anim.autoreverses = YES;
 anim.duration = 0.5;
 [self.layer addAnimation:anim forKey:nil];
}

@end

三、圖示