IT技術互動交流平台

碎裂效果嚐試(clippath篇)

作者_|职工福利费会计分录:__constructor  發布日期___四川电信综合调度网址:2015-05-31 15:00:16

上一篇用canvas去實現碎裂的效果||-观海湾大沙滩,優點在於性能流暢_黄山奇石图片天狗望月,缺點在於無法顯示3D效果(沒有去嚐試WebGL碎裂的研究……)-__e2140怎么样、碎裂的實現也挺麻煩的|248彩票投注软件,畢竟canvas中的clip隻是獲取繪圖區域的一部分子區域|_-亿赢彩票首页,而並不是將某個元素取部分碎片化学公式编辑器,今天說的clip-path就不一樣啦_|仙楚2txt下载,我本身很喜歡用這個去實現碎裂

不了解clip-path可點擊鏈接參考了解-365天天彩票分快三:http://www.w3cplus.com/css3/css-svg-clipping.html

先說說它的優點

1.可以實現碎片3D運動_|学习考试好帮手,各種亂飄||-2019年128期四不像头像,6的不行

2.原理比較簡單||-038彩票不给提现,方便理解

3.大部分DOM元素都可以實現碎裂|_黄山奇石天狗望月图片!大部分DOM元素都可以實現碎裂||临川晚报!大部分DOM元素都可以實現碎裂_|_1010时时彩APP!

重要的事情說三遍_-河南四套,大部分DOM元素是什麼意思__|htcg55?無論你的div裏麵有啥_-尊宝娱乐平台app、亦或是你的表單-|_8万以内买什么车好、你的img標簽|-诺基亚6120c游戏、你的table||dnf今年是几周年,都可以實現碎裂-|_陈村天星影院,完全脫離了canvas繪圖環境的束縛-长寿益民网!

是不是很讓人期待-_金鹏图,但下麵要先潑一盆冷水|-_龙玛显脉片,在真實環境下__|雳剑电视剧 全集36,clip-path使用起來很不方便

1.IE不支持_-_08彩票注册,FF不支持

2.非常的卡038彩票是官网平台吗,因為DOM渲染的緣故||花都区教育局电话,一旦碎片太多||男子雨中殴打怀孕妻子,簡直卡成狗

既然有好有壞-_|雷公根粉,我們來看看效果吧~

這篇文章真的是我用心之作-_致哀 志哀,從想法到實現_|_惜春小礼阅读答案,沒有參考過網上一個任何資源_赢钱彩充值卡,網上clip-path基本上都是用來做外觀變動動畫的-_-电大作业答案网,可以實現很酷的效果||-描写大自然的句子。我在某天夜晚腦洞大開將其用作碎裂的實現_-17英里ktv团购,希望自己的研究能得到大家的認可

最開始出現的是一個表單---ovi套件官方下载,先貼出HTML和CSS代碼

<!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>

注意-|-11086苹果移动彩票,代碼中出現transition一律跳過|-爱情连连看刘洛汐,剛剛那個gif是用定時器實現動畫的-_腾讯名人坊陈晓,還有一種是利用transition實現動畫--_360游戏大厅手机版,兩種方式各有利弊_自助硬币存取款机,之後會貼栗子

先把js部分貼出來吧

<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>

因為比較簡單易懂-_陈思远微博,所以沒怎麼整理就放上來了

整個js的核心在兩個方法_|锅炉控制箱,一個是duang方法-奇乐影院,還有一個是cut方法-|恒丰银行待遇,這裏也主要就是說這兩個方法

cut方法的作用是將一個長方形切割成一定數量的三角形

參數有三__106官网彩票苹果版,分別是

1.三角形的數量多少(我稱為層數__-马亮照,稍後解釋)

2.長方形頂點坐標的數組

3.是否薄切形成三角形(默認為false|_2000彩平台,推薦為false)

詳細解釋一下_|_345彩票官网,第一個參數為層數-|不丹国王,為什麼用層數這個名詞|-178彩票平台,因為我隨機形成三角形的算法和層似乎有關係_038彩票官方正版,就用了這個命名

當iLayer為1的時候-|潮水时间表,會在長方形中隨機取一點|__18彩app官方下载,然後和四個頂點相連(這四個頂點也就是第二個參數)|--中秋整人短信,效果如下

當iLayer為2時--防爆机器人布里茨,首先取長方形的中心點_-_永久免费网游排行榜,將長方形平分成四塊_|-畅宜左旋肉碱,效果如下

然後每一塊在其中隨機取點與四個頂點相連接_|金庸2加强版,相當於4次iLayer=1-_|盈盈彩骗,用遞歸實現||-铜祖,效果如圖

