CSS動畫的硬件加速介紹-css教學-PHP中文網

CSS動畫的硬件加速介紹

在過去的幾年中，我們經常聽到有關硬件加速度以及它如何有助於改善網頁上的動畫，即使在移動瀏覽器上也使它們變得既友善又光滑。但是我認為許多經驗不足的開發人員不知道硬件加速度的工作原理以及我們如何正確使用它來使動畫發光。

>術語本身聽起來像是過於復雜的，接近更高的數學。在本文中，我將闡明此主題，並演示如何在您的前端項目中使用此技術。

鑰匙要點

硬件加速度可以顯著提高CSS動畫的質量，使其更順暢，更有效，尤其是在移動瀏覽器上。這是通過將渲染過程卸載到GPU（圖形處理單元）來實現的，該過程更好地用於此類任務。 CSS變換是對GPU友好的屬性，可用於避免昂貴的重新粉刷操作。 “變換黑客”也可以用來強制迫使元素在動畫開始之前在GPU中渲染，從而觸發硬件加速度。

>已引入“ Will-Change”屬性，以告知瀏覽器哪些屬性將要更改，以便瀏覽器可以事先進行相應的優化。但是，並非所有瀏覽器都支持此屬性。
>
>

這是一個實時演示，它使用按鈕使用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中的時間軸面板：

CSS動畫的硬件加速介紹

>在左和頂級示例中，我們可以在每個動畫步驟中看到綠色條。這是一個昂貴的重新粉刷操作。動畫幀速率小於60fps，我們始終旨在使動畫變得平穩。

現在查看CSS轉換的時間表：>

如您所見，動畫期間沒有綠色條。 >

> Chrome的DevTools中可用的另一個功能以跟踪重新粉刷過程是“啟用油漆閃爍”。您可以通過打開DevTools，鍵入ESC鍵，然後選擇“渲染”選項卡來找到此選項。當打開此功能時，綠色框（即油漆矩形）將出現在重新粉刷的區域周圍。在左和頂部的示例中，球有一個用於整個動畫過程的綠色盒子，指示重新塗片。 CSS動畫的硬件加速介紹

另一方面，在CSS轉換示例中，油漆矩形僅顯示在第一個也是最後一個動畫幀上。

>那麼，如何確切地改變沒有重新粉的動畫？基本答案是，CSS變換直接出現在使用硬件加速度的GPU

內存中，從而避免了軟件渲染。讓我們更詳細地看一下。 CSS動畫的硬件加速介紹

硬件加速度的工作方式

>瀏覽器收到頁面標記時，它將其解析以構建DOM樹。 DOM樹和CSS允許瀏覽器構建渲染樹。渲染樹由渲染對象組成 - 頁面上要渲染的元素。每個渲染對像都分配給圖形層。每層都將其上傳到GPU作為紋理。這裡的訣竅是，該層可以在不重新粉刷的情況下在GPU中轉換，就像3D圖形一樣。這些轉換是由單獨的合成過程進行的。您可以在此處找到有關Chrome中構圖的更多信息。

> 在我們的示例中，CSS變換創建了一個可以直接在GPU中轉換的新復合層。 Chrome的DevTools允許使用“顯示層邊框”選項查看複合層。每個複合層都有一個橙色邊框。

我們與CSS轉換的球具有橙色邊界，並移動到單獨的複合層：

CSS動畫的硬件加速介紹

在這一點上，您可能會問：瀏覽器何時創建一個單獨的複合層？

在以下情況下這樣做：

對於3D或透視CSS變換（在我們的示例中）

或
使用CSS過濾器
對於一個元素，該元素與提取到復合層的另一個元素重疊（例如，使用z index）

CSS動畫的硬件加速介紹 3D和2D變換之間的區別在於3D變換使瀏覽器事先創建一個單獨的複合層，而2D變換則可以飛行。在動畫開始時，創建了一個新的複合層，並將紋理加載到GPU上，該GPU啟動重新粉刷。然後，動畫由GPU中的合成器執行。動畫完成後，將刪除附加的複合層，從而導致另一個重新粉刷的操作。

> gpu

中的渲染元素

並非所有CSS屬性上的元素都可以直接在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屬性

如果您使用了這些技術或有任何反饋，請隨時提供您的評論。
經常詢問有關硬件加速和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進行渲染動畫。避免過度使用硬件加速度也很重要，因為這可能導致功耗增加。此外，在各種設備和瀏覽器上測試您的網站或應用程序可以幫助確保兼容性。