performance - 如何提高更改网格中未知大小图像的动画的性能？

Question

我构建了一个图像网格(存储在 $image 中)，它可能会以随机顺序和随机延迟发生变化。性能还可以，只要我没有 background-position: center 和 background-size: cover 就可以了。现在有了这些属性，图像在融合时会闪烁。我该如何提高渲染性能？

我的 scss 是这样的

@mixin image-tiles() {
  // First image
  @for $i from 1 through $total-image-count {
    $firstImg: nth($images, $i);

    &.img-#{$i} {
      // set the default image if animations are not defined
      background-image: url('../../' + $firstImg);
    }

    // Second image
    @for $j from 1 through $total-image-count {
      // Third image
      @for $k from 1 through $total-image-count {
        &.img-#{$i}-#{$j}-#{$k}{
          animation-name: random-image-transition-#{$i}-#{$j}-#{$k};
        }
      }
    }
  }

  @for $d from 0 through ($image-shown-duration * 2) - 1 {
    &.delayed-by-#{$d} {
      animation-delay: 0.5s * $d;
    }
  }

  &.img {
    animation-direction: alternate;
    animation-duration: $image-shown-duration * 3s, $image-shown-duration * 3s; // three stages
    animation-iteration-count: infinite;
  }
}

@for $i from 1 through $total-image-count {
  $firstImg: nth($images, $i);
  @for $j from 1 through $total-image-count {
    $secondImg: nth($images, $j);
    @for $k from 1 through $total-image-count {
      $thirdImg: nth($images, $k);

      @keyframes random-image-transition-#{$i}-#{$j}-#{$k} {
        from {
          background-image: url('../../' + $firstImg);
        }

        16% {
          background-image: url('../../' + $firstImg);
        }

        23% {
          background-image: url('../../' + $secondImg);
        }

        50% {
          background-image: url('../../' + $secondImg);
        }

        56% {
          background-image: url('../../' + $thirdImg);
        }

        89% {
          background-image: url('../../' + $thirdImg);
        }

        to {
          background-image: url('../../' + $firstImg);
        }
      }
    }
  }
}

.tile-teaser-content-wrapper {
  margin: 0 auto;
  max-width: 80vw;
  padding-bottom: 45%;
  position: relative;
  width: 100%;
}

.tile-teaser-content {
  bottom: 0;
  left: 0;
  max-width: 80vw;
  position: absolute;
  right: 0;
  top: 0;

  .tile {
    @include image-tiles();

    background-size: cover;
    background-position: center;
    float: left;
    height: 100% / $tile-per-col-count;
    width: 100% / $tile-per-row-count;
  }
}

html 应该是

<div class="tile-teaser-content-wrapper">
    <div class="tile-teaser-content">
        <div class="tile img img-1 img-1-2-3 delayed-by-0"></div>
        <div class="tile img img-4 img-4-5-6 delayed-by-1"></div>
        <div class="tile img img-7 img-7-8-9 delayed-by-2"></div>
        <div class="tile img img-1 img-1-2-3 delayed-by-3"></div>
        <div class="tile img img-4 img-4-5-6 delayed-by-4"></div>
        <div class="tile img img-7 img-7-8-9 delayed-by-5"></div>
        <div class="tile img img-1 img-1-2-3 delayed-by-1"></div>
        <div class="tile img img-4 img-4-5-6 delayed-by-2"></div>
        <div class="tile img img-7 img-7-8-9 delayed-by-3"></div>
    </div>
</div>

Answer 1

这不是性能问题，它的模式比那更深。

背景图像大小是元素的一个属性。当您对此进行转换时，并且 2 个图像具有不同的尺寸，浏览器无法同时设置两个尺寸，因此您得到了错误的结果。

解决这个问题的通常方法是有 2 个元素，每个元素都有一个背景图像，并使用其中一个的不透明度。

顺便说一下，动画背景图像的浏览器支持仍然很差，所以这是改变方法的另一个原因