【動畫進階】當路徑動畫遇到滾動驅動！

我的小冊 《CSS 技術揭秘與實戰通關》上線了，想瞭解更多有趣、進階、系統化的 CSS 內容，可以猛擊 - LINK。

本文，我們將一起利用純 CSS，實現如下這麼個酷炫的效果：

在一年前，我介紹了 CSS 中非常新奇有趣的一個新特性 -- @scroll-timeline：革命性創新，動畫殺手鐧 @scroll-timeline。

利用這個新特性，我們可以輕鬆的將原本基於時間控制的動畫效果，交給頁面的滾動特性進行控制，像是這樣：

只是，該特性由於諸多原因，遭到了規範廢棄。

然而，時隔一年半，規範帶著新的 animation-timeline 王者回歸！我們可以將其簡單理解為：Scroll-driven Animations（滾動驅動動畫）。

什麼是滾動驅動動畫（Scroll-driven Animations）？

OK，我們通過一個例子，快速上手（回憶）滾動驅動動畫。

我們來實現這麼一個滾動進度指示器效果：

註意看 GIF 圖的上方，有一個黃色進度條，可以通過滾動，改變黃色進度條的進度狀態。這個也就是我們說的滾動指示器效果。

在之前，這個效果利用純 CSS 是不太好實現的，但是有了 animation-timeline 之後，一切都將變得非常輕鬆。

假設我們有如下結構：

<div id="g-container">
    <h1>不可思議的純 CSS 進度條效果</h1>
    <p>OK，繼續....../p>
    // ...
</div>

body {
    overflow: scroll;
}
#g-container {
    width: 100vw;
}

其中，#g-container 有非常多的內容，其長度遠遠超過 100vh，也就是一個屏幕的高度。並且，body 是設置了 overflow: scroll 的。因此，整個頁面是可以進行滾動的：

好，接下來，我們需要加上進度條，實現的方式有非常多種，這裡我通過給 #g-container 添加一個偽元素，將進度條的效果設置給這個偽元素，代碼也非常簡單：

#g-container::before {
    content: "";
    position: fixed;
    height: 7px;
    left: 0;
    top: 0;
    right: 0;
    background: #ffc107;
    animation: scale 3s linear infinite;
    transform-origin: 0 50%;
}

@keyframes scale {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

這裡，利用元素的縮放，從 transform: scaleX(0) 到 transform: scaleX(1) 的變化，實現了進度條的動畫效果。

只不過，目前是一個無限動畫，一次動畫效果持續 3 秒 -- animation: scale 3s linear infinite：

好，鋪墊到這裡，接下來終於要輪到 animation-timeline 登場了。

上述的動畫效果，目前是由時間進行控制的，持續時長為 3s，而我們的目標，就是利用滾動的效果控制整個動畫。

我們只需要簡單的改造一下代碼：

#g-container::before {
    // ...
    animation: scale 3s linear;
    animation-timeline: scroll(root);
    transform-origin: 0 50%;
}

這裡，我們僅僅加了一句 animation-timeline: scroll(root)，表示利用滾動進行元素的動畫控制，並且利用的是 root 元素的滾動，也就是 body 元素的滾動進行控制。

這樣，我們就輕鬆的實現了一個滾動指示器效果：

完整的代碼，你可以戳這裡：CodePen Demo -- 使用 scroll-animation 實現滾動指示器進度條

當然，整個滾動驅動動畫（Scroll-driven Animations）的內容還是非常多的，本文不對基礎語法做過多展開，大家可以通過下麵兩個途徑，進一步瞭解新語法：

1. MDN 文檔 -- animation-timeline
2. XboxYan 大佬的 CSS 滾動驅動動畫終於正式支持了~

借用 XboxYan 文章中的一幅圖：

motion-path 運動路徑動畫

好，到目前位置，我們都還在鋪墊內容，本文的核心是當路徑動畫遇到滾動驅動。

那麼，瞭解完滾動驅動動畫之後，我們再來瞭解一下，什麼是運動路徑動畫 -- motion-path。

motion-path 在之前，也有過系統的介紹 -- 探秘神奇的運動路徑動畫 Motion Path

什麼是 CSS Motion Path 運動路徑？利用這個規範規定的屬性，我們可以控制元素按照特定的路徑進行位置變換的動畫。並且，這個路徑可以是非常複雜的一條路徑。

初窺 motion-path

CSS Motion Path 規範主要包含以下幾個屬性：

