帶節(jié)點進度條的實現(xiàn)方法不止一個，但是如果要實現(xiàn)圖中這種效果的，初步看好像還不簡單。進度條的形狀不規(guī)則、背景是漸變顏色、節(jié)點上面還有個勾。這里提供一個很簡單的思路，簡單的都不好意思說了……

為了實現(xiàn)這個效果，我們需要三張圖片，就是下面這三張。

看到這里可能你已經(jīng)知道要怎么做了，三張圖片分別是：

1.進度條填充部分的背景，帶漸變顏色帶節(jié)點小勾 2.進度條未填充部分的背景，純色 3.進度條外框背景，是一張鏤空圖，顏色和進度條外的顏色一致

注意這三張圖片的大小必須一致，將這三張圖片疊加到一起就是我們的進度條了。至于進度條的動畫，我們只要對第二層的那張圖片實現(xiàn)一個屬性動畫就可以了：

至于如何控制到哪一個節(jié)點，這個可以自己拿尺子量一下，多試幾次，上面代碼中的stage就是這個作用，它從這里取值：

最后看一下效果。

這樣就已經(jīng)實現(xiàn)了一個看上去有點復(fù)雜的進度條了，妥妥的。

源碼地址