成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

flip你的動畫

vibiu / 2450人閱讀

摘要：如果你看到我的前一篇文章一篇文章說清瀏覽器解析和動畫優(yōu)化，理解本篇文章還是很簡單的。，元素的終止?fàn)顟B(tài)。這會打斷正在運(yùn)行的動畫，這是糟糕的。關(guān)鍵是確保你的預(yù)計算在用戶響應(yīng)的空閑時間執(zhí)行，這樣兩個動畫就不會沖突了。

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

flip概念

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

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

以下是代碼示例：

//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;
//使元素看起來好像在起始點(diǎn)
app.style.transform = `translateY(${invert}px)`;
requestAnimationFrame(function() {
   //啟用tansition，并移除翻轉(zhuǎn)的改變
  app.classList.add("animate-on-transforms");
  app.style.transform = "";
});
app.addEventListener("transitionend", () => {
  app.classList.remove("animate-on-transforms");
})
使用flip的好處

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

如上圖所示，在用戶與網(wǎng)站交互后有100ms的空閑時間，如果我們利用這100ms做預(yù)計算操作，然后使用css3的transform和opacity執(zhí)行動畫，用戶會覺得你的網(wǎng)站響應(yīng)非?？?。

注意事項

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

總結(jié)

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

參考

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111815.html

相關(guān)文章

  • flip你的動畫

    摘要：如果你看到我的前一篇文章一篇文章說清瀏覽器解析和動畫優(yōu)化，理解本篇文章還是很簡單的。，元素的終止?fàn)顟B(tài)。這會打斷正在運(yùn)行的動畫，這是糟糕的。關(guān)鍵是確保你的預(yù)計算在用戶響應(yīng)的空閑時間執(zhí)行，這樣兩個動畫就不會沖突了。 在vue官方文檔上看到vue使用flip做動畫，就去研究了一下。這是一個準(zhǔn)則，協(xié)調(diào)js和css對動畫的操作。如果你看到我的前一篇文章一篇文章說清瀏覽器解析和CSS（GPU）動畫...

    SoapEye 評論0 收藏0

  • Vue一個案例引發(fā)「動畫」的使用總結(jié)

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

    liuchengxu 評論0 收藏0

  • 實現(xiàn)平滑過渡的拖拽排序

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

    chengjianhua 評論0 收藏0

  • 實現(xiàn)平滑過渡的拖拽排序

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

    Lowky 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<