一个语音播放动画控件

距离上一篇文章也许过去很久很久很久了吧,主要还是自己懒了,什么都不想动,大龄程序狗同病吗?也是只是我,哈哈。言归正传,最新公司要求写一个语音播放的控件,leader给了一个思路就是重新draw方法,里面绘制竖线即可,自己也写完了,但是又说,播放的时候,我需要加Animation。啥玩意,那咋玩,自己也尝试了很久,还是没写出让leader满意的答案,那咋办,他自己去了,我在这和大家分享下他的写法?
啥也别说了,来张设计图和效果图吧

一个语音播放动画控件_第1张图片
设计小姐姐出的图.png

一个语音播放动画控件_第2张图片
公司项目效果图.gif

一个语音播放动画控件_第3张图片
demo.gif

有时候,不得不说,有时候解决不了bug的时候,去找UI小姐姐去耍一下,说不定bug就会消失,不知道你有没有那种感觉,哈哈

言归正传:

1.先获取多少秒的录音,多少秒就需要在draw绘制多少个竖线(以后称为bar)
2.bar的高度是根据音频的声音确定的(和你开个玩笑,我这这是弄的随机的,不是不可以,只是太麻烦,真心没必要)
3.根据播放的语音的进度,来绘制播放后的bar的颜色
4.播放的时候添加动画,这是重点,(先买个关子,当我看到他的写法时,我差点吐了,太贱了,不知道你能不能想得到)

1.获取录音秒数

别告诉我说,api不给你,如果不给你,我不知道你啥脾气,反正我是忍不了,一个字----打,打的给为止
如果没有打赢,那没办法就只能自己去计算了(反正我是打赢了✌)
但是并不是所有的秒数就是bar数,坑爹的产品给了3、5分钟的语音,超出屏幕了,看毛线了。只能这样处理let barCount = min(60, 秒数)。世界上最不能相信的人,我觉得就是产品经理

let player = AVAudioPlayer()
var duration = player.duration()
duration = min(60, duration)

2.bar的高度

根据音频的声音获取,那是不可能的
简单粗暴的来,随机

 let barHeight = Array(0..

3.获取播放的进度,并且根据进度来更改bar颜色

播放的进度时根据播放的时间和总时间来获取的
使用的时定时器实实现的方法里面获取播放的时间

let progress = player.currentTime / player.duration
voiceView.progress =  progress

4.动画

简单粗暴,每次重绘draw的时候,就需要再次使用rand,来获取随机增加值,来改变高度,造成动画的假象,擦擦真的时简单粗暴啊,不得不说一句,真牛逼

if hasAnimation {
    barRatio = max(0, barsHeight[i] + CGFloat.random(in: -0.1..<0.1))
 }
 let barHeight = barRatio * height

再次粘贴一下完整的draw里面的代码

override func draw(_ rect: CGRect) {
        guard barsHeight.count == barCount else {
            return
        }
        let height = rect.height
        for i in 0..

到此完整代码已经完毕,详情请查看Demo

你可能感兴趣的:(一个语音播放动画控件)