一个语音播放动画控件

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

设计小姐姐出的图.png

公司项目效果图.gif

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..<voiceLength).map { _ in CGFloat.random(in: 0.4..<1)}

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..<barCount {
            var barRatio = barsHeight[i]
            if hasAnimation {
                barRatio = max(0, barsHeight[i] + CGFloat.random(in: -0.1..<0.1))
            }
            let barHeight = barRatio * height
            var barY = height - barHeight
            if barGravity == .top {
                barY = 0
            } else if barGravity == .center {
                barY = barY / 2
            }
            let path = UIBezierPath(rect: CGRect(x: CGFloat(i) * (barWidth + spacing) + 2,
                                                 y: barY,
                                                 width: 0,
                                                 height: barHeight))
            path.lineWidth = barWidth
            if barEdgeStyle == .round {
                path.lineCapStyle = .round
                path.lineCapStyle = .round
            }
            if CGFloat(i) / CGFloat(barCount) < progress {
                barHightColor.set()
            } else {
                barNormalColor.set()
            }
            path.stroke()
        }
    }

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

一个语音播放动画控件

1.获取录音秒数

2.bar的高度

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

4.动画

推荐阅读更多精彩内容

2.`bar`的高度

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