《碎裂效果尝试(clippath篇) - 网页设计在线参考手册-.docx》由会员分享，可在线阅读，更多相关《碎裂效果尝试(clippath篇) - 网页设计在线参考手册-.docx（11页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、碎裂效果尝试(clippath篇)-网页设计在线参考手册-最新IT资讯_电脑知识大全_网络安全教程-次元立方网returnfunction(t)obj.style.transform=rotateX(+t*x+deg)rotateY(+t*y+deg);)(tmpObj,Math.floor(Math.random()*10+2),Math.floor(Math.random()*10+2);oContent.appendChild(tmpObj);varn=0;setInterval(function()for(vark=0;kaF.length;k+)aFk(n);n+;,30);obj.
2、style.display=none;functioncut(iLayer,aPoint,isThin)varaResult=;if(arguments2=undefined)isThin=false;varx=,y=;for(vari=0;iaPoint.length;i+)x.push(aPointi0);y.push(aPointi1);vardealX=x.sort();vardealY=y.sort();varrandX,randY;varmaxX=Math.max.apply(dealX,dealX),maxY=Math.max.apply(dealY,dealY),minX=Ma
3、th.min.apply(dealX,dealX),minY=Math.min.apply(dealY,dealY);if(iLayer=1)if(!isThin)randX=Math.floor(Math.random()*(0.6)+0.2)*(maxX-minX)+minX;randY=Math.floor(Math.random()*(0.6)+0.2)*(maxY-minY)+minY;elserandX=Math.floor(Math.random()*(maxX-minX)+minX;randY=Math.floor(Math.random()*(maxY-minY)+minY;
4、for(i=0;iaPoint.length;i+)vartmp=aPointi+1|aPoint0;aResult.push(aPointi,tmp,randX,randY);elserandX=(maxX-minX)/2+minX;randY=(maxY-minY)/2+minY;aResult=aResult.concat(cut(iLayer-1,minX,minY,randX,minY,randX,randY,minX,randY,isThin);aResult=aResult.concat(cut(iLayer-1,maxX,minY,maxX,randY,randX,randY,
5、randX,minY,isThin);aResult=aResult.concat(cut(iLayer-1,maxX,maxY,randX,maxY,randX,randY,maxX,randY,isThin);aResult=aResult.concat(cut(iLayer-1,minX,maxY,minX,randY,randX,randY,randX,maxY,isThin);returnaResult;/script由于比拟简单易懂，所以没怎么整理就放上来了整个js的核心在两个方法，一个是duang方法，还有一个是cut方法，这里也主要就是讲这两个方法cut方法的作用是将一个长方形
6、切割成一定数量的三角形参数有三，分别是1.三角形的数量多少(我称为层数，稍后解释)2.长方形顶点坐标的数组3.能否薄切构成三角形(默以为false，推荐为false)具体解释一下，第一个参数为层数，为什么用层数这个名词，由于我随机构成三角形的算法和层似乎有关系，就用了这个命名当iLayer为1的时候，会在长方形中随机取一点，然后和四个顶点相连(这四个顶点也就是第二个参数)，效果如下当iLayer为2时，首先取长方形的中心点，将长方形平分成四块，效果如下然后每一块在其中随机取点与四个顶点相连接，相当于4次iLayer=1，用递归实现，效果如图iLayer等于3,4,5的时候同理，一般去iLaye
7、r为5的时候长方形就被分割的非常的碎了参数2讲过了就是长方形顶点数组，参数3能否薄切在于分割三角形的时候会不会出现非常细小的三角形，比方下列图中出现的两个不推荐出现这样的三角形，由于后期效果中还是均匀一点的三角形比拟好看。这样cut方法就讲好了，然后讲讲duang方法。方法如其名，就是加特效的第二个参数是一个数组，给的就是cut切割出来的n个三角形的数组集合，然后克隆n个元素(长方形)，加上clip-path使其变成一块一块的，通过定时器使其运动起来固然没注释，但代码简单，应该都能读懂的之前有讲到transition和定时器效果的不同，下面贴一个transition的栗子，其中iLayer取了
8、5，碎的很彻底，大家看一下效果阅读器无法立即计算出变化的数值差，transition就会失效。所以我点击关闭，弹出showtime并不是真的想showtime，而是必须给阅读器一个缓冲时间。所以第一个gif采用定时器实现时就没有出现showtime2.transition是数值上的变化，但是不能从无到有。比方讲left属性0px到600px能够有动画，但是本身没有left，直接设置一个left为600px，是没有变化的3.既然transition坑比拟多为啥不全部用定时器呢？由于iLayer过大时无法使用定时器，原因我给定时器设置的间隔是30ms，当iLayer比拟大比方5的时候，30ms的时
9、间根本就没有处理完那么多三角形的变化，会出现很严重的bug，只能用transition瞻望：这种方式性能是很大的问题，关键在于能不能尽可能的优化，iLayer设置的合理值？用类型化数组使其加快性能？希望这个方法后面会有大展拳脚的时候！想象中一个效果是能够将页面中的东西切片分割再重组，比方讲当用户点击一个链接，整个页面碎掉，再复原的时候就变成一个新的页面，似不似很炫酷估计会卡，后面有时间会写一个看看，由于这段时间要准备去实习了，很忙，有时间再讲结语：终于把本人一直想发的话题发了，在五月的最后一天。从点子的产生到长方形随机切割三角形的方法的实现，再到运动时碰到的一个又一个坑，我知道这个碎裂的实现有过多的缺乏，但我还是很开心，感觉就像本人发明了一个玩具一般生命不休，奋斗不止