CSS动画的硬件加速介绍

在过去的几年中，我们经常听到有关硬件加速度以及它如何有助于改善网页上的动画，即使在移动浏览器上也使它们变得既友善又光滑。但是我认为许多经验不足的开发人员不知道硬件加速度的工作原理以及我们如何正确使用它来使动画发光。

>

>术语本身听起来像是过于复杂的，接近更高的数学。在本文中，我将阐明此主题，并演示如何在您的前端项目中使用此技术。

钥匙要点

硬件加速度可以显着提高CSS动画的质量，使其更顺畅，更有效，尤其是在移动浏览器上。这是通过将渲染过程卸载到GPU（图形处理单元）来实现的，该过程更好地用于此类任务。 CSS变换是对GPU友好的属性，可用于避免昂贵的重新粉刷操作。 “变换黑客”也可以用来强制迫使元素在动画开始之前在GPU中渲染，从而触发硬件加速度。

>应该谨慎使用硬件加速度，因为它可能导致内存问题，尤其是在移动设备上。由于GPU和CPU的不同渲染机制，它也可能影响字体抗缩放。
• >已引入“ Will-Change”属性，以告知浏览器哪些属性将要更改，以便浏览器可以事先进行相应的优化。但是，并非所有浏览器都支持此属性。
我为什么要关心？
• >
>让我们看一个简单的动画示例，其中包含几个堆叠在彼此的球（也就是说，在z轴上，看起来像一个球）。目的是用动画移动这组球。最简单的方法是调整左和顶部属性。我们可以使用JavaScript执行此操作，但是我们将使用CSS动画。请注意，我不包括任何供应商前缀，但您应该使用诸如autoprefixer之类的东西来确保完全兼容。
• >

这是一个实时演示，它使用按钮使用JavaScript启动动画：

>请参阅codepen上的sitepoint（@sitepoint）的钢笔与顶部/左属性重叠的球。

>单击“启动动画”按钮后，您会注意到，即使在桌面浏览器上，动画看起来也不是非常平滑的。如果您在移动设备上测试动画，则会发现它远非60fps。为了解决此问题，我们可以使用Translate（）函数使用CSS变换，而不是对顶部和左值进行动画。

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

在下面的演示中尝试以上代码：

请参阅用codepen上的sitepoint（@sitepoint）的CSS变换的CSS转换的笔动画。

现在，动画很好。伟大的！那么为什么这会有所帮助呢？好吧，与左和顶部属性的动画不同，CSS变换不会引起重新粉刷。让我们看一下动画执行期间Chrome Devtools中的时间轴面板：

>在左和顶级示例中，我们可以在每个动画步骤中看到绿色条。这是一个昂贵的重新粉刷操作。动画帧速率小于60fps，我们始终旨在使动画变得平稳。

现在查看CSS转换的时间表：>

如您所见，动画期间没有绿色条。>

> Chrome的DevTools中可用的另一个功能以跟踪重新粉刷过程是“启用油漆闪烁”。您可以通过打开DevTools，键入ESC键，然后选择“渲染”选项卡来找到此选项。当打开此功能时，绿色框（即油漆矩形）将出现在重新粉刷的区域周围。在左和顶部的示例中，球有一个用于整个动画过程的绿色盒子，指示重新涂片。

另一方面，在CSS转换示例中，油漆矩形仅显示在第一个也是最后一个动画帧上。

>那么，如何确切地改变没有重新粉的动画？基本答案是，CSS变换直接出现在使用硬件加速度的GPU

内存中，从而避免了软件渲染。让我们更详细地看一下。

硬件加速度的工作方式

>浏览器收到页面标记时，它将其解析以构建DOM树。 DOM树和CSS允许浏览器构建渲染树。渲染树由渲染对象组成 - 页面上要渲染的元素。每个渲染对象都分配给图形层。每层都将其上传到GPU作为纹理。这里的诀窍是，该层可以在不重新粉刷的情况下在GPU中转换，就像3D图形一样。这些转换是由单独的合成过程进行的。您可以在此处找到有关Chrome中构图的更多信息。

> 在我们的示例中，CSS变换创建了一个可以直接在GPU中转换的新复合层。 Chrome的DevTools允许使用“显示层边框”选项查看复合层。每个复合层都有一个橙色边框。

我们与CSS转换的球具有橙色边界，并移动到单独的复合层：

在这一点上，您可能会问：浏览器何时创建一个单独的复合层？

在以下情况下这样做：

>

对于3D或透视CSS变换（在我们的示例中）

>
• 或 elements
• 使用CSS过滤器
• 对于一个元素，该元素与提取到复合​​层的另一个元素重叠（例如，使用z index）
>
您可能会在想，‘坚持下去。此示例使用2D翻译，而不是3D变换。你是对的。这就是为什么有两个额外的重新粉刷操作 - 在我们的时间表中动画过程的开始和结束时。

3D和2D变换之间的区别在于3D变换使浏览器事先创建一个单独的复合层，而2D变换则可以飞行。在动画开始时，创建了一个新的复合层，并将纹理加载到GPU上，该GPU启动重新粉刷。然后，动画由GPU中的合成器执行。动画完成后，将删除附加的复合层，从而导致另一个重新粉刷的操作。

> gpu

中的渲染元素

并非所有CSS属性上的元素都可以直接在GPU中处理。仅支持以下属性：

>变换

不透明度
>过滤
为了确保获得平滑，高质量的动画的最佳机会，我们应该始终尝试使用这些gpu友好的属性。
强迫要在gpu

中渲染的元素 在某些情况下，即使在动画开始之前，也可能需要在GPU中呈现一个元素。这有助于避免由新层创建引起的首次重新粉刷操作。为了实现这一目标，所谓的“转型黑客”可能会派上用场。

