這次給大家帶來的是一篇關于自定義View實現水波動畫效果的文章，其實在去年項目中使用過類似的動畫，當時就自定義View也實現了預期的效果，最近項目中又使用了相似的效果，于是對代碼重新整理了一下并且記錄下來，便于以后有類似需求可以當作參考！
按照慣例，無圖無真相
實現方式：
1、正余弦函數實現
2、貝塞爾曲線實現
開篇
看到上邊的兩種實現方式是不是感覺都和數學公式有關吶，這對于畢業多年之后的我們來說如果當初數學基礎不是很好現在估計也全部還給老師了吧，所以一提到相關的數學計算公式只能用一個表情表達了。。。
1、正余弦函數實現
正余弦的函數不知道大家還記不記得，我們溫習一下相關參數的意義
y=A*sin(ωx+φ)+k
A—振幅越大，波形在y軸上最大與最小值的差值越大
ω—角速度， 控制正弦周期(單位角度內震動的次數)
φ—初相，反映在坐標系上則為圖像的左右移動。這里通過不斷改變φ,達到波浪移動效果
k—偏距，反映在坐標系上則為圖像的上移或下移。
我們要實現移動的波形首先是先畫出靜態的波形，那么怎么來繪制一個波形圖吶，Math函數里已經提供了相應的方法，我們可以直接使用
A* Math.sin(ω * x + φ ) + K)
開始繪制之前首先定義相關畫筆之類的參數，在此就不做過多說明了，根據上邊的公式我們知道需要哪些參數，首先是A，這是振幅，就是波形最高和最低點的差值，我們可以設置定值或者外界傳入；其次是ω，角速度，給一個定制或者外界傳入；φ，相位，我們就是根據不斷改變相位來達到波形移動的效果，每次移動多少可以從外界傳入，便于控制速度；K，波形偏移上下的距離，知道了以上各個參數的具體使用意義，下邊就可以直接通過代碼看下具體實現效果了，畢竟公式都有了，參數也發給你了，剩下的就是根據公式填寫以下相應參數就ok了
private void drawSin(Canvas canvas) {
φ -= 0.03;
float y;
path.reset();
path.moveTo(0, getHeight());
for (float x = 0; x <= getWidth(); x += 20) {
y = (float) (A * Math.sin(ω * x + φ ) + K);
path.lineTo(x, getHeight() - y);
}
canvas.drawPath(path, paint);
}
靜態的波形出來之后我們就要借助屬性動畫來讓波形動起來
private void initAnimation() {
valueAnimator = ValueAnimator.ofInt(0, getWidth());
valueAnimator.setDuration(1000);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
/**
* 刷新頁面調取onDraw方法，通過變更φ 達到移動效果
*/
invalidate();
}
});
if (waveStart) {
valueAnimator.start();
}
}
開啟動畫之后再運行一下看看效果吧
看到這里只是一個單純的波形，我們一般使用的時候并不是這樣的，而是一個封閉的波形，可以向上封閉也可以向下封閉，我們在波形繪制完成之后
.........省略部分代碼
//填充矩形
path.lineTo(getWidth(), getHeight());
path.lineTo(0, getHeight());
path.close();
這樣就繪制出封閉的波形了，然后畫筆設成填充就ok
代碼中我已經對向下密封還是向上密封封裝了方法，在此就不再贅述，需要的可以看源碼哦，除此之外還有其他的參數都進行了可配置話，可以通過xml進行設置，至此通過正余弦函數進行繪制波形圖已經介紹完畢了。
2、貝塞爾曲線實現
對貝塞爾曲線不是很了解的可以自行百度，概念性的東東就不在此贅述，我們使用二階的貝塞爾進行繪制，為什么選擇二階的吶，看一個圖就知道啦
一段完整的波形其實就是兩個二階的貝塞爾組成的，來看下代碼
/**
* sin函數圖像的波形
*
* @param canvas
*/
private void drawSinPath(Canvas canvas) {
mWavePath.reset();
mWavePath.moveTo(-mWaveLength + mOffset, mWaveAmplitude);
//相信很多人會疑惑為什么控制點的縱坐標是以下值,
//是根據公式計算出來的,具體計算方法情況文章內容
for (int i = 0; i < mWaveCount; i++) {
//第一個控制點的坐標為(-mWaveLength * 3 / 4,-mWaveAmplitude)
mWavePath.quadTo(-mWaveLength * 3 / 4 + mOffset + i * mWaveLength,
-mWaveAmplitude,
-mWaveLength / 2 + mOffset + i * mWaveLength,
mWaveAmplitude);
//第二個控制點的坐標為(-mWaveLength / 4,3 * mWaveAmplitude)
mWavePath.quadTo(-mWaveLength / 4 + mOffset + i * mWaveLength,
3 * mWaveAmplitude,
mOffset + i * mWaveLength,
mWaveAmplitude);
}
mWavePath.lineTo(getWidth(), getHeight());
mWavePath.lineTo(0, getHeight());
mWavePath.close();
canvas.drawPath(mWavePath, mWavePaint);
}
根據計算得到起點和控制點坐標之后就可以寫代碼運行了效果和上邊的運行效果一樣就不再展示了，上邊的計算內容就解釋了代碼提出的問題
3、兩種方式對比總結
圖像的繪制其實都不復雜，不過關鍵點還是有幾個的。
正余弦函數的波形使用是根據相位控制的，而貝塞爾曲線實現的波形效果是不斷改變波的起始位置控制的，并且使用貝塞爾曲線的話需要先在屏幕外邊繪制一個完整的波形，保證在平移的過程中可以看到圖像不間斷的移動來達到移動的波形效果。
最后
看到這里你是你會感覺到這邊文章的內容其實很簡單，只要中間的幾個點注意一下就可以實現相應的效果了，建議朋友們動手敲一遍代碼，加深一下印象，畢竟真是做出來和知道理論沒有實踐還是有很大區別的！
github源碼地址傳送門
謹以此篇來記錄自己項目中遇到的問題，獻給需要類似功能的小伙伴們。如果你有好的建議歡迎評論指出，大家一起討論、學習、進步！
