IT技术互动交流平台

碎裂效果尝试(clippath篇)

作者:__constructor??发布日期:2015-05-31 15:00:16

上一篇用canvas去实现碎裂的效果,优点在于性能流畅,缺点在于无法显示3D效果(没有去尝试WebGL碎裂的研究……)、碎裂的实现也挺麻烦的,毕竟canvas中的clip只是获取绘图区域的一部分子区域,而并不是将某个元素取部分碎片,今天说的clip-path就不一样啦,我本身很喜欢用这个去实现碎裂

不了解clip-path可点击链接参考了解:http://www.w3cplus.com/css3/css-svg-clipping.html

先说说它的优点

1.可以实现碎片3D运动,各种乱飘,6的不行

2.原理比较简单,方便理解

3.大部分DOM元素都可以实现碎裂!大部分DOM元素都可以实现碎裂!大部分DOM元素都可以实现碎裂!

重要的事情说三遍,大部分DOM元素是什么意思?无论你的div里面有啥、亦或是你的表单、你的img标签、你的table,都可以实现碎裂,完全脱离了canvas绘图环境的束缚!

是不是很让人期待,但下面要先泼一盆冷水,在真实环境下,clip-path使用起来很不方便

1.IE不支持,FF不支持

2.非常的卡,因为DOM渲染的缘故,一旦碎片太多,简直卡成狗

既然有好有坏,我们来看看效果吧~

这篇文章真的是我用心之作,从想法到实现,没有参考过网上一个任何资源,网上clip-path基本上都是用来做外观变动动画的,可以实现很酷的效果。我在某天夜晚脑洞大开将其用作碎裂的实现,希望自己的研究能得到大家的认可

最开始出现的是一个表单,先贴出HTML和CSS代码




无标题文档




    
Name:
Password:
Repeat Pass:

注意,代码中出现transition一律跳过,刚刚那个gif是用定时器实现动画的,还有一种是利用transition实现动画,两种方式各有利弊,之后会贴栗子

先把js部分贴出来吧



因为比较简单易懂,所以没怎么整理就放上来了

整个js的核心在两个方法,一个是duang方法,还有一个是cut方法,这里也主要就是说这两个方法

cut方法的作用是将一个长方形切割成一定数量的三角形

参数有三,分别是

1.三角形的数量多少(我称为层数,稍后解释)

2.长方形顶点坐标的数组

3.是否薄切形成三角形(默认为false,推荐为false)

详细解释一下,第一个参数为层数,为什么用层数这个名词,因为我随机形成三角形的算法和层似乎有关系,就用了这个命名

当iLayer为1的时候,会在长方形中随机取一点,然后和四个顶点相连(这四个顶点也就是第二个参数),效果如下

当iLayer为2时,首先取长方形的中心点,将长方形平分成四块,效果如下

然后每一块在其中随机取点与四个顶点相连接,相当于4次iLayer=1,用递归实现,效果如图

iLayer等于3,4,5的时候同理,一般去iLayer为5的时候长方形就被分割的非常的碎了

参数2说过了就是长方形顶点数组,参数3是否薄切在于分割三角形的时候会不会出现非常细小的三角形,比如下图中出现的两个

不推荐出现这样的三角形,因为后期效果中还是均匀一点的三角形比较好看。这样cut方法就讲好了,然后说说duang方法。方法如其名,就是加特效的

第二个参数是一个数组,给的就是cut切割出来的n个三角形的数组集合,然后克隆n个元素(长方形),加上clip-path使其变成一块一块的,通过定时器使其运动起来~虽然没注释,但代码简单,应该都能读懂的

之前有说到transition和定时器效果的不同,下面贴一个transition的栗子,其中iLayer取了5,碎的很彻底,大家看一下效果

鷌漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?欀瑔gZ?漥万u?ur?喎?http://www.it165.net/edu/ewl/浏览器无法立刻计算出变化的数值差,transition就会失效。所以我点击关闭,弹出show time并不是真的想show time,而是必须给浏览器一个缓冲时间。所以第一个gif采用定时器实现时就没有出现show time

2.transition是数值上的变化,但是不能从无到有。比方说left属性0px到600px可以有动画,但是本身没有left,直接设置一个left为600px,是没有变化的

3.既然transition坑比较多为啥不全部用定时器呢?因为iLayer过大时无法使用定时器,原因我给定时器设置的间隔是30ms,当iLayer比较大比如5的时候,30ms的时间根本就没有处理完那么多三角形的变化,会出现很严重的bug,只能用transition……

——————————————————————————————————————————————————————————————

展望:

这种方式性能是很大的问题,关键在于能不能尽可能的优化,iLayer设置的合理值?用类型化数组使其加快性能?希望这个方法后面会有大展拳脚的时候!!

想象中一个效果是可以将页面中的东西切片分割再重组,比方说当用户点击一个链接,整个页面碎掉,再还原的时候就变成一个新的页面,似不似很炫酷……估计会卡,后面有时间会写一个看看,因为这段时间要准备去实习了,很忙,有时间再说……

结语:终于把自己一直想发的话题发了, 在五月的最后一天。从点子的产生到长方形随机切割三角形的方法的实现,再到运动时遇到的一个又一个坑,我知道这个碎裂的实现有太多的不足,但我还是很开心,感觉就像自己发明了一个玩具一般

生命不休,奋斗不止~

Tag标签: 效果??
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规