如何在FF和IOS中使用剪輯路徑多邊形

Question

我嘗試編寫一個小插件，以更有機的方式打開模式框，因此我決定爲剪輯路徑屬性設置動畫效果。

下面這段代碼只能在Chrome： http://codepen.io/meodai/pen/GgGzYo?editors=011

它看起來像firefox does not supportpolygon()在剪輯路徑屬性。 Safari瀏覽器&移動Safari也與它鬥爭。

是否有類似的簡單方法在Firefox和Safari以及Mobile Safari中完成此項工作？任何想法我怎麼能解決這個問題？

這裏是一個工作示例：

var $ov = $('.overlay'); 

$(document).on('click touchstart', '.inner', function(){ 
    var coords, coordArray, coordsString; 

    coords = this.getBoundingClientRect(); 

    coordArray = [ 
    Math.floor(parseInt(coords.left)) + 'px ' + Math.floor(parseInt(coords.top)) + 'px', 
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil(parseInt(coords.top)) + 'px', 
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil((parseInt(coords.top) + parseInt(coords.height))) + 'px', 
    Math.ceil(parseInt(coords.left)) + 'px ' + Math.floor((parseInt(coords.top) + parseInt(coords.height))) + 'px' 
    ]; 


    coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')'; 

    $ov.css({ 
    '-webkit-clip-path': coordsString, 
    'clip-path': coordsString 
    }); 

    setTimeout(function(){ 
    $ov.addClass('show'); 
    },50); 

    setTimeout(function(){ 
    coordsString = 'polygon(0% 0%,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 
     'clip-path': coordsString 
    }); 
    },100); 
    setTimeout(function(){ 
    coordsString = 'polygon(0% 0%,100% 0%,' + coordArray[2] + ',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 
     'clip-path': coordsString 
    }); 
    },180); 
    setTimeout(function(){ 
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 
     'clip-path': coordsString 
    }); 
    },260); 

    setTimeout(function(){ 
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,0 100%)'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 
     'clip-path': coordsString 
    }); 
    },340); 

    // reverse 
    setTimeout(function(){ 
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 
     'clip-path': coordsString 
    }); 
    },1500); 

    setTimeout(function(){ 
    coordsString = 'polygon(0% 0%,100% 0%,' + coordArray[2] + ',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 
     'clip-path': coordsString 
    }); 
    },1580); 
    setTimeout(function(){ 
    coordsString = 'polygon(0% 0%,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 
     'clip-path': coordsString 
    }); 
    },1640); 
    setTimeout(function(){ 
    coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 
     'clip-path': coordsString 
    }); 
    },1740); 



    setTimeout(function(){ 
    $ov.removeClass('show'); 
    },2000); 

}); 

body, html { 
    background: silver; 
} 

.grid { 
    float: left; 
    width: 25%; 
    height: 25vw; 
    box-shizing: border-box; 
    position: relative; 
} 

.inner { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    bottom: 10px; 
    right: 10px; 
    background: #ddd; 
    -webkit-transition: background-color 111ms; 
      transition: background-color 111ms; 
} 
.inner:hover { 
    background: #fff; 
} 

.overlay { 
    opacity: 0; 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background: #fff; 
    pointer-events: none; 
    box-sizing: border-box; 
    padding: 20px; 
} 

