Android波浪動態圖（仿百度外賣、淘寶app用戶界面用到的動畫效果）

美化界面的一種手段，總的來說效果還是可以的，網上有很多這種類型的代碼，略微修改，可以比較好的應用到各類項目中，以下爲公共類代碼。

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

public class DynamicWave extends View {

    // 波紋顏色
    private static final int WAVE_PAINT_COLOR_1 = Color.parseColor("#806abd79") ;
    private static final int WAVE_PAINT_COLOR_2 = Color.parseColor("#6abd79") ;
    // y = Asin(wx+b)+h
    private static final float STRETCH_FACTOR_A = 10;
    private static final int OFFSET_Y = 0;
    // 第一條水波移動速度
    private static final int TRANSLATE_X_SPEED_ONE = 7;
    // 第二條水波移動速度
    private static final int TRANSLATE_X_SPEED_TWO = 5;
    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 mWavePaintOne;
    private Paint mWavePaintTwo;

    private DrawFilter mDrawFilter;

    public DynamicWave(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 移動速度
        mXOffsetSpeedOne = TRANSLATE_X_SPEED_ONE;
        mXOffsetSpeedTwo = TRANSLATE_X_SPEED_TWO;

        // 初始繪製波紋的畫筆
        mWavePaintOne = new Paint();
        mWavePaintTwo = new Paint();
        // 去除畫筆鋸齒
        mWavePaintOne.setAntiAlias(true);
        mWavePaintTwo.setAntiAlias(true);
        // 設置風格爲實線
        mWavePaintOne.setStyle(Paint.Style.FILL);
        mWavePaintTwo.setStyle(Paint.Style.FILL);
        // 設置畫筆顏色
        mWavePaintOne.setColor(WAVE_PAINT_COLOR_1);
        mWavePaintTwo.setColor(WAVE_PAINT_COLOR_2);
        mDrawFilter = new PaintFlagsDrawFilter(0, 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 = 0; i < mTotalWidth; i++) {

            // 減20只是爲了控制波紋繪製的y的在屏幕的位置，大家可以改成一個變量，然後動態改變這個變量，從而形成波紋上升下降效果
            // 繪製第一條水波紋
            canvas.drawLine(i, mTotalHeight - mResetOneYPositions[i] - 20, i,
                    mTotalHeight,
                    mWavePaintOne);

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

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

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

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

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

        int yTwoInterval = mYPositions.length - mXTwoOffset;
        System.arraycopy(mYPositions, mXTwoOffset, mResetTwoYPositions, 0,
                yTwoInterval);
        System.arraycopy(mYPositions, 0, 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) (2 * Math.PI / mTotalWidth);

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

具體用法，在xml文件中用以下代碼放在自己需要的位置，這就做成了讓波紋在高20dp的橫條中顯示，前面的

com.meikuang.landongjiguang.renyuandingwei.PublicClass

爲公共類路徑名，需要改成自己的。

 <com.meikuang.landongjiguang.renyuandingwei.PublicClass.DynamicWave
                    android:layout_width="match_parent"
                    android:layout_height="20dp" />