微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

基于clip-path的任意元素的碎片拼接动效

2016-06-19 19:58 前端大全

(点击上方公众号,可快速关注)

作者:张鑫旭(@张鑫旭)

链接:http://www.zhangxinxu.com/wordpress/2016/06/fragment-stitching-clip-path/


一、先看效果


您可以狠狠地点击这里:基于clip-path的元素碎片飞入动效demo(http://www.zhangxinxu.com/study/201606/clip-path-piece-fly-into.html)



二、实现原理


效果本质上是CSS3动画,就是旋转(transform:rotate)和位移(transform:translate),只是旋转和位移的部件是三角碎片而已。


那三角从何而来,本质上是使用CSS3 clip-path剪裁出来的。


关于CSS3 clip-path可以参见我之前的文章:“CSS3 clip-path polygon图形构建与动画变换二三事”。


剪裁一个三角并不难,但是,如果把任意的元素剪裁成一个一个的三角呢?


这就需要借助JS来实现了。


JS把元素剪裁成一个一个的等腰直角三角形,然后随机分布在四周,然后,通过CSS3 animation动画,让所有的在四周的元素归为就可以。因为CSS3 animation动画关键帧中的CSS样式权重似乎要比style大。


于是,我们有如下核心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作用是让动画更流畅,可参见我之前文章:“使用CSS3 will-change提高页面滚动、动画等渲染性能”。


.active .clip[style]这段CSS表示的意思是,只要被剪裁的三角们的父级有了类名active, 所有的三角的位置就不是随机分布,而是会以动画形式归位到其原本的位置。没错,是所有,我们没有必要对每一个剪裁的三角碎片做动画,只要归位就可以。


通过toggle类名active, 碎片的动效就可以不停地呈现,经测试,在移动端效果也是不错的。


目前,除了IE浏览器和Android4.3-都支持了clip-path,不过还需要-webkit-私有前缀。


三、我也想使用


我花了点功夫封装了一个方法,1K出头一点,代码如下(大家可以直接放到项目JS中或独立个JS文件):


/**

* @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','" style="'+e+v+'">')})}}t.parentNode.innerHTML=r.html+o;return true}else{t.className+=" no-clipath";return false}};


语法如下:


clipPath(ele);


其中,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);


需要注意的是:


  1. 应用动效的务必是absolute绝对定位元素。一来效果必须,二来性能考量;

  2. 应用动效的元素不要太复杂,可能对性能会有考验;

  3. 原始被用来粉碎的元素一直都在的,这样,碎片拼接处的间隙就看不出来啦!


四、结束语


我写的第一版JS中的碎片分布是为随机分布,基本上根据自身方位随机分布在4个角的方向上;这里给大家展示的是真随机,也就是最左边的碎片可能是从最右侧飞过来的,所以效果要更爆裂一点。


好了,其他就没什么了,一个小特效而已。


其实说穿了,并没有多大的难度,一点JS+一点CSS。关键是想到好的解决思路。如何才能有好的解决思路呢,需要对前端是真爱,这样你会一直把前端放在脑中,自然而然就会是不是迸出很多很好的思路,创意和解决方案了!否则,永远都只能拾人牙慧。



【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 详解Javascript中的Object对象 结合个人经历总结的前端入门方法 前端不为人知的一面–前端冷知识集锦 一份优秀的前端开发工程师简历是怎么样的? 浅谈Web缓存
猜您喜欢 JSPatch 实现原理详解 Spring.NET学习笔记9——打造简易的依赖注入框架(练习篇) 独门妙计:轻松管理NoSQL与关系型数据库 开源大数据在Facebook与Dropbox的实践 .NET 程序员不容错过的 10 篇技术文章