如何在FF和IOS中使用剪辑路径多边形

我试图写一个小插件，以更有机的方式打开模式框，因此我决定对剪辑路径属性进行动画处理。

现在，此代码仅适用于chrome：http://codepen.io/meodai/pen/GgGzYo?editors=011

看起来firefox在剪辑路径属性中不支持polygon()。Safari&Mobile 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>

您可能需要查看svgs，因为您可以为多边形的点设置动画并将其变形为所需的形状。

演示

演示带有图像和标题

此演示使用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>

Clip路径只支持点值的数字，看起来你使用的是百分比/像素比例，这就是它在firefox中失败的原因。

更改为整数值：

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

您需要从coordArray中删除像素引用，并根据百分比计算实际的int值。

我遇到了这个问题，我的剪辑元素在iPhoneX上没有显示为剪辑。

添加webkit为我解决了这个问题：

clip-path: polygon(0 0, 0% 100%, 100% 0); -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);

我测试了很多可能性，但根据http://caniuse.com/#search=polygonFF（！）中不支持多边形。我尝试了很多可能性，但每次FF开发工具都告诉我这不是一个正确的值。

我的测试代码（来自你的代码笔）：

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);
});

相关内容

最新更新

热门标签：