实现Viewpager切换界面导航栏水波纹动画效果

       实现效果：

          

     该控件防百度阅读的导向栏进行研究，具体细节尚有不足，希望大家多多指点点击打开链接

         如有转载，请说明出处

     Viewpager的滑动，引起标题栏的渐变。主要渐变过程要先画线，再画点。

     画线过程：

        利用path和PathMeasure类，画出一条曲线，moveto方法画起始点，quadTo方法画中间控制点和终点，由于现在是水平移动，中间控制点的坐标一般选图片最上端和

    最下端。画出曲线。利用PathMeasure的getPosTan方法，获取在这个线上长度为传入第一个参数的长度的点的坐标，从而接着画图片上的点。

       画线具体代码：

      

 @Override
    public void buildPaths(float endX, float endY) {
        if (mBmpWidth <= 0 || mBmpHeight <= 0) {
            throw new IllegalArgumentException(
                    "Bitmap size must be > 0, did you call setBitmapSize(int, int) method?");
        }
        mFirstPathMeasure.setPath(mFirstPath, false);
        mSecondPathMeasure.setPath(mSecondPath, false);

        float w = mBmpWidth;
        float h = mBmpHeight;

        mFirstPath.reset();
        mSecondPath.reset();
        mFirstPath.moveTo(0, h/2-10);
        mSecondPath.moveTo(0, h/2+10);
        
//        Log.i("yunli", "endX = " + endX + ",endY = " + endY +",w = " + w + ",h = " + h);
        mFirstPath.quadTo((endX ) / 4, 10, endX/2, 10);
        mSecondPath.quadTo((endX ) / 4, h-10, endX/2, h-10);

        mFirstPath.quadTo((3*endX ) / 4, 10, endX, endY-4);
        mSecondPath.quadTo((3*endX ) / 4,h-10, endX, endY+4);
    }

画图片：

      按照画出的曲线进行画图，也就是填充点，主要利用贝塞尔曲线绘画和PathMeasure的getPosTan方法获取指定长度点的坐标：

     代码如下：

 

 @Override
    public void buildMeshes(int timeIndex) {
//    	long temp = System.currentTimeMillis();
        if (mBmpWidth <= 0 || mBmpHeight <= 0) {
            throw new IllegalArgumentException(
                    "Bitmap size must be > 0, did you call setBitmapSize(int, int) method?");
        }
        mFirstPathMeasure.setPath(mFirstPath, false);
        mSecondPathMeasure.setPath(mSecondPath, false);

        int index = 0;
        float[] pos1 = {0.0f, 0.0f};
        float[] pos2 = {0.0f, 0.0f};
        float firstLen = mFirstPathMeasure.getLength();
        float secondLen = mSecondPathMeasure.getLength();
        float len1 = firstLen / mHorizontalSplit;
        float len2 = secondLen / mHorizontalSplit;

        float firstPointDist = timeIndex * len1;
        float secondPointDist = timeIndex * len2;

        for (int x = 0; x <= mHorizontalSplit; x++) {
            mFirstPathMeasure.getPosTan(x * len1 + firstPointDist, pos1, null);
            mSecondPathMeasure.getPosTan(x * len2  + secondPointDist , pos2, null);
            
            float fx1 = pos1[0];
            float fx2 = pos2[0];
            float fy1 = pos1[1];
            float fy2 = pos2[1];

            float dy = fy2 - fy1;
            float dx = fx2 - fx1;

            for (int y = 0; y <= mVerticalSplit; y++) {
                float fx = dx * y / mVerticalSplit;
                float fy = dy * y / mVerticalSplit;
                mVertices[index * 2 + 0] = fx + fx1;
                mVertices[index * 2 + 1] = fy + fy1;
                index += 1;
            }
        }
    }

  由于双向动画，需定义左右两个Mesh，利用View的OnDraw方法绘画，canvas的drawBitmapMesh方法填充所有的点

最后附上资源下载链接。

     http://download.csdn.net/detail/ahjxly/8539677