.overlay.show { 
    opacity: 1; 
    will-change: clip-path; 
    -webkit-transition: clip-path 200ms; 
      transition: clip-path 200ms; 
    -webkit-transition: -webkit-clip-path 200ms; 
      transition: -webkit-clip-path 200ms; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="grid"> 
    <div class="inner"></div> 
</div> 
<div class="overlay"></div> 

Answer 1

您可能需要查看svgs，因爲您可以對多邊形的點進行動畫並將其變形爲所需的形狀。

DEMO

DEMO With images and titles

該演示使用snap.svg庫，使廣場和操縱它們的點擊事件。
它目前是還沒完成並且有一些錯誤，但你應該明白的想法。

我總是重構了代碼，這要感謝rlemon幫助我更好地實現它。我在最新的FF和Chrome中測試了它，並且用戶報告說它可以在Safari上使用iphone。

使用多邊形制作項目，點擊時添加正方形多邊形，並逐個動畫顯示點。

var items = [ 
 
    [ 1, 1,24, 1,24,24, 1,24], 
 
    [26, 1,49, 1,49,24,26,24], 
 
    [51, 1,74, 1,74,24,51,24], 
 
    [76, 1,99, 1,99,24,76,24], 
 
    [ 1, 26,24, 26,24,49, 1,49], 
 
    [26, 26,49, 26,49,49,26,49], 
 
    [51, 26,74, 26,74,49,51,49], 
 
    [76, 26,99, 26,99,49,76,49], 
 
    [ 1, 51,24, 51,24,74, 1,74], 
 
    [26, 51,49, 51,49,74,26,74], 
 
    [51, 51,74, 51,74,74,51,74], 
 
    [76, 51,99, 51,99,74,76,74], 
 
    [ 1, 76,24, 76,24,99, 1,99], 
 
    [26, 76,49, 76,49,99,26,99], 
 
    [51, 76,74, 76,74,99,51,99], 
 
    [76, 76,99, 76,99,99,76,99] 
 
], 
 
    item = [],points= [],i, p=[],open = 0, 
 
    s = Snap().attr({viewBox:"0 0 100 100","fill":"#585247"}); 
 

 
function runAnimations(el) { 
 
    if(!animationSequences.length) return; 
 
    var sequence = animationSequences.shift(); 
 
    el.animate(sequence,120,mina.linear, runAnimations.bind(null,el)); 
 
} 
 

 

 
function register(x,i) { 
 
    item[i] = s.polygon(items[i]); 
 
    item[i].click(function() { 
 
    var featured = s.polygon(items[i]).attr({"fill":"#585247"}); 
 
    p = items[i]; 
 
    animationSequences = [ 
 
     {"points": p[0]/2+","+p[1]/2+","+p[2]+","+p[3]+","+p[4]+","+p[5]+","+p[6]+","+p[7]}, 
 
     {"points": p[0]/3+","+p[1]/3+",100,0,100,100,"+p[6]+","+p[7]}, 
 
     {"points": p[0]/4+","+p[1]/4+",100,0,100,100,0,100"}, 
 
     {"points": "0,0,100,0,100,100,0,100"}, 
 
    ]; 
 
    runAnimations(featured); 
 
    featured.animate({"fill":"#ACA696"},300); 
 
    featured.click(function(){ 
 
     this.stop().animate({"points":p,"fill":"#585247"},200,mina.linear,featured.remove); 
 
    }); 
 
    }); 
 
} 
 
items.forEach(register);

*{margin:0;padding:0;} 
 
body{background:#E3DFD2;} 
 
svg{display:block;}

<script src="http://thisisa.simple-url.com/js/snapsvg.js"></script>

Answer 2

夾路徑僅支持點值的數，它看起來像你正在使用的百分比/像素秤這是爲什麼呢將在Firefox中失敗。

更改爲整數值：

coordsString = 'polygon(0 0,123 0,' + coordArray[2] + ',' + coordArray[3] + ')'; 
$ov.css({ 
    '-webkit-clip-path': coordsString, 
    'clip-path': coordsString 
}); 

你將需要刪除從coordArray像素引用和百分比計算實際INT值。

Answer 3

我測試過很多的可能性，但根據http://caniuse.com/#search=polygon多邊形FF不支持（！）。我嘗試了很多可能性，但每次FF開發工具都告訴我這不是一個正確的值。

我的測試代碼（從codepen）：

var $ov = $('.overlay'); 

$(document).on('click touchstart', '.inner', function(){ 
    var coords, coordArray, coordsString; 
    var windowWidth = window.innerWidth + ""; 
    coords = this.getBoundingClientRect(); 

    coordArray = [ 
    Math.floor(parseInt(coords.left)) + ' ' + Math.floor(parseInt(coords.top)) + '', 
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + ' ' + Math.ceil(parseInt(coords.top)) + '', 
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + ' ' + Math.ceil((parseInt(coords.top) + parseInt(coords.height))) + '', 
    Math.ceil(parseInt(coords.left)) + ' ' + Math.floor((parseInt(coords.top) + parseInt(coords.height))) + '' 
    ]; 


    coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')'; 

    $ov.css({ 
    '-webkit-clip-path': coordsString, 

    'clip-path': coordsString 
    }); 

    setTimeout(function(){ 
    $ov.addClass('show'); 
    },50); 

    setTimeout(function(){ 
    coordsString = 'polygon(0 0,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 

     'clip-path': coordsString 
    }); 
    },100); 
    setTimeout(function(){ 
    coordsString = 'polygon(0 0 ,'+windowWidth+' 0,' + coordArray[2] + ',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 

     'clip-path': coordsString 
    }); 
    },180); 
    setTimeout(function(){ 
    coordsString = 'polygon(0 0,'+windowWidth+' 0,'+windowWidth+' '+windowWidth+',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 

     'clip-path': coordsString 
    }); 
    },260); 

    setTimeout(function(){ 
    coordsString = 'polygon(0 0,'+windowWidth+' 0,'+windowWidth+' '+windowWidth+',0 '+windowWidth+')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 

     'clip-path': coordsString 
    }); 
    },340); 

    // reverse 
    setTimeout(function(){ 
    coordsString = 'polygon(0 0,'+windowWidth+' 0,'+windowWidth+' '+windowWidth+',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 

     'clip-path': coordsString 
    }); 
    },1500); 

    setTimeout(function(){ 
    coordsString = 'polygon(0 0,'+windowWidth+' 0,' + coordArray[2] + ',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 

     'clip-path': coordsString 
    }); 
    },1580); 
    setTimeout(function(){ 
    coordsString = 'polygon(0 0,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 

     'clip-path': coordsString 
    }); 
    },1640); 
    setTimeout(function(){ 
    coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 

     'clip-path': coordsString 
    }); 
    },1740); 



    setTimeout(function(){ 
    $ov.removeClass('show'); 
    },2000); 

});