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

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

下面是最新研究的效果:

仿百度阅读滑动条之完美版_第1张图片

 发现关键点在于滑动的同时,不只是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条临时线,算临时线位置的时候永远取第一和第二条。上面的方法在上一篇文章中都有介绍,

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

              点击打开链接

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

         


你可能感兴趣的:(算法,百度,阅读,PathMeasure,drawBitmapMesh)