SVG动画在调整大小后非常滞后(专家)

SVG Animations Very Laggy after Resizing (Expert)?

本文关键字：滞后 非常 专家 动画 调整 SVG      更新时间：2023-09-26

所以我添加一个SVG到我的网站。我还通过更改一个名为"background-svg"的类来调整这个svg的大小，以适合我的大部分屏幕，您将在下面的代码中看到。

基本上，如果你让SVG变大，它就会变得超级滞后(就像它的动画一样)，甚至页面上的其他动画也会变得超级滞后。Try On JSFIDDLE

如果您使SVG变小，则动画是平滑的。在上面的JSFIDDLE链接上，尝试将窗口变小(您将看到更好的动画)，然后将窗口变大(再次出现延迟动画)。

问题只发生在Chrome和Safari…FireFox无延迟

我的SVG: 

<svg class="background-svg"  viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
     <filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
        <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
        <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
        <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
        <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
        <feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
        <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
        <feColorMatrix values="0 0 0 0 0.647959184   0 0 0 0 0.549016553   0 0 0 0 0.549016553  0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
        <feMerge>
           <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
           <feMergeNode in="SourceGraphic"></feMergeNode>
           <feMergeNode in="shadowMatrixInner1"></feMergeNode>
        </feMerge>
     </filter>
  </defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
     <g id="Artboard-1" fill="#8B65E4">
        <path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path>
        <path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path>
        <path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path>
     </g>
    <foreignObject x="8%" y="20%" width="80%" height="100%"
           >
           <body xmlns="http://www.w3.org/1999/xhtml">
              <div xmlns="http://www.w3.org/1999/xhtml">
                 <h1>
                    Hey! <br />I'm <span>someperson</span> <span class="info">I like</span>
                 </h1>
              </div>
           </body>
        </foreignObject>
  </g>
</svg>

我的CSS: 

@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto);
body {
  height: 100vh;
  overflow: hidden;
  text-align: center;
  font-family: "Roboto", sans-serif;
}
.background-svg{
  position: absolute;
  top: 0;
  left: 20%;
  width: 80%;
  height: 80%;
}

h1 {
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 2px;
  color: #fff;
  text-align: left;
}
h1 .info {
  display: block;
  color: #CFBDF9;
  font-size: 16px;
  letter-spacing: 0px;
}
.box {
  text-align: right;
  padding: 0px 40px;
}

.box-item {
  display: inline-block;
  color: #fff;
  font-size: 30px;
  padding-right: 20px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#Triangle-1 {
  -webkit-animation: box 2.5s infinite; /* Main Anim is super laggy on chrome and safary*/
  -moz-animation: box 2.5s infinite; /* Main Anim seems good on Firefox*/
}
#Triangle-2 { 
  -webkit-animation: box2 1s infinite; /* same as above */
  -moz-animation: box2 1s infinite; /* same as above */
}
@keyframes box2 {
  10% {
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  90% {
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
}
@keyframes box {
  10% {
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  90% {
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}

TL;DR:如果SVG较大，则SVG动画延迟，但如果SVG较小，则动画平滑。

这与使用纯CSS动画时GPU的使用有关。虽然像transform这样的大多数属性都是"GPU注入"的，但这并不是一个保证。如果你要用JavaScript做这个;您可能会看到显著的性能增强。

在运行这些动画时，我没有得到太多的"延迟"。

这篇文章是针对JS动画库的，但也清楚地解释了这个概念。

如何渲染CSS动画

就性能随窗口缩放而变化而言，它与每个动画周期所改变/渲染的像素数量有关。

例如，如果你的矢量SVG在500x500px画布上绘制一个形状，占用75%的面积，那么如果你有一个2000x2000px画布，形状占用75%的面积，你将绘制更少的像素。

由于这是一遍又一遍地计算，然后在使用SVG时重新绘制，因此在缩放时可能存在显著的性能差异。

由于浏览器的构建和呈现方式不同，在这种情况下，FireFox能够比其他浏览器更好地处理这些形状的反复重绘。

我注意到两个主要问题:

  • css属性的顺序:转换和过渡属性在供应商指定的属性之后，所以我把它放在他们之前

  • 使用2D转换，它不利用硬件加速，所以我用等效的3D转换改变它们

下面的代码片段包含了我修改的部分内容，您可以在这个小提琴中尝试一下并给我一个反馈

#Triangle-2 {
    animation: box2 1s infinite;
    -o-animation: box2 1s infinite;
    -moz-animation: box2 1s infinite;
    -webkit-animation: box2 1s infinite;
}
@keyframes box2 {
    10% {
        transform: rotate(1deg);
        -o-animation: rotateZ(1deg);
        -moz-animation: rotateZ(1deg);
        -webkit-transform: rotateZ(1deg);
    }
    90% {
        transform: rotate(-2deg);
        -o-animation: rotateZ(-2deg);
        -moz-animation: rotateZ(-2deg);
        -webkit-transform: rotateZ(-2deg);
    }
}

我过去曾处理过html元素的翻译，在我的案例中，3D css解决方案优于2D和javascript解决方案，主要是因为硬件加速而无需通过javascript解释器。如果你想了解更多关于硬件加速的细节以及与javascript解决方案的比较

相关文章：