• offset-path：接收一個 SVG 路徑（與 SVG 的path、CSS 中的 clip-path 類似），指定運動的幾何路徑
• offset-distance：控制當前元素基於 offset-path 運動的距離
• offset-position：指定 offset-path 的初始位置
• offset-anchor：定義沿 offset-path 定位的元素的錨點。 這個也算好理解，運動的元素可能不是一個點，那麼就需要指定元素中的哪個點附著在路徑上進行運動
• offset-rotate：定義沿 offset-path 定位時元素的方向，說人話就是運動過程中元素的角度朝向

下麵，我們使用 Motion Path 實現一個簡單的直線位移動畫。

<div>

div {
    width: 60px;
    height: 60px;
    background: linear-gradient(#fc0, #f0c);
    offset-path: path("M 0 0 L 100 100");
    offset-rotate: 0deg;
    animation: move 2000ms infinite alternate ease-in-out;
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

offset-path 接收一個 SVG 的 path 路徑，這裡我們的路徑內容是一條自定義路徑 path("M 0 0 L 100 100")，翻譯過來就是從 0 0 點運動到 100px 100px 點。

offset-path 接收一個 SVG 路徑，指定運動的幾何路徑。與 SVG 的path、CSS 中的 clip-path 類似，對於這個 SVG Path 還不太瞭解的可以戳這裡先瞭解下 SVG 路徑內容：SVG 路徑

我們會得到如下結果：

通過控制元素的 offset-distance 從 0% 變化到 100% 進行元素的路徑動畫。

當然，上述的動畫是最基本的，我可以充分利用 path 的特性，增加多個中間關鍵幀，稍微改造下上述代碼：

div {
    // 只改變運動路徑，其他保持一致
    offset-path: path("M 0 0 L 100 0 L 200 0 L 300 100 L 400 0 L 500 100 L 600 0 L 700 100 L 800 0");
    animation: move 2000ms infinite alternate linear;
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

這裡最主要還是運用了 path 中的 L 指令，得到瞭如下圖這樣一條直線路徑：

最終的效果如下，與利用 transform: translate() 添加多個關鍵幀類似：

完整的 Demo 你可以戳這裡：CodePen Demo -- CSS Motion Path Demo

曲線路徑動畫

上面的運動軌跡都是由直線構成，下麵我們看看如何使用 CSS Motion Path 實現曲線路徑動畫。

其實原理還是一模一樣，只需要在 offset-path: path() 中添加曲線相關的路徑即可。

在 SVG 的 Path 中，我們取其中一種繪製曲線的方法 -- 貝塞爾曲線，譬如下述這條 path，其中的 path 為 d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80"：

<svg width="400" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80" stroke="black" fill="transparent"/>
</svg>

對應這樣一條連續的貝塞爾曲線：

將對應的路徑應用在 offset-path: path 中：

<div>

div:nth-child(2) {
    width: 40px;
    height: 40px;
    background: linear-gradient(#fc0, #f0c);
    offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

可以得到如下運動效果：

可以看到，元素是沿著貝塞爾曲線的路徑進行運動的，並且，由於這次沒有限制死 offset-rotate，元素的朝向也是跟隨路徑的朝向一直變化的。（可以聯想成開車的時候，車頭一直跟隨道路會進行變化的，帶動整個車身的角度變化）

完整的 Demo 你可以戳這裡：CodePen Demo -- CSS Motion Path Demo

Amazing！路徑動畫配合滾動驅動

好，終於，到這裡，你應該已經大致瞭解了什麼是路徑動畫 motion-path，什麼是滾動驅動 scroll-driven。

我們可以嘗試把這兩個東西組合在一起。

假設，我們有這麼個 HTML 結構：

<div class="g-container">
    <div class="ele"></div>
</div>

body {
    width: 100%;
    height: 100%;
    background: conic-gradient(
        #fff,
        #fff 90deg,
        #ddd 90deg,
        #ddd 180deg,
        #fff 180deg,
        #fff 270deg,
        #ddd 270deg
    );
    background-size: 50px 50px;
}
.g-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 700px;
    height: 2000px;
}
.ele {
    position: absolute;
    width: 40px;
    height: 40px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: linear-gradient(270deg, #65d060, #0887ec);
}

簡單解釋一下：

1. 為了方便理解，我把 body 的背景設置成了格子背景
2. .g-container 是一個遠比屏幕高度高的容器，方便整個頁面進行滾動
3. .ele 是一個小三角形

目前，整個頁面是這樣的：

下麵，我們給 .ele設置一個 offset-path 路徑：

.ele {
    position: absolute;
    width: 40px;
    height: 40px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: linear-gradient(270deg, #65d060, #0887ec);
    offset-path: path("M 350 40 C 1000 1000, -350 1000, 350 1960");
    animation: move 4s linear infinite;
}

@keyframes move {
    0% {
        offset-distance: 0%;
    }
    50% {
        transform: scale(2.5);
    }
    100% {
        offset-distance: 100%;
    }
}

其中的核心就是 offset-path: path("M 350 40 C 1000 1000, -350 1000, 350 1960") 這裡面，有一個利用 3 次貝塞爾曲線畫出來的路徑。

並且，我們給它加上了 offset-distance: 0 到 offset-distance: 100% 的動畫效果，目前，整個效果是這樣的：

可以看到，小三角形，按照特定的路徑在進行運動。

為了更好的理解這個動畫，我們可以利用 SVG，把這個運動的路徑給畫出來：

<div class="g-container">
    <svg class="g-svg" width="400" height="160" xmlns="http://www.w3.org/2000/svg">
        <path id="svgpath" d="M 350 40 C 1000 1000, -350 1000, 350 1960" stroke="black" fill="transparent" />
    </svg>
    <div class="ele"></div>
</div>

.g-svg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 700px;
    height: 2000px;
    transform: translate(-50%, 0);
}
#svgpath {
    stroke: #9bc9de;
    stroke-width: 3px;
    stroke-dasharray: 2108, 2108;
    animation: lineMove 4s linear;
}
@keyframes lineMove {
    0% {
        stroke-dashoffset: 2108;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

我們利用 SVG 路徑，成功的將運動的路徑繪製了出來，並且，利用 stroke-dasharray 和 stroke-dashoffset，實現了一條線條動畫，控制它和小三角形的 motion-path 動畫保持一致。

要看懂 stroke-dasharray 和 stroke-dashoffset 實現的線條動畫，可能需要翻閱：【Web動畫】SVG 線條動畫入門

這樣，現在，我們就得到了這麼一個動畫效果：

到這裡，其實還沒有運用上滾動驅動，現在，我們把上述經由時間控制的動畫效果，交給頁面的滾動。

簡單改造上述 CSS 代碼：

.ele {
    position: absolute;
    width: 40px;
    height: 40px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    offset-path: path("M 350 40 C 1000 1000, -350 1000, 350 1960");
    background: linear-gradient(270deg, #65d060, #0887ec);
    animation: move 4s linear;
    animation-timeline: scroll(root);
}

#svgpath {
    stroke: #9bc9de;
    stroke-width: 3px;
    stroke-dasharray: 2108, 2108;
    animation: lineMove 4s linear;
    animation-timeline: scroll(root);
}

改動比較簡單：

1. 去掉兩個動畫效果的 infinite 關鍵字
2. 添加上 animation-timeline: scroll(root)

此時，我們就可以利用頁面的滾動，控制整個動畫效果：

完整的 DEMO，你可以戳這裡：CodePen Demo -- Scroll Driven & motion path & SVG stroke-dasharray Demo

在靈活掌握了上述內容後，我們就可以利用路徑動畫及滾動驅動創造出各種妙趣橫生的動畫效果！

下麵是我綜合利用各種技巧，實現的一個純 CSS 滾動動畫效果，感受一下：

上述案例中，除了本文介紹的所有內容外，使用了本文沒有提及的滾動驅動 API 中的 animation-range以及 CSS 與佈局相關的 shape-outside 屬性，如果不太瞭解這兩個屬性，需要自行補充相關知識。

Amazing！是不是非常的酷炫有意思，到今天，這種效果已經是純 CSS 代碼就能實現完成的了！

完整的代碼基於上述的 DEMO 進行擴展得到，就不貼出來了，感興趣的可以猛戳：CodePen Demo - CSS Scroll Driven

Can i Use - CSS Scroll Driven

來看看 CSS Scroll Driven 相關的 API 目前的相容性如何？截止至 2023-09-09，基於 Can i Use - Animation-timeline 的相容性如下：

可以看到 animation-timeline 已經從 Chrome 115 版本正式得到支持，並且其它瀏覽器也已經開始大力跟進，讓我們給時間一點時間，相信很快 CSS Scroll Driven 會更多的應用於生產環境，創造出各種以往需要藉助 JavaScript 才能實現的動畫。

而當路徑動畫遇到滾動驅動，勢必會創造出各種妙趣橫生的效果，更多有趣的效果組合等待我們去探索發現。

最後

好了，本文到此結束，希望對你有所收穫。

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。