高效能的視差動畫【譯】

接灰的電子產品發表於2019-02-27
動畫

高效能的視差動畫

原文地址： developers.google.com/web/updates…
原文作者： Paul Lewis
譯文作者： 接灰的電子產品

愛也好，恨也好，視差效果已經遍佈web之上了。當你用的巧妙的時候，它可以給應用增加深度和隱喻效果。但問題在於實現一個高效能的視差效果是一個很有挑戰的工作。在這篇文章裡，我們將討論如何構造一個高效能的視差效果，當然同樣重要的是還得跨瀏覽器。

高效能的視差動畫【譯】
視差效果示意圖

摘要

  • 不要使用滾動事件(scroll events)或者背景定位（background-position）來建立視差動畫。
  • 使用 CSS 3D 變換來建立一個更準確的視差效果。
  • 對於iOS移動裝置的Safari瀏覽器使用 position: sticky 來確保視差可以生效。

如果你想要一個開箱即用的方案，請訪問 Parallax helper JS ，這裡還有一個 demo演示。

視差的問題分析

在開始之前，我們先來看兩個現有的常見的實現視差的方法，探討為何它們不適合我們要追求的目標。

不好的方案：使用滾動事件

視差的關鍵需求是它應該是滾動耦合的：對於頁面滾動的每一個位置變化，視差元素的位置也應被更新。這看上去很容易，現代瀏覽器的重要機制之一就是它們可以非同步處理工作。儘管如此，在大多數瀏覽器中，滾動事件是被作為“儘量好”（best effort）的工作處理的，也就意味著：瀏覽器並不確保每一幀的滾動動畫送達！

這個重要的資訊告訴我們為什麼要避免使用Javascript基於滾動事件去移動元素：Javascript並不能確保視差會和頁面滾動保持同樣的步調。。在一些老版本的Mobile Safari上，滾動事件甚至是在滾動完成後才觸發的，這一點讓基於Javascript的滾動效果無法實現。在較新的Mobile Safari版本中，滾動事件可以在動畫過程中觸發了，但是和Chrome一樣，它是一個基於“儘量好”的原則的。所以當主執行緒忙於其他工作時，滾動事件不會立即觸發，也就意味著視差效果的丟失。

不好的方案：更新背景位置

我們要避免的另一個場景是在每幀都進行繪製。很多方案試圖採用改變 background-position 來提供視差效果， 但這會讓瀏覽器在滾動時重繪受影響的部分，而這可能會是相當消耗資源的，這種影響會使動畫卡頓。

如果我們想提供一個高質量的視差動畫，我們想要的是一個可以當作加速的屬性（這裡我們指的是 transform 和 opacity ）,而這是不依賴於滾動事件的。

CSS 3D

Scott Kellum 和 Keith Clark 都已經在利用 CSS 3D 來實現視差效果領域做出了很重要的工作。他們採用的非常有效技術有：

  1. 建立一個容器元素，設定 overflow-y: scroll 使其可以滾動（同時可能需要 overflow-x: hidden）。
  2. 對於上面的元素, 我們會應用一個 perspective 值，然後設定 perspective-origin 到 top left, 或者 0 0。
  3. 對上面元素的子元素應用一個在 Z 軸的變換，然後把它們還原回來以實現視差效果，而沒有影響它們在螢幕上的大小。

這種方案的 CSS 看起來是下面的樣子：

.container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 1px;
  perspective-origin: 0 0;
}

.parallax-child {
  transform-origin: 0 0;
  transform: translateZ(-2px) scale(3);
}複製程式碼

當然我們假定你的 HTML 是下面的樣子：

<div class="container”>
  <div class="parallax-child”></div>
</div>複製程式碼

調整perspective的比例

把子元素擠回來會要求它設定一個更小的相對於 perspective 的比例。你可以通過下列等式來計算需要的縮放比例： (perspective - distance) / perspective。由於我們希望視差元素看上去和我們一開始設定的一樣大，所以它應該根據這樣的等式進行放縮而不是保持不變。

拿上面的例子來說， perspective 是 1px, 而 parallax-child 在 Z 軸方向是 -2px，這就意味著元素需要被放大3倍，你可以看到我們在 scale 中寫入了 3 這個值。

對於任何沒有應用 translateZ 的內容，你可以用 0 替代，也就是縮放比為 (perspective - 0) / perspective，結果為 1 ，即既不放大也不縮小。真的是非常方便。

為什麼這種方案好用？

弄清楚為什麼這種方案好用是非常重要的，因為我們很快就要使用這個知識了。滾動其實本質是一種變換，這是它為什麼可以被加速的原因。滾動很大程度上使用GPU參與了圖層的變換。一個常見的滾動（沒有應用任何 perspective ）是這樣的：滾動這種情況下是以 1:1 的方式在對待滾動的元素和它的子元素。換人話說，如果你向下滾動一個元素 300px，那麼它的子元素向上變換了同樣的數量： 300px。

但是，如果對這個滾動元素應用 perspective 值會把這個過程“搞亂”：這個值改變了滾動變換的理想路線。現在如果一個 300px 的滾動可能把子元素移動了 150px，當然這取決於你給 perspective 和 translateZ 設定什麼值。如果一個 translateZ 設定為0的子元素，它的滾動會一切如常 （ 1:1 ），但是一個被推向 Z 軸向（ translateZ 不為 0 ）的子元素將以不同的比例滾動！因此出現了視差效果。另外非常重要的一點是：這個過程本身就是瀏覽器內部的滾動機制的一部分，因此沒有必要監聽滾動事件或者改變背景位置。

美中不足：Mobile Safari

