切割翻页效果（一）

前段时间根据朋友的一个提议做了个翻页动画。效果跟水果忍者切割相似。如图

 

效果过程大致如下：

1）根据手势痕迹将当前图片分割为两部分；

2）将分割后的图片拉开一段距离，并适度放大图片，以模拟向屏幕外弹起效果，同时露出底层图片；

3）错位移动分割后的图片；

 

首先遇到的问题是如何对图片进行分割。我选择采用canvas.clipPath来实现；采用这种方法就要先确定PATH中各个节点的坐标；

起初我尝试利用分割线与图片边的交点，以及图片的顶点来确定Path;

如下图：

通过观察，却发现交点可以落在图片任意两条不同的边上，而且落点不同与其构成Path的顶点也不同,情况复杂，于是我果断放弃，另谋他路。一番尝试后，我决定采用以下方式；

设mHW为图片对角线的斜率,mSlope分割线的斜率；；

将切割情况分为，mSlope大于还是小于mHW两种情况进行处理；

先看mSlope大于mHW的情况，如图：

 

 
 点mDown 和mUp分别表示手指按下和弹起时的位置，两点所在直线即为分割线。分割线与x=-mWidth,x=2mWidth分别交于mX0 和mXw;显然两点坐标可以轻松得到：

 

private void calcPoints() {
		mSlope = (mDown.y - mUp.y) / (mDown.x - mUp.x);
		mX0.x = -mWidth;
		mX0.y = (-mWidth - mUp.x) * mSlope + mUp.y;
		mXw.x = 2 * mWidth;
		mXw.y = mSlope * (2 * mWidth - mUp.x) + mUp.y;
	}

  这样，被分割的两部分路径就总是可以用图中Part1,Part2 两个三角形确定。

Part1的路径为：

if (Math.abs(mSlope) > mHW) {
			if (mSlope < 0) {
				path.moveTo(-mWidth, mXw.y);
				path.lineTo(mXw.x, mXw.y);
				path.lineTo(mX0.x, mX0.y);
				path.close();
			} else {
				path.moveTo(-mWidth, mXw.y);
				path.lineTo(mX0.x, mX0.y);
				path.lineTo(mXw.x, mXw.y);
				path.close();
			}
		}

 Part2的路径为：

 

 

if (Math.abs(mSlope) > mHW) {
			if (mSlope < 0) {
				path.moveTo(2 * mWidth, mX0.y);
				path.lineTo(mXw.x, mXw.y);
				path.lineTo(mX0.x, mX0.y);
				path.close();
			} else {
				path.moveTo(2 * mWidth, mX0.y);
				path.lineTo(mX0.x, mX0.y);
				path.lineTo(mXw.x, mXw.y);
				path.close();
			}
		} 

 

 

而当切割线斜率小于mSlope时，情况与此相似，就不一一赘述了。