如何實現(xiàn)一個全屏的加載動畫效果

本篇內(nèi)容主要講解“如何實現(xiàn)一個全屏的加載動畫效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何實現(xiàn)一個全屏的加載動畫效果”吧!

　　這個效果的核心是讓一個形狀在頁面窗口中動畫顯示并有展示活動的指示。當(dāng)新內(nèi)容被加載時，形狀將以動畫顯示返回顯示的頁面。我們將使用 Snap.svg 動畫庫來實現(xiàn)，因為這個庫讓我們能夠創(chuàng)建復(fù)雜的形狀和有趣的變形轉(zhuǎn)換效果。

在線演示

需要注意的是，這里的示例只是提供一種思路，動態(tài)內(nèi)容加載是模擬的。另外沒有做降級處理，動畫和偽元素可能在某些瀏覽器無法正常工作。

　　溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現(xiàn)代瀏覽器中瀏覽。

　　我們顯示遮罩的方式是，定義一個 SVG 路徑動畫：

　　我們定義的初始路徑在頁面中是看不到的，開始和結(jié)果路徑分別定義在 data-opening 和 data-closing 屬性中。正如你所看到的，我們使用的是小型的 viewBox，但我們舒展繪圖窗口的寬度和高度為100%，而不是保持長寬比。如果我們沒有定義一個閉合的路徑，我們將動畫回到初始路徑。

　　請注意，我們也可以添加多個路徑（用分號隔開），它允許 SVG 繪制你將在第一演示中看到的步驟明智的動畫。 我們設(shè)置疊加劃分到一個固定的位置，覆蓋了整個頁面，并通過給 ::before 和 ::after 偽元素添加樣式來實現(xiàn)加載提示效果。

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. .pageload-overlay {   

2.     position: fixed;   

3.     width: 100%;   

4.     height: 100%;   

5.     top: 0;   

6.     left: 0;   

7.     visibility: hidden;   

8. }   

9.     

10. .pageload-overlay.show {   

11.     visibility: visible;   

12. }   

13.     

14. .pageload-overlay svg {   

15.     position: absolute;   

16.     top: 0;   

17.     left: 0;   

18. }   

19.     

20. .pageload-overlay svg path {   

21.     fill: #fff;   

22. }  

　　我們在這里使用 visibility，因為使用這些固定的風(fēng)格定位與指針以及 SVG 的事件可能在移動端有些問題，所以我們通過定位和操縱父 DIV 來代替。 你可能已經(jīng)注意到，圓形動畫也從一個路徑到另一個路徑變換來實現(xiàn)（當(dāng)然有其他的實現(xiàn)方式，例如縮放） ，但我們使用以下值來確定圓是響應(yīng)式（ Rseponsive）的：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"  

到此，相信大家對“如何實現(xiàn)一個全屏的加載動畫效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！