脉动麦克风动画

由于这个动画只有在真机上才可以看到gif效果,所以贴上几张图让各位看看运行的效果。


IMG_0396.jpg

IMG_0394.jpg

IMG_0397.jpg

IMG_0398.jpg

从效果图上可以看出,此动画需要的组件有:
1.好看的话筒
2.两边向外延伸的线条
3.中间的波纹的延伸

此动画需要用到的知识有:
1.UIView 的Animation
2.开启和关闭系统的麦克风

注意:该动画在真机上可以运行,如果在模拟器上的话,会运行不起。

在写代码之前记住引入,当然你得添加那个AVFoundation框架

#import <AVFoundation/AVFoundation.h>

定义视图上的组件:

//话筒的视图
@property (nonatomic, strong) UIImageView *imageView;
//话筒右侧的延伸线条
@property (nonatomic, strong) DyLineView *lineView;
//话筒左侧的延伸线条
@property (nonatomic, strong) DyLineView *leftLineView;
//记录语音的对象
@property (nonatomic, strong) AVAudioRecorder *recorder;
//向外延伸的波纹视图
@property (nonatomic, strong) UIView *RippleView;

各组件对象的创建:

- (void)configView 
{
    self.RippleView = [[UIView alloc] initWithFrame:(CGRect){0,0,90,90}];
    self.RippleView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.8];
    self.RippleView.layer.cornerRadius = 45;
    self.RippleView.center = self.view.center;
    self.RippleView.layer.masksToBounds=true;
    self.RippleView.alpha=0;
    [self imageWithPoint:self.view.center];
    
    self.imageView = [UIImageView new];
    self.imageView.size = CGSizeMake(60, 60);
    self.imageView.image = [UIImage imageNamed:@"input_btn_recording"];
    [self.view addSubview:self.imageView];
    self.imageView.center = self.view.center;
    
    self.lineView = [[DyLineView alloc] initWithFrame:CGRectMake(self.view.centerX + 40, 0 , 100, 60)];
    self.lineView.centerY = self.view.centerY;
    [self.view addSubview:self.lineView];
    
    self.leftLineView = [[DyLineView alloc] initWithFrame:CGRectMake(0, 0 , 100, 60)];
    self.leftLineView.right = self.imageView.left - 10;
    self.leftLineView.centerY = self.view.centerY;
    [self.view addSubview:self.leftLineView];
    
    NSError *setCategoryError = nil;
    [[AVAudioSession sharedInstance] setActive:YES error:nil];
    [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayAndRecord error: &setCategoryError];
    
    NSDictionary *settings = [NSDictionary dictionaryWithObjectsAndKeys:
                              [NSNumber numberWithFloat: 44100.0],                 AVSampleRateKey,
                              [NSNumber numberWithInt: kAudioFormatAppleLossless], AVFormatIDKey,
                              [NSNumber numberWithInt: 1],                         AVNumberOfChannelsKey,
                              [NSNumber numberWithInt: AVAudioQualityMax],         AVEncoderAudioQualityKey,
                              nil];
    NSError *error;
    self.recorder = [[AVAudioRecorder alloc] initWithURL:[NSURL fileURLWithPath:@"dev/null"] settings:settings error:&error];
    if (self.recorder) {
        [self.recorder prepareToRecord];
        self.recorder.meteringEnabled = YES;
    }
    else{
        NSLog(@"init recorder failed");
    }
    
    [self startRecordIfMicrophoneEnabled];
}

下面就开启麦克风操作

- (void)startRecordIfMicrophoneEnabled
{
    if ([[AVAudioSession sharedInstance] respondsToSelector:@selector(requestRecordPermission:)]) {
        __weak typeof(self) wself = self;
        [[AVAudioSession sharedInstance] performSelector:@selector(requestRecordPermission:) withObject:^(BOOL granted) {
            if (granted) {
                // Microphone enabled code
                NSLog(@"Microphone is enabled..");
                
                [wself startRecord];
            }
            else {
                // Microphone disabled code
                NSLog(@"Microphone is disabled..");
                
                // We're in a background thread here, so jump to main thread to do UI work.
                dispatch_async(dispatch_get_main_queue(), ^{
                    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"麦克风不可用" message:@"该应用需要访问您的麦克风,请到设置/隐私/麦克风,开启" delegate:nil cancelButtonTitle:nil otherButtonTitles:nil, nil];
                    [alertView show];
                });
            }
        }];
    }
    else{
        [self startRecord];
    }
}

开启录音并根据麦克风的声音的分贝来控制话筒两侧的线条的高度

