最近公司項目有一個錄音的錄制和播放動畫需求，然后時間是那么緊，那么趕緊開擼。
先看效果圖
嗯，然后大致就是這樣，按住錄音，然后有一個倒計時，最外層一個進度條，還有一個類似模擬聲波的動畫效果（其實中間的波浪會根據聲音的大小浪起來的~）
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（其實很簡單，新手不要怕），然后再去實現一些看上去挺棒的效果。
總結
嗯，大致就是這樣，對於公司這些動畫的需求我只想說其實你想要咋弄，都是沒問題的，最重要的就是時間！本身其實最后留給開發人員的時間就不多，然后如果還要加各種動畫，那不是天天加班的節奏么~