html - 如何让 CSS 动画使用 GPU(硬件加速)而不是 CPU 渲染

Question

阅读关于 CSS animations and how to build them 的文章后，我已经构建了自己的，并且正在尝试提高我的 CSS 动画的性能。我的动画由三个 HTML 元素组成，它们会改变宽度以指示媒体正在播放。

在 Chrome 开发工具中检查时间轴和资源选项卡后，我发现动画导致了高 CPU 负载。

我如何将动画转换为 GPU 硬件加速而不是浏览器渲染器，这会导致高 CPU 负载？我了解到您可以使用硬件加速来强制动画在 GPU 上运行。

有没有办法将此(动画化条形宽度)转换为 GPU 层？我能以某种方式翻译它吗？或者有更好的东西吗？

有 3 个小节。这是它的动画，而不是样式。

@keyframes music {
  0%   { width:17px;  }
  10%  { width:11px;  }
  20%  { width:37px;  }
  30%  { width:30px;  }
  40%  { width:15px;  }
  50%  { width:10px;  }
  60%  { width:24px;  }
  70%  { width:17px;  }
  80%  { width:21px;  }
  90%  { width:32px;  }
  100% { width:17px;  }
}
.lines-ani {
    transform: rotateY(180deg);
}
.lines-ani .lines {
    animation: music 1.5s 2s ease-out alternate infinite;
}
.lines-ani .lines:before {
    animation: music 1.5s 1.5s ease-out alternate infinite;
}
.lines-ani .lines:after {
    animation: music 1.5s 2.5s ease-out alternate infinite;
}

Answer 1

如果您想避免重新绘制并将动画移动到 GPU，那么您可以使用 3D 变换来产生效果，而不是为 width 设置动画。如 this article 中所述，使用 3D 变换意味着浏览器将使动画 GPU 加速。

CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser’s slower software rendering engine. So what exactly forces the browser to swap to GPU mode? Many browsers provide GPU acceleration by means of certain CSS rules.

Currently, browsers like Chrome, FireFox, Safari, IE9+ and the latest version of Opera all ship with hardware acceleration; they only use it when they have an indication that a DOM element would benefit from it. With CSS, the strongest indication is that a 3D transformation is being applied to an element.

将动画转换为等效的 3D 变换本身并不是一个大过程。只需要在所有三个元素上设置一个初始的width，并将@keyframes规则中的width转换成它们对应的比率值基于设置的初始宽度。

宽度动画通常只是一个 scaleX 但使用 scale3d 因为我们需要将动画移动到 GPU。由于 scale3d 有 3 个参数(用于三个轴中每个轴的比例)，我们可以提供 1(初始比例)作为其他两个轴的值。因此，它将是 scale3d(x ratio, 1, 1)。

例如，问题中提供的 10% 框架具有 width: 11px 设置，这里是我们如何获得其等效的 scale3d 值:

• 在元素上设置初始或起始 width。在下面的代码片段中，我将其设置为 17px。
• 根据初始宽度和所需宽度获取 X 轴的比例。那就是 11px/17px(即 0.64)。
• 因此，等效的 3D 比例变换将是 scale3d(0.64, 1, 1)。

@keyframes color-bar {
  0% {
    transform: scale3d(1,1,1);
  }
  10% {
    transform: scale3d(0.64,1,1);
  }
  20% {
    transform: scale3d(2.17,1,1);
  }
  30% {
    transform: scale3d(1.76,1,1);
  }
  40% {
    transform: scale3d(0.88,1,1);
  }
  50% {
    transform: scale3d(0.58,1,1);
  }
  60% {
    transform: scale3d(1.41,1,1);
  }
  70% {
    transform: scale3d(1,1,1);
  }
  80% {
    transform: scale3d(1.23,1,1);
  }
  90% {
    transform: scale3d(1.88,1,1);
  }
  100% {
    transform: scale3d(1,1,1);
  }
}
.lines-ani {
  width: 25vw;
  transform: rotateY(180deg);
}
.lines-ani .lines {
  position: relative;
  width: 17px;
  height: 10px;
  background: red;
  transform-origin: left;
  animation: color-bar 1.5s 2s ease-out alternate infinite;
}
.lines-ani .lines:before {
  position: absolute;
  content: '';
  top: 125%;
  height: 100%;
  width: 100%;
  background: green;
  transform-origin: left;
  animation: color-bar 1.5s 1.5s ease-out alternate infinite;
}
.lines-ani .lines:after {
  position: absolute;
  content: '';
  top: 250%;
  height: 100%;
  width: 100%;
  background: green;
  transform-origin: left;
  animation: color-bar 1.5s 2.5s ease-out alternate infinite;
}

<div class='lines-ani'>
  <div class='lines'>
  </div>
</div>

注意:如果您不想使用 scale3d，您也可以使用 scaleX() translateZ(0)。 translateZ(0) 是一个 3D 变换，整个过程仍然会产生相同的效果。