- (void)startRecord
{
    [self.recorder record];
    [self performSelector:@selector(getDecibelValue) withObject:nil afterDelay:0];
}

- (void)getDecibelValue
{
    
    [self.recorder updateMeters];
    
    float   level;                // The linear 0.0 .. 1.0 value we need.
    
    float   minDecibels = -60; // Or use -60dB, which I measured in a silent room.
    
    float   decibels = [self.recorder averagePowerForChannel:0];
    
    if (decibels < minDecibels)
    {
        level = 0.0f;
    }
    
    else if (decibels >= 0.0f)
    {
        level = 1.0f;
    }
    else
    {
        float   root            = 2.0f;
        
        float   minAmp          = powf(10.0f, 0.05f * minDecibels);
        
        float   inverseAmpRange = 1.0f / (1.0f - minAmp);
        
        float   amp             = powf(10.0f, 0.05f * decibels);
        
        float   adjAmp          = (amp - minAmp) * inverseAmpRange;
    
        level = powf(adjAmp, 1.0f / root);
    }
    [self.lineView addWaveWithDecibelValue:level * 100 directionLeft:NO];
    [self.leftLineView addWaveWithDecibelValue:level * 100 directionLeft:YES];
    [self performSelector:@selector(getDecibelValue) withObject:nil afterDelay:0.1];
    NSLog(@"平均值 %f", level * 120);
}

接着是话筒的波纹动画,利用UIView的Animation和视图的alpha来进行实现。

- (void)imageWithPoint:(CGPoint)point
{
    CGPoint location = self.view.center;
    [self.view addSubview:self.RippleView];
    self.RippleView.layer.zPosition = -1;
    self.RippleView.center = location;
    self.RippleView.transform = CGAffineTransformMakeScale(0.5, 0.5);
    [UIView animateWithDuration:1.0
                     animations:^{
                         self.RippleView.alpha=1;
                         
                     }];
    [UIView animateWithDuration:1.0
                          delay:0
                        options:UIViewAnimationOptionCurveEaseInOut
                     animations:^{
                         self.RippleView.transform = CGAffineTransformMakeScale(1,1);
                         self.RippleView.alpha=0;
                         self.view.alpha=1;
                     } completion:^(BOOL finished) {
                         [self.RippleView removeFromSuperview];
                         [self performSelector:@selector(imageWithPoint:) withObject:nil afterDelay:1.0];
                     }];
    
}

最后是关闭录音对象,如果不关闭就会发生内存泄露。

- (void)viewDidDisappear:(BOOL)animated
{
    [super viewDidDisappear:animated];
    [self.recorder stop];
    [NSObject cancelPreviousPerformRequestsWithTarget:self];
}

这个类中用到了DyLineView这个类,现在就看看这个线条的延伸是怎么实现的。
在这个类中一个公有方法:

- (void)addWaveWithDecibelValue:(NSInteger)decibel directionLeft:(BOOL)left
{
    NSInteger level = ceilf(decibel / 20.0);
    if (level > 0) {
        if (level > 5) {
            level = 5;
        }
        if (decibel > self.height) {
            decibel = decibel * 0.9;
            if (decibel > self.height) {
                decibel = self.height;
            }
        }else if (decibel < 15) {
            decibel = 3;
        }
        
        UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 2.0, decibel)];
        lineView.layer.cornerRadius = 1.5;
        lineView.clipsToBounds = YES;
        if (left) {
            lineView.left = self.width;
        }
        lineView.backgroundColor = [UIColor redColor];
        lineView.centerY = self.height/2.0;
        [self addSubview:lineView];
        [UIView transitionWithView:lineView duration:1.8 options:UIViewAnimationOptionCurveLinear animations:^{
            if (left) {
                lineView.centerX = 0;
            }else {
                lineView.centerX = self.width;
            }
        } completion:^(BOOL finished) {
            [lineView removeFromSuperview];
        }];
    }
}

这样题目的那个动画效果就实现了。

下面给出的github上得地址,是我之前博客中的所有代码,并且有一些是没有写出来的。如果你需要的话,可以看看。
地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,461评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,091评论 5 13
  • 7月整个月都是各种培训,都很少在协会呆着。突然不知道是该以怎样的姿态呆着。 昨天我给同事说,送你4个字,卧薪尝胆。...
    莫星月阅读 220评论 0 0
  • 马上就到了考试的时间,做了很多的梦,确实无法实现。 每日都是浑浑噩噩的,有许多想法,许多梦,想去做,想去实现,可是...
    塔卡阅读 299评论 0 0