iLayer等於3,4,5的時候同理-|-峨嵋山下少人行,一般去iLayer為5的時候長方形就被分割的非常的碎了

參數2說過了就是長方形頂點數組|_陈大鹏,參數3是否薄切在於分割三角形的時候會不會出現非常細小的三角形--|美视佳,比如下圖中出現的兩個

不推薦出現這樣的三角形-动漫吸奶,因為後期效果中還是均勻一點的三角形比較好看_-_注册会员送彩金不限id。這樣cut方法就講好了__-皮肤病医院十大排名,然後說說duang方法|_炫舞团名。方法如其名-||云顶娱乐斗地主可提现,就是加特效的

第二個參數是一個數組|intel e5300,給的就是cut切割出來的n個三角形的數組集合-__106福利彩票安卓,然後克隆n個元素(長方形)-jellybird果冻酒,加上clip-path使其變成一塊一塊的_-众博国际娱乐,通過定時器使其運動起來~雖然沒注釋|_-熊猫人战袍在哪买,但代碼簡單_|陈冠希张柏芝图片,應該都能讀懂的

之前有說到transition和定時器效果的不同--168彩票手机APP苹果,下麵貼一個transition的栗子-笔秀素材网,其中iLayer取了5|||13彩邀请码,碎的很徹底__038彩票有人用吗?,大家看一下效果

ÿ鷌䴕漥萬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.weishengjin.biz/edu/ewl/瀏覽器無法立刻計算出變化的數值差-__托罗西迪斯,transition就會失效-|_舜辉。所以我點擊關閉||苏醒李菲儿吵架,彈出show time並不是真的想show time_--蛇肉价格,而是必須給瀏覽器一個緩衝時間|_跟骨消痛贴。所以第一個gif采用定時器實現時就沒有出現show time

2.transition是數值上的變化|||01彩票真的吗?,但是不能從無到有_众购彩票手机官网。比方說left屬性0px到600px可以有動畫|-11086移动彩票下载,但是本身沒有left|--美女一级片,直接設置一個left為600px-|胡静雨,是沒有變化的

3.既然transition坑比較多為啥不全部用定時器呢_--盈彩被骗?因為iLayer過大時無法使用定時器__石家庄散打,原因我給定時器設置的間隔是30ms-|青岛市教育人事网,當iLayer比較大比如5的時候-_-永盛彩彩票网靠谱吗,30ms的時間根本就沒有處理完那麼多三角形的變化|-_美橙表业官网,會出現很嚴重的bug--众发平台下载,隻能用transition……

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

展望-__虚拟网短号查长号:

這種方式性能是很大的問題_偷窥之电车痴汗,關鍵在於能不能盡可能的優化易旺彩票网正规吗,iLayer設置的合理值||众赢彩票官网?用類型化數組使其加快性能-||盈盈彩是赌博吗?希望這個方法後麵會有大展拳腳的時候___人形何首乌!|-雷霆扫毒中介人是谁!

想象中一個效果是可以將頁麵中的東西切片分割再重組|__336时时彩网站,比方說當用戶點擊一個鏈接苏州干将西路535号,整個頁麵碎掉陈公博,再還原的時候就變成一個新的頁麵_-闪电浏览器,似不似很炫酷……估計會卡-||云顶彩票平台,後麵有時間會寫一個看看-_致青春台词,因為這段時間要準備去實習了|_助赢软件官网下载,很忙诺基亚6700s拆机,有時間再說……

結語-|永盛国际登录网站真人在线:終於把自己一直想發的話題發了--尊彩网可信吗, 在五月的最後一天_-阿米果。從點子的產生到長方形隨機切割三角形的方法的實現--亿彩彩票app登录,再到運動時遇到的一個又一個坑_||100元倍投方案,我知道這個碎裂的實現有太多的不足||钱货两讫,但我還是很開心-_移动彩票首页,感覺就像自己發明了一個玩具一般

生命不休-|帅猴手机网,奮鬥不止~

延伸閱讀||_鹿喜微断食纤体:

Tag標簽__-kc2005: 效果  
  • 專題推薦

  • Windows7係統入門 優化 技巧技術專題
  • Windows7係統專題 無論是升級操作係統|_盐城一中吧、資料備份-|-陈雅倩、加強資料的安全及管...... 詳細
About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯係方式
本站內容來自於互聯網,僅供用於網絡技術學習,學習中請遵循相關法律法規
幸运飞艇快乐时时彩旺旺彩票秒速快3秒速飞艇千禧彩票

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!