自定義view實作水波紋效果

水波紋效果：

1.标準正餘弦水波紋；

2.非标準圓形液柱水波紋；

雖說都是水波紋，但兩者在實作上差異是比較大的，一個通過正餘弦函數模拟水波紋效果，另外一個會運用到圖像的混合模式（PorterDuffXfermode）；

先看效果：

自定義view實作水波紋效果

自定義View根據實際情況可以選擇繼承自View、TextView、ImageView或其他

這次的實作我們都選擇繼承view，在實作的過程中我們需要關注如下幾個方法：

1.onMeasure():最先回調，用于控件的測量;

2.onSizeChanged():在onMeasure後面回調，可以拿到view的寬高等資料，在橫豎屏切換時也會回調;

3.onDraw()：真正的繪制部分，繪制的代碼都寫到這裡面;

既然如此，我們先複寫這三個方法，然後來實作如上兩個效果；

一：标準正餘弦水波紋

這種水波紋可以用具體函數模拟出具體的軌迹，是以思路基本如下：

1.确定水波函數方程

2.根據函數方程得出每一個波紋上點的坐标；

3.将水波進行平移，即将水波上的點不斷的移動；

4.不斷的重新繪制，生成動态水波紋；

有了上面的思路，我們一步一步進行實作：

正餘弦函數方程為：

y = Asin(wx+b)+h ，這個公式裡：w影響周期，A影響振幅，h影響y位置，b為初相；

根據上面的方程選取自己覺得中意的波紋效果，确定對應參數的取值；

然後根據确定好的方程得出所有的方程上y的數值，并将所有y值儲存在數組裡：

// 将周期定為view總寬度  
mCycleFactorW = (float) ( * Math.PI / mTotalWidth);  

// 根據view總寬度得出所有對應的y值  
for (int i = ; i < mTotalWidth; i++) {  
    mYPositions[i] = (float) (STRETCH_FACTOR_A * Math.sin(mCycleFactorW * i) + OFFSET_Y);  
}

根據得出的所有y值，則可以在onDraw中通過如下代碼繪制兩條靜态波紋：

for (int i = ; i < mTotalWidth; i++) {  

      // 減400隻是為了控制波紋繪制的y的在螢幕的位置，大家可以改成一個變量，然後動态改變這個變量，進而形成波紋上升下降效果  
      // 繪制第一條水波紋  
      canvas.drawLine(i, mTotalHeight - mResetOneYPositions[i] - , i,  
              mTotalHeight,  
              mWavePaint);  

      // 繪制第二條水波紋  
      canvas.drawLine(i, mTotalHeight - mResetTwoYPositions[i] - , i,  
              mTotalHeight,  
              mWavePaint);  
  }

這種方式類似于數學裡面的細分法，一條波紋，如果橫向以一個像素點為機關進行細分，則形成view總寬度條直線，并且每條直線的起點和終點我們都能知道，在此基礎上我們隻需要循環繪制出所有細分出來的直線（直線都是縱向的），則形成了一條靜态的水波紋；

接下來我們讓水波紋動起來，之前用了一個數組儲存了所有的y值點，有兩條水波紋，再利用兩個同樣大小的數組來儲存兩條波紋的y值資料，并不斷的去改變這兩個數組中的資料：

private void resetPositonY() {  
    // mXOneOffset代表目前第一條水波紋要移動的距離  
    int yOneInterval = mYPositions.length - mXOneOffset;  
    // 使用System.arraycopy方式重新填充第一條波紋的資料  
    System.arraycopy(mYPositions, mXOneOffset, mResetOneYPositions, , yOneInterval);  
    System.arraycopy(mYPositions, , mResetOneYPositions, yOneInterval, mXOneOffset);  

    int yTwoInterval = mYPositions.length - mXTwoOffset;  
    System.arraycopy(mYPositions, mXTwoOffset, mResetTwoYPositions, ,  
            yTwoInterval);  
    System.arraycopy(mYPositions, , mResetTwoYPositions, yTwoInterval, mXTwoOffset);  
}