>

>这是让浏览器知道我们要执行3D变换。这使得浏览器创建一个单独的图层并事先将元素移至GPU，从而触发硬件加速度。 由于其背后的另一个元素的重新粉刷过于昂贵时，此技术也很有用。让我们回到第一个示例，然后稍微更改它，以便它包含一个单个球和一个使用CSS滤镜模糊的背景图像的容器。球具有左侧和顶部特性的动画。

请参阅codepen上的sitepoint（@sitepoint）用顶部/左属性的球动画。

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

>再次，球运动是生干的。发生这种情况是因为每个重新粉刷的操作都由于背景模糊。

现在，让我们将转换hack添加到容器中。

>

>请参阅codepen上的sitepoint（@sitepoint）的硬件加速的左/顶部属性。

结果还不错，动画效果很好。为什么？因为现在变模的价格昂贵的背景已移至另一个复合层，并且每个动画步骤的重新粉刷都很便宜。

>

使用谨慎的硬件加速度

>没有免费的。有一些与硬件加速有关的问题。

>

内存
最重要的问题与内存有关。为GPU加载太多纹理可能会导致内存问题。这在移动设备上确实至关重要，甚至可能崩溃移动浏览器。介意后果，不要为页面上的每个元素使用硬件加速度。

>字体渲染

GPU的渲染会影响字体抗叠叠。发生这种情况是因为GPU和CPU具有不同的渲染机制。因此，即使您在动画结束时关闭硬件加速度，在动画过程中将显示文本模糊。您可以在基思·克拉克（Keith Clark）的这篇文章中阅读有关字体渲染问题的更多信息。
不久的将来

>使用“变换黑客”创建单独的复合层的必要性很麻烦。浏览器绝对应该提供一种直接的方法来实现这一目标。这就是为什么引入了Will-Change属性的原因。此功能使您可以通知浏览器哪些属性将要更改，因此浏览器可以事先进行相应的优化。这是一个告知浏览器的示例，将更改转换属性：>

不幸的是，并非所有浏览器都支持Will-Change。您可以在以下资源中了解有关Will-Change的更多信息：

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

> CSS Will-Crange属性的简介nick salloum

您需要了解的有关CSS Will-Crange属性的所有信息。

• 结论
• 总结我们涵盖的内容：

>使用GPU可以提高动画的质量

在每个设备上，GPU渲染的动画应为60fps >

使用gpu友好的CSS属性

>了解如何使用“变换黑客”强制构成在GPU中渲染的元素。
• 如果您使用了这些技术或有任何反馈，请随时提供您的评论。

  经常询问有关硬件加速和CSS动画的问题

  > GPU在硬件加速CSS动画中的作用是什么？它负责渲染图形和图像处理。当CSS动画被硬件加速时，GPU接管了中央处理单元（CPU）渲染动画的任务。由于GPU专门设计用于处理此类任务，因此这会导致更流畅，更快，更有效的动画。

  >

  >硬件加速如何改善CSS动画的性能？通过从CPU到GPU的某些图形处理任务来卸载CSS动画。这使CPU可以专注于其他任务，从而提高网站或应用程序的整体性能。此外，GPU可以更好地处理图形任务，从而使动画更顺畅，更有效。可以大大提高性能，存在潜在的缺点。主要问题之一是兼容性问题。并非所有设备或浏览器都支持硬件加速度，这可能导致不一致的用户体验。此外，过度使用硬件加速可能会导致功耗增加，这可能是移动设备的问题。

  >

  >我如何启用CSS动画的硬件加速度？

  启用CSS动画的硬件加速度可以通过在CSS代码中使用“变换”属性来完成。该属性触发GPU接管动画的渲染。例如，您可以使用'transform：transforatez（0）'或'变换：旋转（0deg）'来启用硬件加速度。

  哪种类型的CSS动画最大程度地从硬件加速器中受益？ > CSS动画涉及复杂的图形任务，例如3D变换，过渡和关键帧动画，可以从硬件加速度中受益匪浅。当通过CPU处理时，这些任务可能是资源密集的，但是GPU可以更有效地处理它们，从而产生更顺畅的动画。

  >在使用硬件加速CSS动画时，我如何确保兼容性？ 🎜>要确保使用硬件加速CSS动画时的兼容性，在各种设备和浏览器上测试您的网站或应用程序很重要。您还可以在CSS代码中使用后备为不支持硬件加速的设备或浏览器提供替代动画。

  >

  >可以与CSS过渡一起使用硬件加速度？通过使用“变换”属性，您可以触发GPU呈现过渡，从而产生更顺畅，更有效的动画。

  >

  >硬件加速度如何影响移动设备上的电池寿命？尽管硬件加速可以提高CSS动画的性能，但它也可以增加功耗，从而可能影响移动设备上的电池寿命。在使用硬件加速时，在性能和功耗之间取得平衡很重要。

  >我可以将硬件加速器用于2D动画吗？

  是的，可以将硬件加速器用于2D动画。通过在CSS代码中使用“变换”属性，您可以触发GPU渲染动画，从而产生更顺畅，更有效的动画。

  >

  >如何优化我的CSS代码以进行硬件加速度？ >

  优化用于硬件加速的CSS代码涉及使用“转换”属性触发GPU进行渲染动画。避免过度使用硬件加速度也很重要，因为这可能导致功耗增加。此外，在各种设备和浏览器上测试您的网站或应用程序可以帮助确保兼容性。

以上是CSS动画的硬件加速介绍的详细内容。更多信息请关注PHP中文网其他相关文章！