HTML和CSS

如何动画CSS框阴影和优化性能

奥斯卡Jite-Orimiono
分享

在本文中，您将学习如何在不降低浏览器性能的情况下使CSS框阴影动画化。

在CSS中，不必属性用于向web元素添加阴影，这些阴影可以被动画化。但是，阴影动画会影响浏览器的性能，在呈现页面时导致滞后。

本指南适用于具有HTML和CSS动画工作知识的前端开发人员。

为什么这很重要

一个网页必须有一个非常短的加载时间，理想情况下在5秒以内。研究表明快速的页面加载极大地提高了转化率。进一步的研究表明70%的用户表示网站的速度会影响他们从网上商店购买的意愿。基本上，快速的网站就等于快乐的用户。

在我们继续之前，这里有一个演示不必动画可以在网页上发挥作用。您可以滚动浏览并与web元素交互。

看钢笔
带有阴影动画的Web元素由Si必威西盟体育网页登录tePoint (@必威西盟体育网页登录SitePoint）
在CodePen。

三个主要的CSS框阴影动画事件

由于在幕后发生的事情，CSS盒影动画可能会占用大量资源。在盒影动画(或任何形式的动画)期间，有三个主要的过程或事件被触发。这些事件是绘画、布局和合成。

  • 绘画。在绘制中，浏览器用颜色填充像素，并且不必是触发此事件的CSS属性之一。基本上，它在动画的每一帧都创建一个新的阴影。根据Mozilla，理想的CSS动画应该以60fps运行。

  • 布局。一些动画会改变页面的结构，这可能会导致许多样式的重新计算。一个很好的例子就是边栏在展开时将其他元素推到一边。导致这种情况的CSS属性包括填充，保证金，边境。

    简单地说，如果动画属性影响其他元素，它将改变页面的布局，导致重新计算——这将使用大量的系统资源。

  • 合成。在合成过程中，只有部分页面会发生变化。CSS属性不透明度而且变换只影响它们应用到的元素。这将意味着更少的样式重新计算，和更流畅的动画。合成是三个过程中任务最少的。

使用浏览器的检查器工具，您可以实时观察这个过程。首先，打开检查器工具(Chrome如下图所示)，然后点击标签右上角的三个点。检查<年代trong>更多的工具并选择<年代trong>呈现。

在渲染部分中选择的油漆闪烁选项＂loading=

在这个例子中，<年代trong>油漆闪烁被选中。每当有绘画事件时，屏幕会闪烁绿色:

  • 导航条:
    当你刷新导航条闪烁绿色＂loading=
  • 文字卡片:
    短信卡片也是如此……＂loading=
  • 导航链接:
    和导航链接＂loading=

您会发现，当您将鼠标悬停在带有阴影的元素上或刷新页面时，每个元素都会闪烁绿色。你也可以对布局做同样的实验:取消勾选<年代trong>油漆闪烁并选择<年代trong>布局移位区域。

请注意，在CodePen演示中可能无法使用油漆闪烁，因此您需要在文本编辑器中尝试实时预览。下面的视频展示了你应该看到的。

目标是最小化绘画和布局更改，因为它们会使用更多的系统资源。

检查性能

作为一名开发人员，你运行阴影动画可能没有任何问题，因为你有一台快速的计算机。但你必须考虑那些电脑速度较慢、网络连接不可靠的用户。仅仅因为它在你的电脑上看起来很好并不意味着它在其他地方都是一样的。

一个不必有四个值和一个颜色。这四个值分别是阴影的水平位置(x偏移)、垂直位置(y偏移)、扩展和模糊半径。一个典型的阴影动画将涉及一个或多个这些值的变化:

不必：    <年代pan class="token punctuation">；

让我们创建一个简单的不必动画，从一些HTML开始:

<身体><div类＝＂盒子<年代pan class="token punctuation">＂>div>身体>

这里有一些初始阴影和最终阴影的CSS:

.box｛不必：0px5px10px0pxrgba（0，0，0，0．5）；过渡：变换缓解<年代pan class="token number">0．5年代，不必缓解<年代pan class="token number">0．5年代；｝.box:徘徊｛变换：translateY（5px）；不必：0px10px20.px2pxrgba（0，0，0，０．２５）；｝

结果如下:

看钢笔
动画不必由Si必威西盟体育网页登录tePoint (@必威西盟体育网页登录SitePoint）
在CodePen。

对于动画，我们改变了y偏移，模糊和扩散的值。我们还使用了更透明的最终阴影。

现在，让我们来看看在运行这个程序时幕后发生了什么0.5秒动画。在浏览器上，通过右击并选择打开开发人员工具<年代trong>检查。一旦工具打开，就去<年代trong>性能选项卡。你可以录制阴影动画;只需几秒钟就足以看到发生了什么。

下面的截图显示了你将从Chrome的devtools中找到什么。

我们简单的阴影动画的性能数据＂loading=

阴影的动画周期(上下悬停)在顶部突出显示，发生的过程的分解显示在底部。分解显示脚本需要7毫秒，渲染需要55毫秒，绘制需要30毫秒。

现在，这些数字看起来还好，但是当CPU慢四倍时会发生什么呢?您可以从性能选项卡限制CPU速度。

下图显示了当你用较慢的CPU运行相同的动画时会发生什么。

节流阴影动画的性能数据＂loading=

在这个新过程中，加载需要6毫秒。脚本时间增加到52ms，渲染时间增加了一倍多，达到117ms，绘画时间增加到72ms。

您还可以限制网络速度，使CPU更慢。阴影动画使用了大量的系统资源，我们将考虑带走一些负载。

需要注意的是变换属性对CPU的性能起着重要作用。稍后再详细介绍。

如何保持最佳性能

如果你必须对网页上的阴影进行动画处理，那么让它们表现得更好是值得的。在本节中，您将学习各种方法来调整阴影动画，从而降低性能的打击。

我们将介绍以下内容:

  1. 动画不透明度
  2. 有多个不必层
  3. 动画一个伪元素
  4. 使用变换财产

动画不透明度

当使用rgba颜色，alpha通道控制不透明度。对CPU来说，在动画阴影时只改变alpha通道不会像改变阴影的偏移和扩散值那样困难。

.box｛不必：0px10px20.px0pxrgba（0，0，0，0．5）；过渡：不必缓解<年代pan class="token number">0．5年代；｝.box:徘徊｛不必：0px10px20.px0pxrgba（0，0，0，０．２５）；｝.box-2｛不必：0px10px20.px0pxrgba（0，0，0，0．5）；过渡：不必缓解<年代pan class="token number">0．5年代；｝.box-2:徘徊｛不必：0px20.px40px0pxrgba（0，0，0，０．２５）；｝

在第一个动画中，只有阴影的不透明度发生了变化，而在第二个动画中，y偏移量从10 px来20 px，价差从20 px来40像素。

下面是它们在6倍减速下的表现(这样你就可以清楚地看到性能图)，从动画开始，只有不透明度发生了变化:

浏览器数据显示的效果只有动画不透明＂loading=

它需要大约两秒钟的时间悬停在盒子上和离开。现在将此与第二个阴影动画进行比较。

改变y偏移和扩散的影响＂loading=

再一次，两秒钟的开关，所有项目的时间都有明显的增加。喷漆之前是96毫秒，现在翻了一番，达到187毫秒。渲染，合成的一部分，也从97ms上升到178ms。

因此，只改变阴影的不透明度就能产生更高效的动画效果。

下面是这两个动画的现场演示。

看钢笔
动画不透明度vs动画偏移量由Si必威西盟体育网页登录tePoint (@必威西盟体育网页登录SitePoint）
在CodePen。

分层的阴影

如果你观察桌子周围的阴影，或者在桌子上方举起一个物体，你会注意到阴影最暗的区域离物体最近，随着它向外扩散，它会变得越来越亮。

要复制这种效果并不容易不必。分层阴影看起来更好。即使添加了阴影层，它们也能产生更高性能的动画。

让我们来比较一下单曲的表现不必和一个多层阴影:

.box｛不必：0px10px20.px0pxrgba（0，0，0，0．5）；过渡：不必缓解<年代pan class="token number">0．5年代；｝.box:徘徊｛不必：0px20.px40px0pxrgba（0，0，0，０．２５）；｝

这个动画有148ms的渲染和133ms的绘画。

单个盒子阴影动画的表现结果＂loading=

现在让我们有一个阴影动画不必层:

.box-2｛不必：0px5px10px0pxrgba（0，0，0，０．２５），0px10px20.px0pxrgba（0，0，0，0．5）；过渡：不必缓解<年代pan class="token number">0．5年代；｝.box-2:徘徊｛不必：0px10px20.px0pxrgba（0，0，0，０．２５），0px20.px40px0pxrgba（0，0，0，0.15）；｝

两个盒子阴影图层的动画结果＂loading=

区别很明显。分层阴影不仅产生更好看的阴影效果，它们在动画时表现得出人意料地好。渲染从148毫秒降低到74毫秒，绘画也从133毫秒降低到74毫秒。

下面是两者比较的现场演示。

看钢笔
单阴影vs分层阴影动画由Si必威西盟体育网页登录tePoint (@必威西盟体育网页登录SitePoint）
在CodePen。

现在，让我们尝试一些不同的东西，在动画中添加第二个阴影:

.box-2｛不必：0px10px20.px0pxrgba（0，0，0，0．5）；过渡：不必缓解<年代pan class="token number">0．5年代；｝.box-2:徘徊｛不必：0px10px20.px0pxrgba（0，0，0，０．２５），0px20.px40px0pxrgba（0，0，0，0.15）；｝

添加第二个阴影层的结果＂loading=

在动画过程中添加第二个阴影层的性能不如一开始就有两个图层，但它仍然有100ms的绘画时间，而单一的只有133ms不必动画，这是一个进步。

最终，由你来决定你的影子看起来如何，以及你将使用什么方法来创建它。

动画一个伪元素

这一次，我们将复制阴影动画而不改变不必财产。从之前的演示中，我们可以看到在阴影动画期间仍然有很多重绘。如果你在改变不必价值观，你无法避免这个过程。

在本节的末尾，您将看到绘画几乎完全被取消。这将涉及更多的代码行，但我们将实现更高性能的阴影动画。

因此，在框的基本样式之后，创建一个:在给它一个伪元素不必，这将是动画后阴影的最终状态:

.pseudo｛位置：相对<年代pan class="token punctuation">；过渡：不必缓解<年代pan class="token number">0．5年代，变换缓解<年代pan class="token number">0．5年代；不必：0px5px10px0pxrgba（0，0，0，0．5）* / / *最初的影子｝.pseudo后::｛内容：＂＂；位置：绝对<年代pan class="token punctuation">；这个特性：20.px；前：0；左：0；宽度：One hundred.％；高度：One hundred.％；不透明度：0；不必：0px10px20.px2pxrgba（0，0，0，０．２５）；/ * * /最后的影子过渡：不透明度缓解<年代pan class="token number">0．5年代；｝

现在，你要做的就是改变不透明度的伪元素:徘徊：

.pseudo:徘徊｛变换：translateY（－10px）；｝.pseudo:徘徊后::｛不透明度：1；｝

让我们把它和常规的阴影动画放在一起看。

看钢笔
Psuedo影子由Si必威西盟体育网页登录tePoint (@必威西盟体育网页登录SitePoint）
在CodePen。

这里没有太多视觉上的东西。真正的区别在于他们的表现。结果为常规不必动画如下所示。

结果为常规动画＂loading=

它有230ms的渲染时间，211ms的绘画时间。现在是伪阴影动画。

伪元素阴影动画的结果＂loading=

这一次，我们有148ms的渲染，只有51ms的绘画。虽然有更多的代码，但结果是值得的。

使用变换财产

这主要适用于主要元素，盒子，它会有阴影。使用变换属性，而不是布局改变属性保证金，将减少样式重新计算的数量。

属性可以与翻译或规模属性来模拟将元素移出页面，从而创建深度的错觉。

一些有用的建议

我们已经确定任何动画都涉及到不必属性会影响性能。所以，如果你必须有CSS框影动画，这里有一些有用的技巧要记住。

首先，尽量减少它们。不要为了让每个元素都有阴影。其次，只动画交互元素。没有必要对没有功能的东西进行动画化。这将减少CPU的工作负载，并大大提高性能。

结论

阴影可以增强网站的视觉效果，但也会影响性能——尤其是在动画方面。在本文中，我们测试了阴影动画的各种方法，并比较了它们的性能。动画阴影触发三个事件-绘画，布局变化和合成-第一个是最艰巨的任务。

理想的解决方案是完全不动画阴影(因为它们看起来很好!)。如果你真的想要动画不必属性中，只更改不透明度而不更改偏移值将减少重绘。问题是你会失去阴影所提供的深度错觉。另一种方法是将两个动画化不必层。这个解决方案在视觉上是令人愉悦的，即使有额外的阴影。

最后一个选项是动画而不是不必而是提供阴影的伪元素。这大大减少了重绘的数量和CPU在运行动画时所做的整体工作。您将编写更多的代码，但这是确保良好性能的最佳选择。

相关内容:

Baidu