如此下來隻要不斷的改變這兩個數組的資料，然後不斷重新整理，即可生成動态水波紋了；

重新整理可以調用invalidate()或postInvalidate()，差別在于後者可以在子線程中更新UI

整體代碼如下：

package com.csdn.csdnblog2.ui;

import com.csdn.csdnblog2.utils.UiUtils;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.DrawFilter;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.PaintFlagsDrawFilter;
import android.util.AttributeSet;
import android.view.View;

public class DynamicWave extends View {

    // 波紋顔色
    private static final int WAVE_PAINT_COLOR = ;
    // y = Asin(wx+b)+h
    private static final float STRETCH_FACTOR_A = ;
    private static final int OFFSET_Y = ;
    // 第一條水波移動速度
    private static final int TRANSLATE_X_SPEED_ONE = ;
    // 第二條水波移動速度
    private static final int TRANSLATE_X_SPEED_TWO = ;
    private float mCycleFactorW;

    private int mTotalWidth, mTotalHeight;
    private float[] mYPositions;
    private float[] mResetOneYPositions;
    private float[] mResetTwoYPositions;
    private int mXOffsetSpeedOne;
    private int mXOffsetSpeedTwo;
    private int mXOneOffset;
    private int mXTwoOffset;

    private Paint mWavePaint;
    private DrawFilter mDrawFilter;

    public DynamicWave(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 将dp轉化為px，用于控制不同分辨率上移動速度基本一緻
        mXOffsetSpeedOne = UiUtils.dipToPx(context, TRANSLATE_X_SPEED_ONE);
        mXOffsetSpeedTwo = UiUtils.dipToPx(context, TRANSLATE_X_SPEED_TWO);

        // 初始繪制波紋的畫筆
        mWavePaint = new Paint();
        // 去除畫筆鋸齒
        mWavePaint.setAntiAlias(true);
        // 設定風格為實線
        mWavePaint.setStyle(Style.FILL);
        // 設定畫筆顔色
        mWavePaint.setColor(WAVE_PAINT_COLOR);
        mDrawFilter = new PaintFlagsDrawFilter(, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 從canvas層面去除繪制時鋸齒
        canvas.setDrawFilter(mDrawFilter);
        resetPositonY();
        for (int i = ; i < mTotalWidth; i++) {

            // 減400隻是為了控制波紋繪制的y的在螢幕的位置，大家可以改成一個變量，然後動态改變這個變量，進而形成波紋上升下降效果
            // 繪制第一條水波紋
            canvas.drawLine(i, mTotalHeight - mResetOneYPositions[i] - , i,
                    mTotalHeight,
                    mWavePaint);

            // 繪制第二條水波紋
            canvas.drawLine(i, mTotalHeight - mResetTwoYPositions[i] - , i,
                    mTotalHeight,
                    mWavePaint);
        }

        // 改變兩條波紋的移動點
        mXOneOffset += mXOffsetSpeedOne;
        mXTwoOffset += mXOffsetSpeedTwo;

        // 如果已經移動到結尾處，則重頭記錄
        if (mXOneOffset >= mTotalWidth) {
            mXOneOffset = ;
        }
        if (mXTwoOffset > mTotalWidth) {
            mXTwoOffset = ;
        }

        // 引發view重繪，一般可以考慮延遲20-30ms重繪，空出時間片
        postInvalidate();
    }

    private void resetPositonY() {
        // mXOneOffset代表目前第一條水波紋要移動的距離
        int yOneInterval = mYPositions.length - mXOneOffset;
        // 使用System.arraycopy方式重新填充第一條波紋的資料
        System.arraycopy(mYPositions, mXOneOffset, mResetOneYPositions, , yOneInterval);
        System.arraycopy(mYPositions, , mResetOneYPositions, yOneInterval, mXOneOffset);

        int yTwoInterval = mYPositions.length - mXTwoOffset;
        System.arraycopy(mYPositions, mXTwoOffset, mResetTwoYPositions, ,
                yTwoInterval);
        System.arraycopy(mYPositions, , mResetTwoYPositions, yTwoInterval, mXTwoOffset);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 記錄下view的寬高
        mTotalWidth = w;
        mTotalHeight = h;
        // 用于儲存原始波紋的y值
        mYPositions = new float[mTotalWidth];
        // 用于儲存波紋一的y值
        mResetOneYPositions = new float[mTotalWidth];
        // 用于儲存波紋二的y值
        mResetTwoYPositions = new float[mTotalWidth];

        // 将周期定為view總寬度
        mCycleFactorW = (float) ( * Math.PI / mTotalWidth);

        // 根據view總寬度得出所有對應的y值
        for (int i = ; i < mTotalWidth; i++) {
            mYPositions[i] = (float) (STRETCH_FACTOR_A * Math.sin(mCycleFactorW * i) + OFFSET_Y);
        }
    }

}

二：非标準圓形液柱水波紋

前面的波形使用函數模拟，這個我們換種方式，采用圖進行實作，先用PS整張不像波紋的波紋圖；

自定義view實作水波紋效果

為了銜接緊密，首尾都比較平，并高度一緻；

思路：

1.使用一個圓形圖作為遮罩過濾波形圖；

2.平移波紋圖，即不斷改變繪制的波紋圖的區域，即srcRect；

3.當一個周期繪制完，則從波紋圖的最前面重新計算；

首先初始化bitmap：

private void initBitmap() {  
        mSrcBitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.wave_2000))  
                .getBitmap();  
        mMaskBitmap = ((BitmapDrawable) getResources().getDrawable(  
                R.drawable.circle_500))  
                .getBitmap();  
    }

