前段时间根据朋友的一个提议做了个翻页动画。效果跟水果忍者切割相似。如图
效果过程大致如下:
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时,情况与此相似,就不一一赘述了。
- 大小: 607.3 KB
- 大小: 28.1 KB
- 描述: p1-1
- 大小: 19.2 KB
- 大小: 39.2 KB
分享到:
相关推荐
jQuery切割过渡效果图像滑块是一款带左右箭头跟缩略图的图像滑块切割幻灯片特效。
JavaScript 图片切割效果 v2.0 JavaScript 图片切割效果 v2.0
要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考图片切割系统。 先看看效果: 图片地址: 程序说明 这个效果主要分三个部分:层的拖放、层的缩放、图片切割(包括预览)...
为了简化生产过程,规定所使用的切割模式的种类不能超过4种,使用频率最高的一种切割模式按照一个原料钢管价值的1/10增加费用,使用频率次之的切割模式按照一根原料钢管价值的2/10增加费用,以此类推,且每种切割...
生产线自动切割流程,4条切割线,一台移动平台小车,8条切割锯,一套液压站
这是一个完全用JavaScript实现的图片切割效果实例,可以设置全透明、换图片、设置图片大小等。
MP3切割机 随意切割MP3切割机 随意切割MP3切割机 随意切割MP3切割机 随意切割MP3切割机 随意切割
mp3切割器 切割你喜欢的一段音乐 mp3切割器 切割你喜欢的一段音乐 mp3切割器 切割你喜欢的一段音乐 mp3切割器 切割你喜欢的一段音乐
在U3D实现Mehs切割,可以切割任意Mesh的模型,局限性是切割面必须为平面,这个我没考虑,还有就是切面需要添加双面材质才能显示,切割面使用了耳切法
线材切割优化系统(以下简称《系统》)适用于一维下料优化,线性材料优化切割,适合钢材、线材、型材、门窗等线性材料的切割优化,是一款简单易用而功能强大的切割优化软件,可以为您最大程度的减少原材料在生产过程...
为了简化切割过程,如果使用的切割模式不超过4种,使用频率最高的一种切割模式按照一根原料钢管价值的1/10增加费用,使用频率次之的模式按照一根原料钢管价值的2/10增加费用,依次类推,且每种切割模式下的切割次数...
unity切割模型案例 只能切开自带的基础模型 鼠标左键蓄力 右键切开 实现方式是新建两个新模型 供学习参考用
《极限切割》提供了许多可以选择的切割参数,涵盖了机械(金属平板、卷板、原板反算等)、家具、石材、玻璃、装修等行业常用的各类排料参数,是一款通用性非常好的排料软件。下图展示了部分切割参数,为提高操作...
一类矩形切割的优化模型 一类矩形切割的优化模型 一类矩形切割的优化模型
jQuery纸张切割效果是一款基于jquery css3实现的3D变换碎纸机特效。
日志文件有时在阅读时加载几乎缓慢,大部分...使用教程,仅需把需要切割的.log文件放入"需分割文件",然后点击data.exe运行即可,(固定值以100w行为一次切割,不足100w行另算一个切割文件), 仅限".log"使用,如需其他可私信
整合了现在网上多个图片切割效果提供下载 整合图片分割、切割、.net效果
万能切割机万能切割机万能切割机万能切割机万能切割机
Window系统 Leaflet 瓦片切割工具,用于切割本地图片,按自己需求切割。切割完成后直接可用于地图展示,使用简单傻瓜操作