flip你的動畫

SoapEye 發布于2019-08-20 15:31 / 1961人閱讀

摘要：如果你看到我的前一篇文章一篇文章說清瀏覽器解析和動畫優化，理解本篇文章還是很簡單的。，元素的終止狀態。這會打斷正在運行的動畫，這是糟糕的。關鍵是確保你的預計算在用戶響應的空閑時間執行，這樣兩個動畫就不會沖突了。

在vue官方文檔上看到vue使用flip做動畫，就去研究了一下。這是一個準則，協調js和css對動畫的操作。如果你看到我的前一篇文章一篇文章說清瀏覽器解析和CSS（GPU）動畫優化，理解本篇文章還是很簡單的。

flip概念

首先我們說說flip這幾個字母的含義：

F:first，參加過渡元素的初始狀態。
L:last，元素的終止狀態。
I:invert，這是flip的核心。你通過這個元素的初始狀態和終止狀態計算出元素改變了什么，比如它的寬、高及透明度，然后你翻轉這個改變；舉個例子，如果一個元素的初始狀態和終止狀態之間偏移90px，你應該設置這個元素transform: translateY(-90px)。這個元素好像是在它的初始位置，其實正好相反。
P：play，為你要改變的任何css屬性啟用tansition，移除你invert的改變。這時你的元素會做動畫從起始點到終止點。

以下是代碼示例：

//js
var app = document.getElementById("app");
var first = app.getBoundingClientRect();
app.classList.add("app-to-end");
var last = app.getBoundingClientRect();
var invert = first.top - last.top;
//使元素看起來好像在起始點
app.style.transform = `translateY(${invert}px)`;
requestAnimationFrame(function() {
   //啟用tansition，并移除翻轉的改變
  app.classList.add("animate-on-transforms");
  app.style.transform = "";
});
app.addEventListener("transitionend", () => {
  app.classList.remove("animate-on-transforms");
})

使用flip的好處

看到這里，如果你看過我的上一篇文章一篇文章說清瀏覽器解析和CSS（GPU）動畫優化，你知道getBoundingClientRect()是一個耗費昂貴的操作，它會迫使瀏覽器發生一次重排。那么為什么我們可以做這消耗不菲的操作呢？

如上圖所示，在用戶與網站交互后有100ms的空閑時間，如果我們利用這100ms做預計算操作，然后使用css3的transform和opacity執行動畫，用戶會覺得你的網站響應非常快。

注意事項

1、別超過100ms的空閑期：一旦超過這個空閑期，就會造成卡頓的狀況出現；使用開發者工具注意這一點。
2、仔細安排動畫：想象一下你正在執行你動畫中的一個，然后你執行另外一個；這個需要大量的預計算。這會打斷正在運行的動畫，這是糟糕的。關鍵是確保你的預計算在用戶響應的空閑時間執行，這樣兩個動畫就不會沖突了。
3、使用transform和scale時，元素會被扭曲；雖然可以重構標簽避免扭曲，但最終他們會相互影響。

總結

flip是一個如何做動畫的思考方式，它是使css和js非常好的配合。使用js做計算，使用css做動畫。使用css做動畫不是一定的，你也可以使用Web Animations API或者單單JavaScript。關鍵是你要減少每一幀的復雜度（推薦使用transform和opacity）。

參考

https://aerotwist.com/blog/fl...

GPU云服務器云服務器 Flip Flipping 萬你的擴展你的

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

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

flip你的動畫

摘要：如果你看到我的前一篇文章一篇文章說清瀏覽器解析和動畫優化，理解本篇文章還是很簡單的。，元素的終止狀態。這會打斷正在運行的動畫，這是糟糕的。關鍵是確保你的預計算在用戶響應的空閑時間執行，這樣兩個動畫就不會沖突了。在vue官方文檔上看到vue使用flip做動畫，就去研究了一下。這是一個準則，協調js和css對動畫的操作。如果你看到我的前一篇文章一篇文章說清瀏覽器解析和CSS（GPU）動畫...

vibiu 2019-08-29 12:19 評論0 收藏0
Vue一個案例引發「動畫」的使用總結

摘要：既然我們知道了方法，我們就來給它加一個簡單的動畫。動畫中還給我們提供了一些鉤子函數，我們可以使用鉤子函數構建動畫。它會告知我們的動畫完成，我們綁定了為，告訴組件跳過的檢測，使用。項目開發中動畫有著很重要的作用，而且也是用到的地方非常多，例如：鼠標的進入離開，彈窗效果，組件的顯示隱藏，列表的切換等等，可以說我們網頁上的動畫無處不在，也有人說了，這些東西也可以不使用動畫。對，你說的沒錯...

liuchengxu 2019-08-23 13:43 評論0 收藏0
實現平滑過渡的拖拽排序

摘要：將元素由拖拽開始的地方移到拖拽結束地方，這期間，目標元素和目標元素周圍的元素要怎么平滑過渡到新的位置。最近重讀Vue官方文檔，在列表的排序過渡這一小節，文檔提到，組件有一個特殊的地方，不僅可以實現進入和離開動畫，還可以改變定位，官網示例如下：showImg(https://segmentfault.com/img/bVbtMTM?w=634&h=424); 例子中實現的效果看起來還...

chengjianhua 2019-08-30 11:09 評論0 收藏0
實現平滑過渡的拖拽排序

摘要：將元素由拖拽開始的地方移到拖拽結束地方，這期間，目標元素和目標元素周圍的元素要怎么平滑過渡到新的位置。最近重讀Vue官方文檔，在列表的排序過渡這一小節，文檔提到，組件有一個特殊的地方，不僅可以實現進入和離開動畫，還可以改變定位，官網示例如下：showImg(https://segmentfault.com/img/bVbtMTM?w=634&h=424); 例子中實現的效果看起來還...

Lowky 2019-08-23 18:04 評論0 收藏0