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