每種效果都有一些約束，對於變換（ transform ）來講，對子元素的 3D 效果的保持就是這樣。如果在應用 perspective 的元素和它的“視差”子元素的結構之中有其它元素的存在，那麼 3D 的效果會被“拍扁”，也就是說效果將不復存在。

<div class="container”>
  <div class="parallax-container”>
    <div class="parallax-child”></div>
  </div>
</div>複製程式碼

在上面的HTML中 .parallax-container 是一個新新增的元素，而它會"抹平" perspective，從而導致效果丟失。通常情況下，解決方案還是比較符合直覺的：給這個元素新增 transform-style: preserve-3d 以便讓它可以把 3D 效果應用到更深層的節點去。

.parallax-container {
  transform-style: preserve-3d;
}複製程式碼

對於 Mobile Safari 來說，事情變的有點麻煩。對容器元素應用 overflow-y : 技術上這是沒問題的，但是這會讓滾動元素的移動過於凶猛。解決方案是加上一個 -webkit-overflow-scrolling: touch ，但這個設定會導致 perspective 被抹平，因此我們會得不到任何視差效果。

從一個發展的角度看，這可能算不上什麼問題（因為只在舊版本的 Mobile Safari 出現），即使我們無法在每一個瀏覽器中展現視差效果，但一個應用的功能還是好用的，但我們最好找出一個方案。

position:sticky 來拯救

事實上，我們可以從 position: sticky 中得到一些幫助，這個設定允許元素固定在 viewport 的頂部或者固定在一個滾動元素的父元素。這個屬性的文件，就如同任何其它文件一樣，又臭又長，但是還是可以找到一些有用資訊：

一個固定的“盒子”非常像一個相對定位的盒子，但是位移是通過引用最近的可滾動的祖先來計算的，或者根據 viewport 來計算，如果找不到這樣一個祖先的話 -- CSS Positioned Layout Module Level 3

第一眼看上去好像幫助不大，但一個關鍵點在句中說到如何計算元素的固定位置的那部分：“位移是通過引用最近的可滾動的祖先來計算的”。換句話說，移動固定元素的距離（為了讓它看起來是固定在某個元素或者 viewport 上）是在應用其它任何變換之前進行計算的，而不是之後。這就意味著，和我們剛才說的滾動的那個例子很像，如果位移計算的結果是 300px，那麼我們就有了一個新的機會去使用 perspective （或者其它任何變換）來在這個 300px 應用到固定元素之前去改變它。

通過給視差元素設定 position: -webkit-sticky，我們可以有效的“翻轉”那個由於 -webkit-overflow-scrolling: touch 而產生的“抹平”效果。這樣就確保了視差元素引用最近的可滾動的祖先元素，這裡就是 .container 。然後，和上文講的類似，給 .parallax-container 設定一個 perspective 值，這樣就改變了計算的滾動位移，建立出了視差效果。

<div class="container”>
  <div class="parallax-container”>
    <div class="parallax-child”></div>
  </div>
</div>

.container {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.parallax-container {
  perspective: 1px;
}

.parallax-child {
  position: -webkit-sticky;
  top: 0px;
  transform: translate(-2px) scale(3);
}複製程式碼

這樣就為 Mobile Safari 恢復了視差效果，真是一個不錯的結果。

固定定位的問題

和之前的方案確實還有一個明顯區別， position: sticky 改變了視差的機制。固定定位試圖固定某個元素在滾動容器頂端，而非固定元素不是。這就意味著固定定位產生的視差和非固定產生的色差是相反的：

  • 使用 position: sticky: 元素離 z=0 越近，它移動的越少
  • 不使用 position: sticky: 元素離 z=0 越近，它移動的越多

如果你還是感到有些抽象的話，可以看一下Robert Flack的這個demo，這個demo展示了在固定定位和非固定定位的條件下，元素是如何有不同的表現的。要看到這個效果的話，你需要 Chrome Canary (寫作本文是，版本為56) 或者 Safari 。

高效能的視差動畫【譯】
`position: sticky` 對視差的影響

花式bug和應對

如同任何事情一樣，還是有很多的坑需要填。

  • 固定定位的支援是不一致的：當前在 Chrome 中對於這個特性還在開發中，Edge 則完全缺失，FireFox則有繪製的bug。在這種情況下，我們應該增加一點程式碼來在需要時（這裡就是 Mobile Safari ）才新增 position: sticky
  • 該效果在 Edge 中完全沒有作用。Edge試圖在OS級別處理滾動，通常情況下這是個好事。但在這個例子中，這種機制會使得我們無法在滾動時去應用 perspective。為了修復這個問題，我們可以為父元素 設定 `translateZ(0px)``。
  • 頁面內容太大了：在決定頁面內容有多大時，很多瀏覽器負責放縮，但很遺憾 Chrome 和 Safari 不負責。所以假如有一個放大 3 倍的變換應用到某個元素時，你可能會看到滾動條出現了，而且一旦出現後，即使之後你恢復了 1:1 的比例，滾動條也不會消失。有一個方法可以避免這種情況：那就是從右下角進行放縮（ transform-origin: bottom right ）。這種方案背後的原理是它會導致過大的元素進入滾動區域的“負面”（一般是左上），而滾動區域永遠不會讓你看到“負面”區域。

結論

視差動畫如果經過的周全的設計考慮後會是一個非常有趣的效果。而且現在你應該可以瞭解到我們是可以實現一個高效能的、滾動耦合的、跨瀏覽器的方案。由於這裡面需要一點點數學計算和一些模板化的操作，所以我們封裝了一個工具類和例子。

歡迎試用，並提出您的寶貴意見。

相關文章