仿百度阅读滑动条之完美版

上一篇大概的讲了下实现吸入吸出Mesh效果的简单例子,经过进一步研究,发现和百度阅读的仍有一定差距。

下面是最新研究的效果:

发现关键点在于滑动的同时,不只是Mesh的点发生变化。轨迹线也在变,所以在改变drawBitmapMesh 中的点时,需要改变线的轨迹。

增加一个改变线的函数:

<span style="font-size:24px;">public void buildPaths(int timeIndex){float w = mBmpWidth;float h = mBmpHeight;mTimeIndex = timeIndex;mFirstPathMeasure.setPath(mFirstPath, false);mSecondPathMeasure.setPath(mSecondPath, false);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;mFirstPathMeasure.getPosTan(firstPointDist, pos1, null);mSecondPathMeasure.getPosTan(secondPointDist, pos2, null);w = mPathendX;Log.i("yunli", "timeIndex = " + timeIndex +", w = " + w);if(timeIndex < 4*mHorizontalSplit/10){mThirdPath.reset();mForthPath.reset();mThirdPath.moveTo(pos1[0], h/2);mForthPath.moveTo(pos2[0], h/2);mThirdPath.cubicTo(pos1[0], pos1[1],w/8+pos1[0],10,3*w/8,10);mForthPath.cubicTo(pos2[0], pos2[1],w/8+pos2[0],h-10, 3*w/8, h-10);mThirdPath.quadTo((5*w ) / 8, 15, w, h/2-4);mForthPath.quadTo((5*w ) / 8,h-15, w, h/2+4);}else if(timeIndex == 4*mHorizontalSplit/10){mThirdPath.reset();mForthPath.reset();mThirdPath.moveTo(pos1[0], h/2);mForthPath.moveTo(pos2[0], h/2);mThirdPath.cubicTo(pos1[0], pos1[1],5*w/8,15,w,h/2-4);mForthPath.cubicTo(pos2[0], pos2[1],5*w/8,h-15, w, h/2+4);}else{mThirdPath.reset();mForthPath.reset();mThirdPath.moveTo(pos1[0], h/2);mForthPath.moveTo(pos2[0], h/2);mThirdPath.quadTo(pos1[0], pos1[1], w, h/2-4);mForthPath.quadTo(pos2[0], pos2[1], w, h/2+4);}}</span>思路是,先画出最原始的轨迹线,随着timeindex的变化,画出不同的线,而只有在画Mesh点的时候,

才将PathMeasure上放置第3和4条临时线,,算临时线位置的时候永远取第一和第二条。上面的方法在上一篇文章中都有介绍,

主要是画贝塞尔曲线。下载链接:

点击打开链接

所以你不懂我的选择,也可以不懂我的难过,

仿百度阅读滑动条之完美版

相关文章:

你感兴趣的文章:

标签云: