荣耀彩票代理

IT技术互动交流平台

碎裂效果尝试(clippath篇)

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

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

BULEJIEclip-pathKEDIANJILIANJIECANKAOLEJIE:http://www.w3cplus.com/css3/css-svg-clipping.html

XIANSHUOSHUOTADEYOUDIAN

荣耀彩票代理1.KEYISHIXIANSUIPIAN3DYUNDONG,GEZHONGLUANPIAO,6DEBUXING

2.YUANLIBIJIAOJIANDAN,FANGBIANLIJIE

3.DABUFENDOMYUANSUDOUKEYISHIXIANSUILIE!DABUFENDOMYUANSUDOUKEYISHIXIANSUILIE!DABUFENDOMYUANSUDOUKEYISHIXIANSUILIE!

荣耀彩票代理ZHONGYAODESHIQINGSHUOSANBIAN,DABUFENDOMYUANSUSHISHENMEYISI?WULUNNIDEdivLIMIANYOUSHA、YIHUOSHINIDEBIAODAN、NIDEimgBIAOQIAN、NIDEtable,DOUKEYISHIXIANSUILIE,WANQUANTUOLILEcanvasHUITUHUANJINGDESHUFU!

SHIBUSHIHENRANGRENQIDAI,DANXIAMIANYAOXIANPOYIPENLENGSHUI,ZAIZHENSHIHUANJINGXIA,clip-pathSHIYONGQILAIHENBUFANGBIAN

1.IEBUZHICHI,FFBUZHICHI

2.FEICHANGDEKA,YINWEIDOMXUANRANDEYUANGU,YIDANSUIPIANTAIDUO,JIANZHIKACHENGGOU

JIRANYOUHAOYOUHUAI,WOMENLAIKANKANXIAOGUOBA~

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

荣耀彩票代理ZUIKAISHICHUXIANDESHIYIGEBIAODAN,XIANTIECHUHTMLHECSSDAIMA

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    body,input,form{ margin:0; padding:0;}
    body{ overflow:hidden; background-color:#0FF;}
    
    #content{ width:600px; height:400px; margin:10px auto;
        -webkit-transform-style:preserve-3d;
        -webkit-perspective:800px;
        -webkit-perspective-origin:center center;
        transform-style:preserve-3d;
        perspective:800px;
        perspective-origin:center center;
    }
    
    #wrap{ width:560px; height:360px; box-shadow:2px 2px 4px 1px black; padding:20px; background-color:white; 
        transition:all 4s ease; 
        transform:rotateX(0deg) rotateY(0deg); 
         -webkit-transform-origin:center;
    }
    
    
    #wrap .fline{ height:70px; padding:10px; line-height:70px; text-align:center;}
    .fline span{ font-size:24px; font-family:Verdana, Geneva, sans-serif;}
    .fline input{ height:24px; width:200px;}
    .lastline input{ width:120px;}
</style>
</head>

<body>
    <div id="content">
        <div id="wrap">
            <form action=".">
                <div class="fline">
                    <span>Name:</span><input type="text" >
                </div>
                <div class="fline">
                    <span>Password:</span><input type="password" >
                </div>
                <div class="fline">
                    <span>Repeat Pass:</span><input type="password" >
                </div>
                <div class="fline lastline">
                    <input type="button" value="提交" >
                    <input type="button" value="关闭" id="shutdown" >
                </div>
            </form>
        </div>
    </div>
</body>
</html>

荣耀彩票代理ZHUYI,DAIMAZHONGCHUXIANtransitionYILVTIAOGUO,GANGGANGNEIGEgifSHIYONGDINGSHIQISHIXIANDONGHUADE,HAIYOUYIZHONGSHILIYONGtransitionSHIXIANDONGHUA,LIANGZHONGFANGSHIGEYOULIBI,ZHIHOUHUITIELIZI

XIANBAjsBUFENTIECHULAIBA

<script>
    var oWrap = document.getElementById('wrap'),
        oForm = oWrap.getElementsByTagName('form')[0],
        oShutdown = document.getElementById('shutdown'),
        oContent = document.getElementById('content');
        
    oShutdown.onclick = function(){
        var w = oWrap.offsetWidth,
            h = oWrap.offsetHeight;
            
        var arr = cut(3, [[0,0],[w+7,0],[w+7,h+7],[0,h+7]], false);  //+7因为有7像素的阴影
        
        duang(oWrap, arr);
    }
    
    function duang(obj, arr){
        var left = obj.offsetLeft,
            top = obj.offsetTop;
            
        var    aF = [];
        
        for(var i = 0;i < arr.length;i++){
            var tmpObj = obj.cloneNode(true);
            tmpObj.style.position = 'absolute';
            tmpObj.style.top = obj.offsetTop - 10 + 'px';
            tmpObj.className = 'test';
            
            
            str = 'polygon(';
            
            for(var j = 0;j < arr[i].length;j++){
                str += arr[i][j][0] + 'px ';
                str += arr[i][j][1] + 'px,'
            }
            
            str = str.slice(0, -1) + ')';

            tmpObj.style.WebkitClipPath = str;
            tmpObj.style.clipPath = str;
            
            
            aF.push((function(obj, x, y){
                
                return function(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);
        }
        
        var n = 0;
        
        setInterval(function(){
            
            for(var k = 0;k < aF.length;k++){
                aF[k](n);
            }
            n++;
            
        }, 30);
        
        obj.style.display = 'none';
    }
    
    function cut(iLayer, aPoint, isThin){
        var aResult = [];
        
        if(arguments[2] == undefined){
            isThin = false;
        }
        
        var x = [],
            y = [];
            
        for(var i = 0;i < aPoint.length;i++){
            x.push(aPoint[i][0]);
            y.push(aPoint[i][1]);
        }
        
        var dealX = x.sort();
        var dealY = y.sort();
        var randX,randY;
        
        var maxX = Math.max.apply(dealX, dealX),
            maxY = Math.max.apply(dealY, dealY),
            minX = Math.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;
            }else{
                randX = Math.floor(Math.random() * (maxX - minX)) + minX;
                randY = Math.floor(Math.random() * (maxY - minY)) + minY;
            }
            
            for(i = 0;i < aPoint.length;i++){
                var tmp = aPoint[i+1] || aPoint[0];
                aResult.push([aPoint[i], tmp, [randX, randY]]);
            }
        }else{
            randX = (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],[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));
        }
        
        return aResult;
    }
</script>

YINWEIBIJIAOJIANDANYIDONG,SUOYIMEIZENMEZHENGLIJIUFANGSHANGLAILE

ZHENGGEjsDEHEXINZAILIANGGEFANGFA,YIGESHIduangFANGFA,HAIYOUYIGESHIcutFANGFA,ZHEILIYEZHUYAOJIUSHISHUOZHEILIANGGEFANGFA

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

CANSHUYOUSAN,FENBIESHI

荣耀彩票代理1.SANJIAOXINGDESHULIANGDUOSHAO(WOCHENGWEICENGSHU,SHAOHOUJIESHI)

2.ZHANGFANGXINGDINGDIANZUOBIAODESHUZU

3.SHIFOUBOQIEXINGCHENGSANJIAOXING(MORENWEIfalse,TUIJIANWEIfalse)

XIANGXIJIESHIYIXIA,DIYIGECANSHUWEICENGSHU,WEISHENMEYONGCENGSHUZHEIGEMINGCI,YINWEIWOSUIJIXINGCHENGSANJIAOXINGDESUANFAHECENGSIHUYOUGUANXI,JIUYONGLEZHEIGEMINGMING

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

DANGiLayerWEI2SHI,SHOUXIANQUZHANGFANGXINGDEZHONGXINDIAN,JIANGZHANGFANGXINGPINGFENCHENGSIKUAI,XIAOGUORUXIA

RANHOUMEIYIKUAIZAIQIZHONGSUIJIQUDIANYUSIGEDINGDIANXIANGLIANJIE,XIANGDANGYU4CIiLayer=1,YONGDIGUISHIXIAN,XIAOGUORUTU

荣耀彩票代理iLayerDENGYU3,4,5DESHIHOUTONGLI,YIBANQUiLayerWEI5DESHIHOUZHANGFANGXINGJIUBEIFENGEDEFEICHANGDESUILE

CANSHU2SHUOGUOLEJIUSHIZHANGFANGXINGDINGDIANSHUZU,CANSHU3SHIFOUBOQIEZAIYUFENGESANJIAOXINGDESHIHOUHUIBUHUICHUXIANFEICHANGXIXIAODESANJIAOXING,BIRUXIATUZHONGCHUXIANDELIANGGE

BUTUIJIANCHUXIANZHEIYANGDESANJIAOXING,YINWEIHOUQIXIAOGUOZHONGHAISHIJUNYUNYIDIANDESANJIAOXINGBIJIAOHAOKAN。ZHEIYANGcutFANGFAJIUJIANGHAOLE,RANHOUSHUOSHUOduangFANGFA。FANGFARUQIMING,JIUSHIJIATEXIAODE

荣耀彩票代理DIERGECANSHUSHIYIGESHUZU,JIDEJIUSHIcutQIEGECHULAIDEnGESANJIAOXINGDESHUZUJIHE,RANHOUKELONGnGEYUANSU(ZHANGFANGXING),JIASHANGclip-pathSHIQIBIANCHENGYIKUAIYIKUAIDE,TONGGUODINGSHIQISHIQIYUNDONGQILAI~SUIRANMEIZHUSHI,DANDAIMAJIANDAN,YINGGAIDOUNENGDUDONGDE

ZHIQIANYOUSHUODAOtransitionHEDINGSHIQIXIAOGUODEBUTONG,XIAMIANTIEYIGEtransitionDELIZI,QIZHONGiLayerQULE5,SUIDEHENCHEDI,DAJIAKANYIXIAXIAOGUO

鷌䴕漥萬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://chsp8.com/edu/ewl/浏览器无法立刻计算出变化的数值差,transition就会失效。所以我点击关闭,弹出show time并不是真的想show time,而是必须给浏览器荣耀彩票代理一个缓冲时间。所以第一个gif采用定时器实现时就没有出现show time

2.transitionSHISHUZHISHANGDEBIANHUA,DANSHIBUNENGCONGWUDAOYOU。BIFANGSHUOleftSHUXING0pxDAO600pxKEYIYOUDONGHUA,DANSHIBENSHENMEIYOUleft,ZHIJIESHEZHIYIGEleftWEI600px,SHIMEIYOUBIANHUADE

荣耀彩票代理3.JIRANtransitionKENGBIJIAODUOWEISHABUQUANBUYONGDINGSHIQINI?YINWEIiLayerGUODASHIWUFASHIYONGDINGSHIQI,YUANYINWOJIDINGSHIQISHEZHIDEJIANGESHI30ms,DANGiLayerBIJIAODABIRU5DESHIHOU,30msDESHIJIANGENBENJIUMEIYOUCHULIWANNEIMEDUOSANJIAOXINGDEBIANHUA,HUICHUXIANHENYANZHONGDEbug,ZHINENGYONGtransition……

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

ZHANWANG:

ZHEIZHONGFANGSHIXINGNENGSHIHENDADEWENTI,GUANJIANZAIYUNENGBUNENGJINKENENGDEYOUHUA,iLayerSHEZHIDEHELIZHI?YONGLEIXINGHUASHUZUSHIQIJIAKUAIXINGNENG?XIWANGZHEIGEFANGFAHOUMIANHUIYOUDAZHANQUANJIAODESHIHOU!!

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

荣耀彩票代理JIEYU:ZHONGYUBAZIJIYIZHIXIANGFADEHUATIFALE, ZAIWUYUEDEZUIHOUYITIAN。CONGDIANZIDECHANSHENGDAOZHANGFANGXINGSUIJIQIEGESANJIAOXINGDEFANGFADESHIXIAN,ZAIDAOYUNDONGSHIYUDAODEYIGEYOUYIGEKENG,WOZHIDAOZHEIGESUILIEDESHIXIANYOUTAIDUODEBUZU,DANWOHAISHIHENKAIXIN,GANJUEJIUXIANGZIJIFAMINGLEYIGEWANJUYIBAN

SHENGMINGBUXIU,FENDOUBUZHI~

Tag标签:   
  • 专题推荐

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