最近看到了郭霖大神寫的博客,關于屬性動畫的使用的。Android屬性動畫完全解析(上),初識屬性動畫的基本用法

覺得講的真的是很有意思,通俗易懂。一口氣看完上中下三篇,腰不疼氣不喘呀哈哈。。。
剛好公司的UI設計師來跟我說現(xiàn)在新的設計中會有一個評價好評率,到時旁邊要有一個圓環(huán)來代表進度,最好還要有動畫效果,就那種一開始就轉動,從0轉到當前進度的效果。UI大概長這個樣子:

其實這個的效果就很像是京東小白信用的那個動畫效果了。

剛好看完郭霖大神對于屬性動畫的講解,感覺這個應該難度不是很大。于是說干就干。
首先是要先分析一下View的構成

也就是說其實這個View可以分為三層:
1、最底下一層,是一個不會變的圓
2、一個深色的,代表進度的扇形
3、中間的的小圓
其中1和3是不會變的,所謂的進度其實就是2中扇形的圓心角的度數了
所以我們要分層的把View畫出來
先創(chuàng)建一個自定義的View

在自定義的View中先定義好即將要用到的變量,同時重寫一下最重要的?onDraw();
然后是先定義好xml中即將要用到的自定義View的屬性
定義在項目的attrs.xml文件中

然后重寫自定義View構造函數
把xml中的屬性讀取進來,同時初始化一下即將要用的畫筆

PS:使用完 TypeArray 之后記得調用一下 TypeArray.recycle()釋放資源
好了,準備工作做的差不多了,我們來先畫第一個圓

在onDraw()中調用一下,看下效果

效果

第一個圓已經成功的畫出來了
現(xiàn)在畫代表進度的扇形

效果

為了能看到效果,先讓扇形的角度等于270,實際上扇形的角度是要給屬性動畫控制的,根據動畫的時長來控制
再畫一個中間的小圓

調用一下

效果

吶,現(xiàn)在是不是已經長得有點像射雞獅要求的了啦,可能你會說顏色不對啊,可別忘記了我們早就預留了自定義屬性呢

修改成射雞獅制定的顏色及圓環(huán)的寬度之后,是不是基本就是這個圓了。

但目前為止,自定義View是畫完了,接下來就是添加動畫了
動畫是使用新的屬性動畫,以前的補間動畫和幀動畫已經不能滿足我們的需要了
如果對于屬性動畫不了解的可以看看Android屬性動畫完全解析(上),初識屬性動畫的基本用法,然后順便把它接下去的中、下篇也看一下,就能理解了。
最后,實現(xiàn)動畫效果

動畫的實現(xiàn)很簡單,只是對目標角度進行一個平滑的過渡,然后在過渡的過程中不斷的重畫扇形
調用動畫

效果

動畫是不是已經很順暢的跑起來了
可以開始整理代碼了
首先我們肯定不滿足參數只能在xml指定,特別是代表進度的扇形的角度,這個必須是拿到真實數據之后才能計算得到的。所以,有必要把一些接口給暴露出來
考慮到View的可定制性,我暴露以下這些

這樣就可以供我們在得到實際數據之后對View進行定制了

最終,在我編寫的UI界面中使用
