「譯」高效的 “box-shadow” 動畫

pkwenda 發布于2019-08-28 18:26 / 2360人閱讀

摘要：給變化的制作動畫會大大縮減頁面渲染的性能。盡量的減少重繪的次數，可以保證你的動畫能夠保證在左右通過改變子元素的透明度。為什么會有這樣的結果只有很少的屬性才能避免在動畫的過程不斷的重繪，像和。

原文地址：http://tobiasahlin.com/blog/how-to-animate-box-shadow/

如何才能防止在給 box-shadow 制作動畫過渡時導致的每一幀都要進行的重繪（re-paint），從而提高頁面的性能？
答案就是：不可能。給變化的 box-shadow 制作動畫會大大縮減頁面渲染的性能。

但是，這里依然有類似的方法實現相同的效果。盡量的減少重繪的次數，可以保證你的動畫能夠保證在 60 FPS 左右：通過改變子元素的 opacity 透明度。

Demo

查看這個Demo，比較一下兩種實現方式的不同。左邊的動畫是在 box-shadow 的 :hover 狀態時執行 box-shadow 動畫，而右邊的實現方式中，我們通過 :after 添加了一個偽元素，并給它添加了 box-shadow，然后通過執行 opacity 動畫來是實現相同的效果。

如果你打開你的調試工具，可以看到下面類似的結果（綠色部分表示繪制；越少越好）：

很明顯如果我們直接執行 box-shadow 的動畫會導致更多的重繪。

為什么會有這樣的結果？只有很少的屬性才能避免在動畫的過程不斷的重繪，像 opacity 和 transform。
這就是兩種方式的不同之處，下面是核心代碼：

/* The slow way */
.make-it-slow {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out:
}

/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* The fast way */
.make-it-fast {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Pre-render the bigger shadow, but hide it */
.make-it-fast:after {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out:
}

/* Transition to showing the bigger shadow on hover */
.make-it-fast:hover:after {
  opacity: 1;
}

在上面的例子中，高效的實現方式有兩層：一層負責呈現盒子，一層負責盒子陰影的過度動畫，只對陰影的 opcity 執行動畫。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111230.html

[譯]深入了解CSS Box Shadow

摘要：水平偏移水平偏移控制了盒子陰影在軸的偏移。同時，因為是負值，所以向上移動。如果是負值，則會在各個方向上收縮。值得注意的是，因為它的擴展距離是正，所以會在各個方向上增加因為沒有水平和垂直偏移。它可以通過任何可以表示顏色的方式來表示顏色。原文：A Close Look at CSS Box Shadow CSS的box-shadow可以被用來給塊級元素一個外陰影或者是內陰影。接下來讓我們...

騫諱護 2019-08-28 18:20 評論0 收藏0
[譯]深入了解CSS Box Shadow

摘要：水平偏移水平偏移控制了盒子陰影在軸的偏移。同時，因為是負值，所以向上移動。如果是負值，則會在各個方向上收縮。值得注意的是，因為它的擴展距離是正，所以會在各個方向上增加因為沒有水平和垂直偏移。它可以通過任何可以表示顏色的方式來表示顏色。原文：A Close Look at CSS Box Shadow CSS的box-shadow可以被用來給塊級元素一個外陰影或者是內陰影。接下來讓我們...

SQC 2019-08-01 14:53 評論0 收藏0
完整的學習和使用CSS動畫【譯】

摘要：然而通過自定義貝塞爾曲線的值，可以滿足你具體的動畫時間需求。關于如何使用貝塞爾曲線的方法我們可以通過查看的開發者網站動畫延時動畫延時常常應用于當我們需要對動畫進行的延時操作的時候。從而減少大部分動畫執行期間潛在的性能損耗問題。注：原文有較大改動使用 keyframes, animation屬性，例如timing, delay, play state, animation-coun...

fjcgreat 2019-08-30 15:53 評論0 收藏0
完整的學習和使用CSS動畫【譯】

摘要：然而通過自定義貝塞爾曲線的值，可以滿足你具體的動畫時間需求。關于如何使用貝塞爾曲線的方法我們可以通過查看的開發者網站動畫延時動畫延時常常應用于當我們需要對動畫進行的延時操作的時候。從而減少大部分動畫執行期間潛在的性能損耗問題。注：原文有較大改動使用 keyframes, animation屬性，例如timing, delay, play state, animation-coun...

sean 2019-08-01 16:27 評論0 收藏0