最近看到了郭霖大神寫(xiě)的博客铃诬,關(guān)于屬性動(dòng)畫(huà)的使用的。Android屬性動(dòng)畫(huà)完全解析(上)座哩,初識(shí)屬性動(dòng)畫(huà)的基本用法
覺(jué)得講的真的是很有意思徒扶,通俗易懂。一口氣看完上中下三篇根穷,腰不疼氣不喘呀哈哈姜骡。。屿良。
剛好公司的UI設(shè)計(jì)師來(lái)跟我說(shuō)現(xiàn)在新的設(shè)計(jì)中會(huì)有一個(gè)評(píng)價(jià)好評(píng)率圈澈,到時(shí)旁邊要有一個(gè)圓環(huán)來(lái)代表進(jìn)度,最好還要有動(dòng)畫(huà)效果尘惧,就那種一開(kāi)始就轉(zhuǎn)動(dòng)康栈,從0轉(zhuǎn)到當(dāng)前進(jìn)度的效果。UI大概長(zhǎng)這個(gè)樣子:
其實(shí)這個(gè)的效果就很像是京東小白信用的那個(gè)動(dòng)畫(huà)效果了褥伴。
剛好看完郭霖大神對(duì)于屬性動(dòng)畫(huà)的講解谅将,感覺(jué)這個(gè)應(yīng)該難度不是很大。于是說(shuō)干就干重慢。
首先是要先分析一下View的構(gòu)成
也就是說(shuō)其實(shí)這個(gè)View可以分為三層:
1饥臂、最底下一層,是一個(gè)不會(huì)變的圓
2似踱、一個(gè)深色的隅熙,代表進(jìn)度的扇形
3稽煤、中間的的小圓
其中1和3是不會(huì)變的,所謂的進(jìn)度其實(shí)就是2中扇形的圓心角的度數(shù)了
所以我們要分層的把View畫(huà)出來(lái)
先創(chuàng)建一個(gè)自定義的View
在自定義的View中先定義好即將要用到的變量囚戚,同時(shí)重寫(xiě)一下最重要的?onDraw()酵熙;
然后是先定義好xml中即將要用到的自定義View的屬性
定義在項(xiàng)目的attrs.xml文件中
然后重寫(xiě)自定義View構(gòu)造函數(shù)
把xml中的屬性讀取進(jìn)來(lái),同時(shí)初始化一下即將要用的畫(huà)筆
PS:使用完 TypeArray 之后記得調(diào)用一下 TypeArray.recycle()釋放資源
好了驰坊,準(zhǔn)備工作做的差不多了匾二,我們來(lái)先畫(huà)第一個(gè)圓
在onDraw()中調(diào)用一下,看下效果
效果
第一個(gè)圓已經(jīng)成功的畫(huà)出來(lái)了
現(xiàn)在畫(huà)代表進(jìn)度的扇形
效果
為了能看到效果拳芙,先讓扇形的角度等于270察藐,實(shí)際上扇形的角度是要給屬性動(dòng)畫(huà)控制的,根據(jù)動(dòng)畫(huà)的時(shí)長(zhǎng)來(lái)控制
再畫(huà)一個(gè)中間的小圓
調(diào)用一下
效果
吶舟扎,現(xiàn)在是不是已經(jīng)長(zhǎng)得有點(diǎn)像射雞獅要求的了啦分飞,可能你會(huì)說(shuō)顏色不對(duì)啊,可別忘記了我們?cè)缇皖A(yù)留了自定義屬性呢
修改成射雞獅制定的顏色及圓環(huán)的寬度之后睹限,是不是基本就是這個(gè)圓了譬猫。
但目前為止,自定義View是畫(huà)完了羡疗,接下來(lái)就是添加動(dòng)畫(huà)了
動(dòng)畫(huà)是使用新的屬性動(dòng)畫(huà)染服,以前的補(bǔ)間動(dòng)畫(huà)和幀動(dòng)畫(huà)已經(jīng)不能滿足我們的需要了
如果對(duì)于屬性動(dòng)畫(huà)不了解的可以看看Android屬性動(dòng)畫(huà)完全解析(上),初識(shí)屬性動(dòng)畫(huà)的基本用法顺囊,然后順便把它接下去的中肌索、下篇也看一下,就能理解了特碳。
最后诚亚,實(shí)現(xiàn)動(dòng)畫(huà)效果
動(dòng)畫(huà)的實(shí)現(xiàn)很簡(jiǎn)單,只是對(duì)目標(biāo)角度進(jìn)行一個(gè)平滑的過(guò)渡午乓,然后在過(guò)渡的過(guò)程中不斷的重畫(huà)扇形
調(diào)用動(dòng)畫(huà)
效果
動(dòng)畫(huà)是不是已經(jīng)很順暢的跑起來(lái)了
可以開(kāi)始整理代碼了
首先我們肯定不滿足參數(shù)只能在xml指定站宗,特別是代表進(jìn)度的扇形的角度,這個(gè)必須是拿到真實(shí)數(shù)據(jù)之后才能計(jì)算得到的益愈。所以梢灭,有必要把一些接口給暴露出來(lái)
考慮到View的可定制性,我暴露以下這些
這樣就可以供我們?cè)诘玫綄?shí)際數(shù)據(jù)之后對(duì)View進(jìn)行定制了
最終蒸其,在我編寫(xiě)的UI界面中使用