为什么我的剪辑路径缩放动画模糊？

Question

我正在开发一个带有全屏加载屏幕的网站，一旦加载了网站中的所有内容，中间的框（其中有一个 SVG clip-path）就会故意变大直到填满整个屏幕。

但是，我试图弄清楚为什么在制作动画时框看起来很模糊。我尝试过所有 GPU 加速方法，包括 transform: translateZ(0)、backface-visibility 和 perspective，但无济于事。

#loading {position:fixed; width:100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content:center; background: #34d1bf;}
#loading .bar {width: 169px; height: 160px; clip-path: url(#kframe); -webkit-clip-path: url(#kframe); background:#000; overflow: hidden; transform: translateZ(0); animation: loaded 2000ms linear forwards infinite;}

@keyframes loaded {
    0% {transform: scale(1);}
    1% {transform: scale(1);}
    
    32% {transform: scale(1);}
    33% {transform: scale(5);}
    
    65% {transform: scale(5);}
    66% {transform: scale(10);}
    
    99% {transform: scale(10);}
    100% {transform: scale(15);}
}

<div id="loading">
<div class="bar"></div>
</div>

<div style="height: 0; overflow: hidden;">
<svg width="0" height="0" viewBox="0 0 256 256">
<defs>
    <clipPath id="kframe" clipPathUnits="objectBoundingBox">
        <polygon transform="scale(0.00390 0.00390)" points="256,0 0,0 0,72 18,72 18,184 0,184 0,256 222.5,256 256,220 256,36 222.5,36 "/>
    </clipPath>
</defs>
</svg>
</div>

更新：这是一张模糊最明显的一帧照片，在我电脑上的本地版本上进行了测试。经测试，它在 Chrome 和 Safari 上的发生率更高。

Answer 1

您的代码正在剪切 div 元素，然后对其进行缩放。

相反，反过来做。缩放 div 然后剪辑它。一种方法是为 div 的宽度和高度设置动画。

#loading {
  position:fixed;
  width:100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content:center;
  background: #34d1bf;
}

#loading .bar {
  width: 169px;
  height: 160px;
  clip-path: url(#kframe);
  -webkit-clip-path: url(#kframe);
  background:#000;
  overflow: hidden;
  transform: translateZ(0);
  animation: loaded 2000ms linear forwards infinite;
}

@keyframes loaded {
    0% {width: 169px; height: 160px;}
    1% {width: 169px; height: 160px;}
    
    32% {width: 169px; height: 160px;}
    33% {width: 845px; height: 800px;}
    
    65% {width: 845px; height: 800px;}
    66% {width: 1690px; height: 1600px;}
    
    99% {width: 1690px; height: 1600px;}
    100% {width: 2535px; height: 2400px;}
}

<div id="loading">
<div class="bar"></div>
</div>

<div style="height: 0; overflow: hidden;">
<svg width="0" height="0" viewBox="0 0 256 256">
<defs>
    <clipPath id="kframe" clipPathUnits="objectBoundingBox">
        <polygon transform="scale(0.00390 0.00390)" points="256,0 0,0 0,72 18,72 18,184 0,184 0,256 222.5,256 256,220 256,36 222.5,36 "/>
    </clipPath>
</defs>
</svg>
</div>