高效能的視差動畫【譯】

高效能的視差http://www.php.cn/code/9595.html" target="_blank">動畫

愛也好，恨也好，視差效果已經遍布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 是下面的樣子：

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

調整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 的效果會被“拍扁”，也就是說效果將不複存在。

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

在上面的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 值，這樣就改變了計算的滾動位移，建立出了視差效果。

<p class="container”>  <p class="parallax-container”>    <p class="parallax-child”></p>  </p></p>.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 ）。這種方案背後的原理是它會導致過大的元素進入捲動區域的“負面”（一般是左上），而捲動區域永遠不會讓你看到“負面”地區。

結論

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

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