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

最新推荐文章于 2018-06-28 10:56:12 发布

Nowindyli

最新推荐文章于 2018-06-28 10:56:12 发布

阅读量1.4k

点赞数

分类专栏： Android 文章标签： PathMeasure 算法百度阅读 drawBitmapMesh

本文链接：https://blog.youkuaiyun.com/ahjxly/article/details/44808843

版权

Android 专栏收录该内容

37 篇文章

订阅专栏

上一篇大概的讲了下实现吸入吸出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条临时线，算临时线位置的时候永远取第一和第二条。上面的方法在上一篇文章中都有介绍，

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

点击打开链接

http://download.youkuaiyun.com/detail/ahjxly/8554527