Android 自訂錄音、播放動畫View，讓你的錄音浪起來

標籤：迴圈   nbsp   type   san   space   http   amp   for   方法   

最近公司項目有一個錄音的錄製和播放動畫需求，然後時間是那麼緊，那麼趕緊開擼。

 

先看 

 

嗯，然後大致就是這樣，按住錄音，然後有一個倒計時，最外層一個進度條，還有一個類似類比聲波的動畫效果（其實中間的波浪會根據聲音的大小浪起來的~）

 

2

實現思路

然後，我們適當的來分析一下這個錄音動畫的實現方式。這個肯定是通過自訂控制項，咱們來把這個效果完完全全畫出來。 

大致包括以下幾個點： 

1. 最外層的進度條，最坑的就是一開始的一個漸層的效果 
2. 然後進度條最前方是有一個點的（我肯定選擇用圖片來實現） 
3. 中間的波浪（關鍵是要隨著聲音的大小浪起來） 
4. 中間的倒計時

 

3

實現過程

 

1.畫最外層的圓

 

 

 

2.畫提示的文字

 

 

3.畫倒計時（靜止時間）

 

 

4.畫聲波

 

 

這邊代碼就不展開了，畫的有點煩，簡單說下，還需要自己體會哈。上面分隔線之前的說白了就是讓聲波動起來，也就是改變volume的值，然後後面有3個for迴圈。

 

第一個for迴圈是為了確定聲波水平線的位置，第二個是畫聲波，第三個是顏色的漸層。

 

5.畫外圈進度的那個點

 

我們先會個圖分析一下，如。A點就是起始座標，一開始我們的小圓點是隱藏的，如果不算padding的話，x=witdh/2,y=0; 

 
嗯，然後呢畫圖片我們用的是

canvas.drawBitmap(......);

 

 

 

那麼要知道，drawBitmap()這個方法畫的時候是我們圖片的左上方去畫到A點的，其實我們應該往左上方挪一點，才能讓圖片的中心真正意義上的和A點重合，對吧對吧，嗯，仔細思考一下。

 

然後繼續看上面那個圖，當我們A點隨著時間運動到B點之後，我們要算出B點的座標。

 

這邊用一下三角函數啦，我們設A到B，轉過的角度為α，設圓的半徑為r，那麼A到B其實橫向增加的距離應該就是

m = x+r*sin(α);n = y+r*cos(α);

那麼我們該圖片的所有代碼就是：

 

 

6.畫外邊的帶進度和帶漸層的大圓

 

我的實現方式很簡單，從我們的UI圖看出，外面的大圓在1/4進度的時候是漸層的，然後剩下的3/4圓其實都是一種顏色，對吧，那我就畫2個圓來實現這個效果唄。

 

當progress<90的時候，我們畫那個漸層的圓環，當>90的時候，我們同時畫出那個漸層的和純色的圓環（當progress的時候，這個時候其實那個漸層的圓環沒變化，只是純色的圓環一直在變）。

 

A是那個漸層的圓環，B是純色不變的圓環 

 

7.然後最後就剩下一個計時器了，還有那個上面一直出現的progress

 

 

8.最後就是提供各種介面，各種繪製和啟動機制了，最主要的還是上面的繪製方法。

 

比如你的自訂屬性

 

 

以及一切其餘自訂View的東西，對自訂View不熟的同學可以先去學習下怎麼自訂View（其實很簡單，新手不要怕），然後再去實現一些看上去挺棒的效果。

 

總結

 

嗯，大致就是這樣，對於公司這些動畫的需求我只想說其實你想要咋弄，都是沒問題的，最重要的就是時間！本身其實最後留給開發人員的時間就不多，然後如果還要加各種動畫，那不是天天加班的節奏麼~

 

：https://github.com/Blincheng/RecordView

Android 自訂錄音、播放動畫View，讓你的錄音浪起來