首页 > 代码库 > 基于clip-path的任意元素的碎片拼接动效(源自鑫空间)
基于clip-path的任意元素的碎片拼接动效(源自鑫空间)
一、实现原理.
效果本质上是CSS3动画,就是旋转transform:rotate和位移:transform:translate,只是旋转和位移的部件是三角碎片而已。三角是使用CSS3 clip-path剪裁出来的。
JS把元素剪裁成一个个等腰直角三角形,然后随机分布在四周，然后通过CSS3 animation动画,让所有的在四周的元素归位就可以了。
于是,核心CSS如下：
.clip[style] {
opacity: 0;
}
.active .clip[style]{
will-change: transform;
animation: noTransform .5s both;
}
@keyframes noTransform {
to {
opacity: 1;
transform: translate3d(0,0,0) rotate(0);
}
}
其中,will-change作用还是让动画更流畅。
.active .clip[style] 这段CSS的意思是，只要被剪裁的三角们的父级有了类型名active，所有三角形的位置就不是随机分布,而是会以动画的形式归位到原本的位置。没错，是所有，没有必要对每一个剪裁的三角碎片做动画。
通过toggle类型active，碎片的效果就可以不停的呈现。
二、封装一个剪裁方法。
/*** @description 任意元素碎片化，配合CSS可以有碎片拼接特效 更多内容参见 http://www.zhangxinxu.com/wordpress/?p=5426* @author zhangxinxu(.com)* @license MIT [保留此段注释信息署名] */var clipPath=function(t){if(!t){return false}t.removeAttribute("id");var r={height:t.clientHeight,width:t.clientWidth,distance:60,html:t.outerHTML};if(window.getComputedStyle(document.body).webkitClipPath){var a=r.distance,n=r.width,e=r.height;var o="";for(var i=0;i<n;i+=a){for(var h=0;h<e;h+=a){var d=[i,h],u=[i,h+a],l=[i+a,h+a],v=[i+a,h];var c=[i+a/2,h+a/2];var m=[[d,c,v],[d,u,c],[c,u,l],[v,c,l]];m.forEach(function(t,a){var n=t.map(function(t){return t.map(function(t){return t+"px"}).join(" ")}).join();var e="-webkit-clip-path: polygon("+n+");";var i=Math.random();var h=i<.5?-1:1;var u=[600*(.5-Math.random()),600*(.5-Math.random())];var l="translate("+u.map(function(t){return t+"px"}).join()+") rotate("+Math.round(h*360*Math.random())+"deg)";var v="-webkit-transform:"+l+";transform:"+l+";";o=o+r.html.replace(‘">‘,‘" style="‘+e+v+‘">‘)})}}t.parentNode.innerHTML=r.html+o;return true}else{t.className+=" no-clipath";return false}};
其中，ele为DOM元素，clipPath方法基于原生JS书写，不依赖其他JS框架，对于不支持clip-path的浏览器没有效果。返回值是布尔值true或false, 返回true表示浏览器支持clip-path，false为不支持。
代码中的distance:60表示碎片的大小，越小碎片越多，对性能的考验就越大。
例如，demo中文字和图片的使用：
var eleText = document.getElementById(‘text‘), eleImage = document.getElementById(‘image‘); // 碎片特效初始化clipPath(eleText);clipPath(eleImage);
需要注意的是：
- 应用动效的务必是absolute绝对定位元素。一来效果必须，二来性能考量；
- 应用动效的元素不要太复杂，可能对性能会有考验；
- 原始被用来粉碎的元素一直都在的，这样，碎片拼接处的间隙就看不出来啦！
基于clip-path的任意元素的碎片拼接动效(源自鑫空间)