關(guān)鍵要點(diǎn)

• 流暢的移動(dòng)端動(dòng)畫需要關(guān)注關(guān)鍵渲染路徑(CRP)中的合成步驟，使用transform和opacity等屬性，避免增加之前步驟的負(fù)擔(dān)。
• 避免使用left、top、right、bottom屬性進(jìn)行動(dòng)畫過(guò)渡，它們會(huì)導(dǎo)致不流暢的動(dòng)畫；應(yīng)使用影響合成步驟的transform屬性，讓瀏覽器在動(dòng)畫開始前確定圖層穩(wěn)定性。
• 為了達(dá)到每秒60幀的穩(wěn)定幀率，使用GPU渲染動(dòng)畫，通過(guò)will-change屬性將元素提升到另一個(gè)圖層，避免瀏覽器處理佈局渲染或繪製。

本文最初發(fā)表於OutSystems。感謝支持SitePoint的合作夥伴。

在移動(dòng)應(yīng)用中製作動(dòng)畫很容易。如果遵循以下技巧，在移動(dòng)應(yīng)用中正確地製作動(dòng)畫也很容易……儘管如今每個(gè)人都在移動(dòng)設(shè)備上使用CSS3動(dòng)畫，但許多人使用方式不正確。開發(fā)人員經(jīng)常忽略最佳實(shí)踐。這是因?yàn)槿藗儾焕斫膺@些實(shí)踐存在的原因以及為什麼它們受到如此強(qiáng)烈的支持。設(shè)備規(guī)格範(fàn)圍很廣。因此，如果不優(yōu)化代碼，就會(huì)為大部分用戶提供低於標(biāo)準(zhǔn)的體驗(yàn)。記?。阂恍└叨似炫炘O(shè)備功能強(qiáng)大，但世界上大多數(shù)人使用的設(shè)備與這些高性能設(shè)備相比，就像帶有LCD屏幕的算盤。我們希望幫助您正確地利用CSS3的強(qiáng)大功能。為此，我們需要先了解一些事情。

理解時(shí)間線

瀏覽器在渲染和處理元素時(shí)會(huì)做什麼？這個(gè)時(shí)間線稱為關(guān)鍵渲染路徑：

圖片來(lái)源：www.csstriggers.com

為了實(shí)現(xiàn)流暢的動(dòng)畫，我們需要專注於更改影響合成步驟的屬性，而不是增加之前步驟的負(fù)擔(dān)。

1. 樣式 瀏覽器開始計(jì)算要應(yīng)用於元素的樣式——重新計(jì)算樣式。

2. 佈局 在接下來(lái)的步驟中，瀏覽器生成每個(gè)元素的形狀和位置——佈局。在這裡，瀏覽器設(shè)置頁(yè)面屬性，例如寬度和高度，以及例如其邊距或left、top、right、bottom。

3. 繪製 瀏覽器將每個(gè)元素的像素填充到圖層中。它參考這些屬性：box-shadow、border-radius、color、background-color等。

4. 合成 這是您想要執(zhí)行動(dòng)畫的地方，因?yàn)檫@是瀏覽器將所有圖層繪製到屏幕上的時(shí)候。 現(xiàn)代瀏覽器可以很好地動(dòng)畫化四個(gè)樣式屬性，利用transform和opacity屬性。

   • 位置 — transform: translateX(n) translateY(n) translateZ(n);
   • 縮放 — transform: scale(n);
   • 旋轉(zhuǎn) — transform: rotate(ndeg);
   • 不透明度 — opacity: n;

如何達(dá)到每秒60幀

記住這一點(diǎn)，現(xiàn)在是擼起袖子加油幹的時(shí)候了。讓我們從HTML開始。我們將創(chuàng)建一個(gè)非常簡(jiǎn)單的結(jié)構(gòu)並將我們的app-menu放在一個(gè)layout類中。

<div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

錯(cuò)誤的方法

.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}

看到我們更改的屬性了嗎？應(yīng)避免使用left、top、right、bottom屬性進(jìn)行過(guò)渡。這些不會(huì)創(chuàng)建流暢的動(dòng)畫，因?yàn)樗鼈兠看味紩?huì)強(qiáng)制瀏覽器執(zhí)行佈局傳遞，這會(huì)影響所有元素的子元素。結(jié)果是這樣的：

