Android 水波紋顯示進度效果，很炫

AndraFolsom 7年前發布 | 9K 次閱讀貝塞爾曲線安卓開發 Android開發移動開發

關于水波紋的效果想必大家見的已經很多了，我就在這里再啰嗦一次，為了加深自己的印象。先來看看效果圖

關于這個效果的實現不必想的太過復雜了，要想實現這個效果，我們還需要了解一下PorterDuff及Xfermode

關于上面的這張圖想必大家也見過很多次了。這其實就是PorterDuff的16種模式。效果想比大家已經見到了，下面我們就來一一了解如何使用。

PorterDuff.Mode.CLEAR （所繪制不會提交到畫布上）

PorterDuff.Mode.SRC（顯示上層繪制圖片）

PorterDuff.Mode.DST（顯示下層繪制圖片）

PorterDuff.Mode.SRC_OVER（正常繪制顯示，上下層繪制疊蓋）

PorterDuff.Mode.DST_OVER（上下層都顯示。下層居上顯示）

PorterDuff.Mode.SRC_IN（取兩層繪制交集。顯示上層）

PorterDuff.Mode.DST_IN（取兩層繪制交集。顯示下層）

PorterDuff.Mode.SRC_OUT（取上層繪制非交集部分）

PorterDuff.Mode.DST_OUT（取下層繪制非交集部分）

PorterDuff.Mode.SRC_ATOP（取下層非交集部分與上層交集部分）

PorterDuff.Mode.DST_ATOP（取上層非交集部分與下層交集部分）

PorterDuff.Mode.XOR（異或：去除兩圖層交集部分）

PorterDuff.Mode.DARKEN（取兩圖層全部區域，交集部分顏色加深）

PorterDuff.Mode.LIGHTEN（取兩圖層全部，點亮交集部分顏色）

PorterDuff.Mode.MULTIPLY（取兩圖層交集部分疊加后顏色）

PorterDuff.Mode.SCREEN（取兩圖層全部區域，交集部分變為透明色）

Xfermode有三個子類 :

AvoidXfermode 指定了一個顏色和容差，強制Paint避免在它上面繪圖(或者只在它上面繪圖)。

PixelXorXfermode 當覆蓋已有的顏色時，應用一個簡單的像素異或操作。

PorterDuffXfermode 這是一個非常強大的轉換模式，使用它可以使用圖像合成的上圖中的任意一種來控制Paint如何與已有的Canvas圖像進行交互。要應用轉換模式，可以使用setXferMode方法

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP));

這些只能夠顯示一些合成的效果也就是上面的16種的任意一種效果而已，要想實現水波紋的效果還是不夠的，我們還需要借助于貝塞爾曲線來實現水波效果。我們使用到的是Path類的quadTo(x1, y1, x2, y2)方法，屬于二階貝塞爾曲線，使用一張圖來展示二階貝塞爾曲線，這里的（x1,y1）是控制點，（x2,y2）是終止點，起始點默認是Path的起始點（0,0）。關于使用貝塞爾曲線來實現水波效果的原理就是：通過for循環畫出兩個波紋，我們以WL代表水波紋的長度。需要波紋的-WL點、-3/4*WL點、-1/2*WL、-1/4*WL四個點，通過path的quadTo畫出，并無限重復。實現的效果其實也就是我們平時的正弦效果。那么我們也需要了解一下path的使用。

先來看一下效果圖

實現代碼為

先來說一下mPath.moveTo(50, 300);這個方法的作用是將起點移動到屏幕坐標為(50, 300)的位置。mPath.quadTo(assistPoint.x, assistPoint.y, 450, 300);這個方法就是重點了，對應的源碼為

第一個坐標是對應的控制點的坐標（assistPoint.x, assistPoint.y），第二個坐標是終點坐標也就是我們看到的水平線的終點位置坐標。上圖之所以會出現移動的效果就是因為控制點的位置隨著鼠標的位置在移動而產生的。
下面我們再來看一個效果圖

這個圖形的實現代碼

再來一個效果圖以及實現代碼

上圖是我們看到的一個靜態的圖，但是距離我們實現的效果已經很接近了，實現代碼為

這個效果的產生其實就是上面的圖形通過for循環產生移動距離產生的，代碼如下

通過對比代碼你會發現，其實就是通過移動定時刷新不停的調用onDraw方法，通過distance 的不斷變化而產生的動畫效果。如果想要實現我們最上面的動畫效果還需要借助于PorterDuff及Xfermode，關于PorterDuff及Xfermode上面已經說過了。剩下的就是它們之間的配合使用了
完整的實現的代碼如下：
自定義view