使用drawable擷取的方式，全局隻會生成一份，并且系統會進行管理，而BitmapFactory.decode()出來的則decode多少次生成多少張，務必自己進行recycle；

然後繪制波浪和遮罩圖，繪制時設定對應的混合模式：

/*  
 * 将繪制操作儲存到新的圖層  
 */  
int sc = canvas.saveLayer(, , mTotalWidth, mTotalHeight, null, Canvas.ALL_SAVE_FLAG);  

// 設定要繪制的波紋部分  
mSrcRect.set(mCurrentPosition, , mCurrentPosition + mCenterX, mTotalHeight);  
// 繪制波紋部分  
canvas.drawBitmap(mSrcBitmap, mSrcRect, mDestRect, mBitmapPaint);  

// 設定圖像的混合模式  
mBitmapPaint.setXfermode(mPorterDuffXfermode);  
// 繪制遮罩圓  
canvas.drawBitmap(mMaskBitmap, mMaskSrcRect, mMaskDestRect,  
        mBitmapPaint);  
mBitmapPaint.setXfermode(null);  
canvas.restoreToCount(sc);

為了形成動态的波浪效果，單開一個線程動态更新要繪制的波浪的位置：

new Thread() {  
    public void run() {  
        while (true) {  
            // 不斷改變繪制的波浪的位置  
            mCurrentPosition += mSpeed;  
            if (mCurrentPosition >= mSrcBitmap.getWidth()) {  
                mCurrentPosition = ;  
            }  
            try {  
                // 為了保證效果的同時，盡可能将cpu空出來，供其他部分使用  
                Thread.sleep();  
            } catch (InterruptedException e) {  
            }  

            postInvalidate();  
        }  

    };  
}.start();

全部代碼如下

package com.csdn.csdnblog2.ui;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.view.View;

import com.csdn.csdnblog2.R;
import com.csdn.csdnblog2.utils.UiUtils;

/**
 * @author tianjian
 * @created 2015/2/2
 */
public class PorterDuffXfermodeView extends View {

    private static final int WAVE_TRANS_SPEED = ;

    private Paint mBitmapPaint, mPicPaint;
    private int mTotalWidth, mTotalHeight;
    private int mCenterX, mCenterY;
    private int mSpeed;

    private Bitmap mSrcBitmap;
    private Rect mSrcRect, mDestRect;

