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

实现效果：

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

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

画线过程：

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

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

画线具体代码：

@Overridepublic 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方法获取指定长度点的坐标：

代码如下：

@Overridepublic 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方法填充mVertices所有的点

最后附上资源下载链接。

思念是一种幸福的忧伤，是一种甜蜜的惆怅，是一种温馨的痛苦；

相关文章：

你感兴趣的文章：

标签云：