頁面切換特效其實並不算少見，尤其是在 SPA 單一頁面應用程式逐漸流行之後，頁面讀取、資料抓取這些動作都需要一些等候，但由於瀏覽器不會與伺服器重新發出請求，瀏覽器就不會有重新載入的過程囉。

比較常見的方式是用一個圈圈轉轉轉 XD，例如 React Material UI 這個 UI 元件的函式庫就提供了這樣的轉圈圈元件

▲ 會議室預約系統使用的 Loading 動畫

如果不使用 Loading 的動畫特效會讓使用者不確定現在怎麼了？怎麼沒有畫面呢？當然你的網站很快，會比較沒這種影響。

▲ dev.studio-44s.tw 沒有使用 Loading 動畫

換頁特效比較像是把 Loading 的過程擴大到整個頁面，而不是單個元件去呈現 Loading 的過程，像是在這一次我們網站改版當中加入了新的換頁動畫特效

換頁特效的設計過程

我們的換頁特效設計的相對簡單，但其實可以找到非常多有特色的換頁特效，像是 e-s.tw、簡訊設計的換頁特效都加入了自己的品牌核心

▲ e-s 的換頁特效

▲ 簡訊設計的換頁特效

其實不乏發現他們的換頁動畫不僅是在頁面離開 -> 頁面進入，還包含了元素進入，但要同時安排元素的進入其實很費工時。

設計過動畫的朋友們會知道每個畫格都需要設計，當然工程師在轉換為實際產出的時候也必須要對每個部分都做處理。不過這次我們就針對我們的換頁動畫設計來說明就好 XDD，畢竟我們沒有安排元素的進場，只有畫面變換的，相對變得很單純。

我們想製造出替換的感覺，所以以四個設計主體顏色做了四個全頁面的方塊

讓他們快速輪替來製造流動的感覺。

實踐的工具

如果你使用前端框架，如 ReactJS 或者 VueJS 這些技術基本上不太需要擔心，框架本身都有自己的元件生命週期函數，像是 ReactJS 跟 VueJS 都有提供 Lifecycle Hooks 來控制元件（每個畫面也都是一個大元件）進入及離開等時機點要做什麼事情，此時只要將動畫函數在這些 Hooks 當中呼叫就可以達到效果了。

如果沒有呢？像是我們網站是用 Laravel 來寫的，並沒有搭配什麼前端框架，所以自然沒有那些 Hook 可以使用。我們推薦一個工具 － Barba.js 讓你傳統的 MPA 也可以擁有類似於前端框架的生命週期 Hook 函數。我們來簡單看一下是怎麼把 Barba.js 實際應用在換頁效果當中的吧～

這是我們的進入及離開的動畫函數，老樣子用 GSAP 這個套件來做。

    const LeavePageLoading = () => {
        var tl = gsap.timeline();
        tl.add(
            gsap.fromTo("#pageloader1",
            {
                x: "-100vw",
            }
            ,
            {
                duration: 0.25,
                x: 0,
                ease: "Circ.easeInOut",
            })
        );
        tl.add(
            gsap.fromTo("#pageloader2",
            {
                x: "-100vw",
            }
            ,
            {
                duration: 0.25,
                x: 0,
                ease: "Circ.easeInOut",
            })
        );

        tl.add(
            gsap.fromTo("#pageloader3",
            {
                x: "-100vw",
            }
            ,
            {
                duration: 0.25,
                x: 0,
                ease: "Circ.easeInOut",
            })
        );

        tl.add(
            gsap.fromTo("#pageloader4",
            {
                x: "-100vw",
            }
            ,
            {
                duration: 0.25,
                x: 0,
                ease: "Circ.easeInOut",
            })
        );
        return tl;
    }

    const EntryPageLoading = () => {
        return gsap.fromTo(".pageloader",
        {
            x: "0",
        }
        ,
        {
            duration: 0.25,
            x: "+100vw",
            ease: "Circ.easeInOut",
            delay: 0.5
        });
    }

▲ 動畫特效函數

再來就直接應用 Barba.js 提供的生命週期函數來在對應的時間呼叫對應的動畫函數，這裡我們用了 leave（頁面離開）、after（進入後）以及 beforeEnter（進入前），在 beforeEnter 部分是為了要把使用者的滾軸重置到頁頭，不然會讓使用者換頁面的時後可能會看到網頁最底部而不是最頂部。

    barba.init({
        sync: true,
        transitions: [{
            leave(data) {
                return EntryPageLoading();
            },
            after(data) {
                return LeavePageLoading();
            },
            beforeEnter() {
                scroll.scrollTo('top', { 'duration':0 });
            }
        }]
    });

▲ Barba.js 的生命週期函數

我們這次的設計相對簡單，沒有加入元素的進入特效，換頁的特效也相對單純，如果要做的話還有很多的特效可以做：煙霧、3D 轉換、繪畫等效果，但這就不是一時間可以做出來的了，對於閱讀者只是幾秒鐘的事情，工程師可能得費上數小時甚至好幾天才能打造出來！

這一次就沒有完整的 Codepen 了，因為可能也跑不起來 XD