如果您曾經(jīng)訪問過 Nicolas Zezuka 和 Active Theory 的出色的設(shè)計(jì)網(wǎng)站，你可能已經(jīng)注意到在顯示新內(nèi)容之前動(dòng)感的頁面加載動(dòng)畫了。這種風(fēng)格的動(dòng)畫效果最近非常流行，因此這篇文章想給你帶來一些啟示。

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

在線演示

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

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

　　我們顯示遮罩的方式是，定義一個(gè) SVG 路徑動(dòng)畫：

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

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