    private PorterDuffXfermode mPorterDuffXfermode;
    private Bitmap mMaskBitmap;
    private Rect mMaskSrcRect, mMaskDestRect;
    private PaintFlagsDrawFilter mDrawFilter;

    private int mCurrentPosition;

    public PorterDuffXfermodeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
        initBitmap();
        mPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
        mSpeed = UiUtils.dipToPx(getContext(), WAVE_TRANS_SPEED);
        mDrawFilter = new PaintFlagsDrawFilter(Paint.ANTI_ALIAS_FLAG, Paint.DITHER_FLAG);
        new Thread() {
            public void run() {
                while (true) {
                    // 不斷改變繪制的波浪的位置
                    mCurrentPosition += mSpeed;
                    if (mCurrentPosition >= mSrcBitmap.getWidth()) {
                        mCurrentPosition = ;
                    }
                    try {
                        // 為了保證效果的同時，盡可能将cpu空出來，供其他部分使用
                        Thread.sleep();
                    } catch (InterruptedException e) {
                    }

                    postInvalidate();
                }

            };
        }.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 從canvas層面去除鋸齒
        canvas.setDrawFilter(mDrawFilter);
        canvas.drawColor(Color.TRANSPARENT);

        /*
         * 将繪制操作儲存到新的圖層
         */
        int sc = canvas.saveLayer(, , mTotalWidth, mTotalHeight, null, Canvas.ALL_SAVE_FLAG);

        // 設定要繪制的波紋部分
        mSrcRect.set(mCurrentPosition, , mCurrentPosition + mCenterX, mTotalHeight);
        // 繪制波紋部分
        canvas.drawBitmap(mSrcBitmap, mSrcRect, mDestRect, mBitmapPaint);

        // 設定圖像的混合模式
        mBitmapPaint.setXfermode(mPorterDuffXfermode);
        // 繪制遮罩圓
        canvas.drawBitmap(mMaskBitmap, mMaskSrcRect, mMaskDestRect,
                mBitmapPaint);
        mBitmapPaint.setXfermode(null);
        canvas.restoreToCount(sc);
    }

    // 初始化bitmap
    private void initBitmap() {
        mSrcBitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.wave_2000))
                .getBitmap();
        mMaskBitmap = ((BitmapDrawable) getResources().getDrawable(
                R.drawable.circle_500))
                .getBitmap();
    }

    // 初始化畫筆paint
    private void initPaint() {

        mBitmapPaint = new Paint();
        // 防抖動
        mBitmapPaint.setDither(true);
        // 開啟圖像過濾
        mBitmapPaint.setFilterBitmap(true);

        mPicPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPicPaint.setDither(true);
        mPicPaint.setColor(Color.RED);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mTotalWidth = w;
        mTotalHeight = h;
        mCenterX = mTotalWidth / ;
        mCenterY = mTotalHeight / ;

        mSrcRect = new Rect();
        mDestRect = new Rect(, , mTotalWidth, mTotalHeight);

        int maskWidth = mMaskBitmap.getWidth();
        int maskHeight = mMaskBitmap.getHeight();
        mMaskSrcRect = new Rect(, , maskWidth, maskHeight);
        mMaskDestRect = new Rect(, , mTotalWidth, mTotalHeight);
    }

}

一些知識點

canvas.saveLayer

參考連結 Android中的canvas介紹 - linghu_java的專欄 - 部落格頻道 - CSDN.NET
android中Canvas使用drawBitmap繪制圖檔

參考連結 android中Canvas使用drawBitmap繪制圖檔 - longyi_java的專欄 - 部落格頻道 - CSDN.NET
canvas.setXfermode屬性

參考連結:setXfermode屬性 - xSTARx - ITeye技術網站

源代碼

參考連結

自定義view實作水波紋效果 - Ajian_studio - 部落格頻道 - CSDN.NET

自定義view實作水波紋效果

水波紋效果：

一：标準正餘弦水波紋

二：非标準圓形液柱水波紋

全部代碼如下

一些知識點

源代碼

參考連結

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