該動(dòng)畫不夠流暢。我們使用DevTools時(shí)間線檢查幕後發(fā)生了什麼，結(jié)果如下：

綠色區(qū)域表示渲染動(dòng)畫所花費(fèi)的時(shí)間。此數(shù)據(jù)顯示幀率不規(guī)則且性能緩慢。 “綠色條表示FPS。高條表示動(dòng)畫以60 FPS渲染。低條表示低於60 FPS。因此，理想情況下，您希望綠色條在整個(gè)時(shí)間線上始終保持較高。紅色條也表示卡頓，因此，另一種衡量進(jìn)度的方法是消除這些紅色條?！备兄xKayce Basques！

使用Transform

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}

transform屬性影響合成步驟，而不是佈局。在這裡，我們告知瀏覽器我們的圖層在動(dòng)畫開始前是穩(wěn)定的，因此在渲染動(dòng)畫時(shí)遇到的障礙更少。

時(shí)間線正是這樣反映的：

結(jié)果開始變得更好，幀率似乎已經(jīng)穩(wěn)定，因此動(dòng)畫運(yùn)行更流暢。

在GPU中運(yùn)行動(dòng)畫

然後，讓我們更上一層樓。為了真正使其運(yùn)行流暢，我們將使用GPU渲染動(dòng)畫。

<div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

儘管一些瀏覽器仍然需要translateZ()或translate3d()作為後備，但will-change屬性是未來(lái)。此屬性將元素提升到另一個(gè)圖層，因此瀏覽器不必考慮佈局渲染或繪製。

看到它有多流暢了嗎？時(shí)間線證實(shí)了這一點(diǎn)：

動(dòng)畫的幀率更恆定，動(dòng)畫渲染速度更快。但在開頭仍然有一個(gè)很長(zhǎng)的幀運(yùn)行：開頭有點(diǎn)瓶頸。還記得我們一開始創(chuàng)建的HTML結(jié)構(gòu)嗎？讓我們看看我們?nèi)绾卧贘avaScript中控制app-menudiv：

.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}

啊哈！我們?cè)谶@里通過(guò)向layoutdiv添加類導(dǎo)致了一個(gè)問(wèn)題。這迫使瀏覽器重新生成我們的樣式樹——這影響了渲染性能。

每秒60幀的黃油般順滑的解決方案

如果我們將菜單創(chuàng)建在視口區(qū)域之外呢？將菜單放在隔離區(qū)域?qū)⒋_保我們只影響我們希望動(dòng)畫化的元素。因此，我們建議使用以下HTML結(jié)構(gòu)：

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}

現(xiàn)在我們必須以稍微不同的方式控制菜單的狀態(tài)。我們將使用JavaScript中的transitionend函數(shù)來(lái)操作在動(dòng)畫結(jié)束時(shí)刪除的類中的動(dòng)畫。

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
  will-change: transform;
}

讓我們將所有內(nèi)容放在一起並檢查結(jié)果。這是一個(gè)完整的啟用CSS3的示例，所有內(nèi)容都放在正確的位置：

function toggleClassMenu() {
  var layout = document.querySelector(".layout");
  if(!layout.classList.contains("app-menu-open")) {
    layout.classList.add("app-menu-open");
  } else {
    layout.classList.remove("app-menu-open");
  }
}
var oppMenu = document.querySelector(".menu-icon");
oppMenu.addEventListener("click", toggleClassMenu, false);

時(shí)間線向我們展示了什麼？

全是綠色的條，寶貝。想看一個(gè)實(shí)際例子嗎？點(diǎn)擊這裡。 （此處應(yīng)插入實(shí)際鏈接）

(此處應(yīng)添加關(guān)於移動(dòng)動(dòng)畫的常見問(wèn)題解答部分，內(nèi)容與原文檔中的FAQs部分一致)

以上是使用CSS3實(shí)現(xiàn)60 fps移動(dòng)動(dòng)畫3的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！