# Android特效專輯(一)——水波紋過渡特效(首頁) > 也是今天看到的一個特效，感覺挺漂亮的，最近也一直在籌劃一個APP，就想把他當做APP的首頁，然后加些處理，關于首頁APP的特效等我完工了再貼出來吧，現在先把這個特效給分享出來，只是稍微改動了一點點而已。 原地址：[http://blog.csdn.net/jdsjlzx/article/details/44601239](http://blog.csdn.net/jdsjlzx/article/details/44601239) ### 先看效果圖：  ~~~ 我們先創建一個UIUtils，轉換一些單位 ~~~ ~~~ package com.lgl.test; import android.content.Context; import android.util.DisplayMetrics; import android.view.WindowManager; public class UiUtils { static public int getScreenWidthPixels(Context context) { DisplayMetrics dm = new DisplayMetrics(); ((WindowManager) context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay() .getMetrics(dm); return dm.widthPixels; } static public int dipToPx(Context context, int dip) { return (int) (dip * getScreenDensity(context) + 0.5f); } static public float getScreenDensity(Context context) { try { DisplayMetrics dm = new DisplayMetrics(); ((WindowManager) context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay() .getMetrics(dm); return dm.density; } catch (Exception e) { return DisplayMetrics.DENSITY_DEFAULT; } } } ~~~ ~~~ 然后寫一個WaterRippleView類繼承View ~~~ ~~~ package com.lgl.test; 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 WaterRippleView extends View { // 波紋顏色 private static final int WAVE_PAINT_COLOR = 0x880000aa; // y = Asin(wx+b)+h private static final float STRETCH_FACTOR_A = 20; 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 mWavePaint; private DrawFilter mDrawFilter; public WaterRippleView(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(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++) { // 減400只是為了控制波紋繪制的y的在屏幕的位置，大家可以改成一個變量，然后動態改變這個變量，從而形成波紋上升下降效果 // 繪制第一條水波紋 canvas.drawLine(i, mTotalHeight - mResetOneYPositions[i] - 400, i, mTotalHeight, mWavePaint); // 繪制第二條水波紋 canvas.drawLine(i, mTotalHeight - mResetTwoYPositions[i] - 400, i, mTotalHeight, mWavePaint); } // 改變兩條波紋的移動點 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); } } } ~~~ ~~~ 然后你就可以綁定在布局上就可以使用了 ~~~ ~~~ <com.lgl.test.WaterRippleView android:layout_width="fill_parent" android:layout_height="fill_parent" /> ~~~ ~~~ 是不是感覺特效還可以 ~~~ ### Demo下載地址：[http://download.csdn.net/detail/qq_26787115/9384803](http://download.csdn.net/detail/qq_26787115/9384803)