基于clip-path的元素碎片飞入动效demo

基于clip-path的猖獗元素的散装拼凑动作效果

2016/06/08 · CSS ·
clip-path

原著出处:
张鑫旭(@张鑫旭)   

澳门太陽城集团登录网址,大器晚成、先看作用

您能够狠狠地方击这里:基于clip-path的要素碎片飞入动作效果demo

澳门太阳集团城网址 1

二、完毕原理

效果与利益本质上是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]基于clip-path的元素碎片飞入动效demo。 { opacity: 0; } .active .clip[style]基于clip-path的元素碎片飞入动效demo。 { will-change:
transform; animation: noTransform .5s both; } @keyframes noTransform {
to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
.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);
    }
}

基于clip-path的元素碎片飞入动效demo。其中,will-change功效是让动画片更通畅,可参见小编在此以前文章:“采纳CSS3
will-change升高页面滚动、动画等渲染品质”。

.active .clip[style]这段CSS表示的情趣是,只要被剪裁的三角们的父级有了类名active,
全体的三角形的职位就不是放肆遍及,而是会以卡通格局归位到其原来的岗位。没错,是具有,大家从未必要对每贰个剪裁的三角碎片做动画,只要归位就可以。

通过toggle类名active基于clip-path的元素碎片飞入动效demo。,
碎片的动作效果就可以不停地展现,经测量试验,在移动端效果也是正确的。

日前,除了IE浏览器和Android4.3-都帮忙了clip-path,然则还需求-webkit-村办前缀。

三、我也想选择

基于clip-path的元素碎片飞入动效demo。本身花了点武术封装了四个方式,1K转运一点,代码如下(我们可以直接放到项目JS中或单独个JS文件):

/** * @description 任性成分碎片化,同盟CSS能够有零星拼凑特效
越多内容参见 * @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}};

1
2
3
4
5
6
7
/**
* @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);

1
clipPath(ele);

其中,ele为DOM元素,clipPath方法基于原生JS书写,不相信任别的JS框架,对于不帮助clip-path的浏览器未有效应。再次来到值是布尔值truefalse,
返回true表示浏览器援救clip-pathfalse为不补助。

代码中的distance:60表示碎片的大小,越小碎片越来越多,对质量的考验就越大。

比如说,demo普通话字和图表的应用:

var eleText = document.getElementById(‘text’), eleImage =
document.getElementById(‘image’); // 碎片特效开端化 clipPath(eleText);
clipPath(eleImage);

1
2
3
4
5
6
var eleText = document.getElementById(‘text’),
    eleImage = document.getElementById(‘image’);
    
// 碎片特效初始化
clipPath(eleText);
clipPath(eleImage);

亟待专一的是:

  1. 应用动作效果的非得是absolute相对定位成分。一来效果必得,二来品质考虑衡量;
  2. 使用动效的成分不要太复杂,可能对性能会有考验;
  3. 原本被用来打碎的因素一直都在的,那样,碎片拼接处的空隙就看不出来啦!

四、结束语

自身写的率先版JS中的碎片布满是为私行遍及,基本上根据作者方位随机遍布在4个角的趋势上;这里给我们来得的是真随机,约等于最右侧的散装或者是从最右面飞过来的,所以效果要更爆裂一点。

好了,其余就没怎么了,三个小特效而已。

实在说穿了,并从未多大的难度,一点JS+一点CSS。关键是想开好的肃清思路。如何技能有好的解决思路呢,须求对前面三个是真爱,那样你会直接把前端放在脑中,大势所趋就能够是或不是迸出非常多很好的思绪,创意和解决方案了!不然,永世都一定要吠影吠声。

1 赞 2 收藏
评论

澳门太阳集团城网址 2

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图