高性能的視差動畫

Sumat 7年前發布 | 10K 次閱讀高性能前端技術

高性能的視差動畫

愛也好，恨也好，視差效果已經遍布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 來實現視差效果領域做出了很重要的工作。他們采用的非常有效技術有：

建立一個容器元素，設置 overflow-y: scroll 使其可以滾動（同時可能需要 overflow-x: hidden ）。
對于上面的元素, 我們會應用一個 perspective 值，然后設置 perspective-origin 到 top left , 或者 0 0 。
對上面元素的子元素應用一個在 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);
}</code></pre> 
  
當然我們假定你的 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);
}</code></pre> 
  
這樣就為 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 。為了修復這個問題，我們可以為父元素 [設置][11] `translateZ(0px)``。 
   頁面內容太大了：在決定頁面內容有多大時，很多瀏覽器負責放縮，但很遺憾 Chrome 和 Safari 不負責。所以假如有一個放大 3 倍的變換應用到某個元素時，你可能會看到滾動條出現了，而且一旦出現后，即使之后你恢復了 1:1 的比例，滾動條也不會消失。有一個方法可以避免這種情況：那就是從右下角進行放縮（ transform-origin: bottom right ）。這種方案背后的原理是它會導致過大的元素進入滾動區域的“負面”（一般是左上），而滾動區域永遠不會讓你看到“負面”區域。 
   
  結論 
  視差動畫如果經過的周全的設計考慮后會是一個非常有趣的效果。而且現在你應該可以了解到我們是可以實現一個高性能的、滾動耦合的、跨瀏覽器的方案。由于這里面需要一點點數學計算和一些模板化的操作，所以我們封裝了一個 工具類 和 例子 。 
  歡迎試用，并提出您的寶貴意見。 
    
  來自：https://juejin.im/post/58d1dcd5a22b9d006443c5d5


                    
                         本文由用戶 Sumat 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1490166955916.html
                         高性能 前端技術

高性能的視差動畫