如何利用CSS實(shí)現(xiàn)波浪進(jìn)度條效果

本篇內(nèi)容介紹了“如何利用CSS實(shí)現(xiàn)波浪進(jìn)度條效果”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

CSS Painting API

再簡(jiǎn)單快速的過(guò)一下，什么是 CSS Painting API。

CSS Painting API 是 CSS Houdini 的一部分。而 Houdini 是一組底層 API，它們公開了 CSS 引擎的各個(gè)部分，從而使開發(fā)人員能夠通過(guò)加入瀏覽器渲染引擎的樣式和布局過(guò)程來(lái)擴(kuò)展 CSS。Houdini 是一組 API，它們使開發(fā)人員可以直接訪問 CSS 對(duì)象模型 （CSSOM），使開發(fā)人員可以編寫瀏覽器可以解析為 CSS 的代碼，從而創(chuàng)建新的 CSS 功能，而無(wú)需等待它們?cè)跒g覽器中本地實(shí)現(xiàn)。

CSS Paint API 目前的版本是 CSS Painting API Level 1。它也被稱為 CSS Custom Paint 或者 Houdini's Paint Worklet。

我們可以把它理解為 JS In CSS，利用 JavaScript Canvas 畫布的強(qiáng)大能力，實(shí)現(xiàn)過(guò)往 CSS 無(wú)法實(shí)現(xiàn)的功能。

利用 CSS Painting API 實(shí)現(xiàn)波浪效果

CSS 實(shí)現(xiàn)波浪效果，一直是 CSS 的一個(gè)難點(diǎn)之一。

是的，大部分時(shí)候，我們都是利用一些奇技淫巧實(shí)現(xiàn)波浪效果，像是這樣：

如今，有了 CSS Painting API，我們已經(jīng)可以繪制真實(shí)的波浪效果了?？纯创a：

<div></div>

<script>
if (CSS.paintWorklet) {              
    CSS.paintWorklet.addModule('/CSSHoudini.js');
}
</script>

div {
    position: relative;
    width: 300px;
    height: 300px;
    background: paint(waveDraw);
    border-radius: 50%;
    border: 2px solid rgba(255, 0, 0, 0.5);
}

我們定義了一個(gè) waveDraw 方法，接下來(lái)，就通過(guò)利用 registerPaint 來(lái)實(shí)現(xiàn)這個(gè)方法即可。

// 文件名為 CSSHoudini.js
registerPaint(
    "waveDraw",
    class {
        static get inputProperties() {
            return [];
        }
        paint(ctx, size, properties) {
            const { width, height } = size;
            const initY = height * 0.5;
            ctx.beginPath();
            for (let i = 0; i <= width; i++) {
                ctx.lineTo(i, initY + Math.sin((i) / 20) * 10);
            }
            ctx.lineTo(width, height);
            ctx.lineTo(0, height);
            ctx.lineTo(0, initY);
            ctx.closePath();

            ctx.fillStyle = 'rgba(255, 0, 0, 0.9)';
            ctx.fill();
        }
    }
);

這樣，我們就得到了這樣一個(gè)波浪效果：

上面的代碼其實(shí)很好理解，簡(jiǎn)單解釋一下，我們核心就是利用路徑繪制，基于 Math.sin() 三角函數(shù)，繪制了一段 sin(x) 三角函數(shù)的圖形。

• 整個(gè)圖形從 ctx.beginPath() 開始，第一個(gè)點(diǎn)是 ctx.lineTo(0, initY + Math.sin((i) / 20) * 10)，不過(guò) Math.sin(0) = 0，所以等于 ctx.lineTo(0, initY)

• initY 在這的作用是控制從什么高度開始繪制波浪圖形，我們這里的取值是 initY = height * 0.5，也就是定義成了圖形的中間位置

• 利用 for (let i = 0; i <= width; i++) 循環(huán)，配合 ctx.lineTo(i, initY + Math.sin((i) / 20) * 10)，也就是在每一個(gè) x 軸上的點(diǎn)，都繪制一個(gè)點(diǎn)

• 隨后三個(gè)在循環(huán)體外的 ctx.lineTo 的作用是讓整個(gè)圖形形成一個(gè)閉環(huán)

• 最后 ctx.closePath() 完成整個(gè)路徑，ctx.fill() 進(jìn)行上色

如果不 ctx.fill() 上色，利用 ctx.stroke() 繪制邊框，也是可以的，其實(shí)我們得到是這樣一個(gè)圖形：

上圖是同時(shí)去掉了 CSS 代碼里面的 border-radius: 50%，方便大家理解。

當(dāng)然，上面的圖形，有個(gè)很大的問題，沒法動(dòng)起來(lái)，所以，我們需要借助一個(gè) CSS @Property 自定義變量，讓它擁有一些動(dòng)畫效果。

我們需要改造一下代碼，首先，添加一個(gè) CSS @Property 自定義變量：

@property --animation-tick {
  syntax: '<number>';
  inherits: false;
  initial-value: 1000;
}
div {
  // ... 代碼與上述保持一致
  animation: move 20s infinite linear;
  --animation-tick: 1000;
}
@keyframes move {
    100% {
        --animation-tick: 0;
    }
}

我們添加了一個(gè) --animation-tick 變量，并且利用 CSS 動(dòng)畫，讓它從 1000 減至 0。

下一步，利用這個(gè)不斷在變化的 CSS 自定義變量，我們?cè)?waveDraw 方法中，把它利用上：

// 文件名為 CSSHoudini.js
registerPaint(
    "waveDraw",
    class {
        static get inputProperties() {
            return ["--animation-tick"];
        }
        paint(ctx, size, properties) {
            let tick = Number(properties.get("--animation-tick"));
            const { width, height } = size;
            const initY = height * 0.5;
            ctx.beginPath();
            for (let i = 0; i <= width; i++) {
                ctx.lineTo(i, initY + Math.sin((i + tick) / 20) * 10);
            }
            ctx.lineTo(width, height);
            ctx.lineTo(0, height);
            ctx.lineTo(0, initY);
            ctx.closePath();

            ctx.fillStyle = 'rgba(255, 0, 0, 0.9)';
            ctx.fill();
        }
    }
);

仔細(xì)看，和上述的代碼變化不大，核心在于，利用三角函數(shù)繪制圖形的時(shí)候，我們把這個(gè)變量加入進(jìn)去。

從原來(lái)的 ctx.lineTo(i, initY + Math.sin((i) / 20) * 10)，變成了 ctx.lineTo(i, initY + Math.sin((i + tick) / 20) * 10)。

這樣，在這個(gè)不斷變化的變量的作用下，我們的波浪圖形就能運(yùn)動(dòng)起來(lái)了：

雖然能動(dòng)了，但是總是感覺還少了些什么。如果我們把這個(gè)波浪效果應(yīng)用與進(jìn)度條之類的效果上，我們可以需要可以快速定義波浪的振幅、每個(gè)波峰之間的間距、效果的顏色、百分比等等。

因此，我們需要再通過(guò)一個(gè) CSS 變量，讓它成為一個(gè)實(shí)際可用的封裝良好的波浪進(jìn)度條。我們?cè)俸?jiǎn)單改造一下：

@property --animation-tick {
  syntax: '<number>';
  inherits: false;
  initial-value: 1000;
}
@property --height {
  syntax: '<number>';
  inherits: false;
  initial-value: .7;
}
div {
    position: relative;
    width: 300px;
    height: 300px;
    background: paint(waveDraw);
    animation: move 20s infinite linear;
    border-radius: 50%;
    border: 2px solid var(--color1);
    --amplitude: 15;
    --gap: 28;
    --animation-tick: 700;
    --height: 0.7;
    --color1: rgba(255, 0, 0, 0.5);
    --color2: rgba(255, 0, 0, 0.4);
    --color3: rgba(255, 0, 0, 0.3);
    
    transition: --height 8s;
}

可以看到，我們定義了非常多個(gè) CSS 變量，每次，它們都是有意義的：

• --animation-tick 表示波浪運(yùn)動(dòng)的速率

• --amplitude 波浪的振幅

• --gap 波峰間距

• --initHeight 初始高度

• --color1、--color2、--color3 我們會(huì)疊加 3 層波浪效果，顯得更真實(shí)一點(diǎn)，這里 3 個(gè)顏色表示 3 層波浪的顏色

定義好這些 CSS 變量后，我們就可以把它們運(yùn)用在實(shí)際的waveDraw 方法中。看看代碼：

registerPaint(
    "waveDraw",
    class {
        static get inputProperties() {
            return [
                "--animation-tick", 
                "--height", 
                "--gap",
                "--amplitude",
                "--color1",
                "--color2",
                "--color3"
            ];
        }
        
        paint(ctx, size, properties) {
            let tick = Number(properties.get("--animation-tick"));
            let initHeight = Number(properties.get("--height"));
            let gap = Number(properties.get("--gap"));
            let amplitude = Number(properties.get("--amplitude"));
            let color1 = properties.get("--color1");
            let color2 = properties.get("--color2");
            let color3 = properties.get("--color3");
            
            this.drawWave(ctx, size, tick, amplitude, gap, initHeight, color1);
            this.drawWave(ctx, size, tick * 1.21, amplitude / 0.82, gap + 2, initHeight + 0.02, color2);
            this.drawWave(ctx, size, tick * 0.79, amplitude / 1.19, gap - 2, initHeight - 0.02, color3);
        }
        
        /**
         * ctx
         * size
         * tick 速率
         * amplitude 振幅
         * gap 波峰間距
         * initHeight 初始高度
         * color 顏色
         */
        drawWave(ctx, size, tick, amplitude, gap, initHeight, color) {
            const { width, height } = size;
            const initY = height * initHeight;
            tick = tick * 2;
            
            ctx.beginPath();
            for (let i = 0; i <= width; i++) {
                ctx.lineTo(i, initY + Math.sin((i + tick) / gap) * amplitude);
            }
            ctx.lineTo(width, height);
            ctx.lineTo(0, height);
            ctx.lineTo(0, initY);
            ctx.closePath();
            ctx.fillStyle = color;
            ctx.fill();
        }
    }
);

可以看到，我們?cè)?paint() 方法中，調(diào)用了 this.drawWave()。每次調(diào)用 this.drawWave() 都會(huì)生成一個(gè)波浪圖形，通過(guò) 3 層的疊加效果，生成 3 層波浪。并且，把我們?cè)?CSS 中定義的變量全部的應(yīng)用了起來(lái)，分別控制波浪效果的不同參數(shù)。

這樣，我們就得到了這樣一個(gè)波浪效果：

通過(guò)控制 CSS 中的 --height 變量，還可以實(shí)現(xiàn)高度的變化，從而完成真實(shí)的百分比，實(shí)現(xiàn)一種進(jìn)度條效果。

div:hover {
    --height: 0;
}

效果如下：

很好，非常不錯(cuò)的效果。有了上述一些 CSS 自定義變量的幫助，我們就可以通過(guò)封裝好的 waveDraw 方法，實(shí)現(xiàn)不同顏色，不同大小，不同速率的波浪進(jìn)度條效果了。

我們只需要簡(jiǎn)單的改變一下傳入的 CSS 變量參數(shù)即可：

<div></div>
<div></div>
<div></div>

div {
    position: relative;
    width: 300px;
    height: 300px;
    background: paint(waveDraw);
    animation: move 20s infinite linear;
    border-radius: 50%;
    border: 2px solid var(--color1);
    --amplitude: 15;
    --gap: 28;
    --animation-tick: 700;
    --height: 0.7;
    --color1: rgba(255, 0, 0, 0.5);
    --color2: rgba(255, 0, 0, 0.4);
    --color3: rgba(255, 0, 0, 0.3);
    
    transition: --height 8s;
}
div:nth-child(2) {
    --amplitude: 6;
    --gap: 25;
    --animation-tick: 300;
    --height: 0.5;
    --color1: rgba(28, 90, 199, 0.5);
    --color2: rgba(28, 90, 199, 0.4);
    --color3: rgba(28, 90, 199, 0.3);
}
div:nth-child(3) {
    --amplitude: 3;
    --gap: 30;
    --animation-tick: 1200;
    --height: 0.3;
    --color1: rgba(178, 120, 33, 0.5);
    --color2: rgba(178, 120, 33, 0.4);
    --color3: rgba(178, 120, 33, 0.3);
}

看看效果如何：

這樣，借助 CSS Painting API，我們完美的實(shí)現(xiàn)了波浪圖形，并且借助它，實(shí)現(xiàn)了波浪進(jìn)度條效果。通過(guò)傳入不同的 CSS 變量，我們有了快速批量生成不同效果的能力。彌補(bǔ)了過(guò)往 CSS 在波浪效果上的缺陷！

當(dāng)然，就基于上述的代碼，還是有一些可以優(yōu)化的空間的：

• 在上述的 CSS 代碼中，可以看到，我們是傳入了 3 個(gè)關(guān)于顏色的 CSS 變量，--color1、--color2、--color3，正常而言，這里傳入 1 個(gè)顏色即可，通過(guò)轉(zhuǎn)換成 HSL 顏色表示法，替換 L 色值，得到近似的另外兩個(gè)色值即可。當(dāng)然，這樣做的話會(huì)增添非常多的 JavaScript 代碼，所以，本文為了方便大家理解，偷懶直接傳入了 3 個(gè) CSS 顏色變量值；

• 整個(gè)波浪效果單輪的動(dòng)畫持續(xù)時(shí)間我設(shè)置為了 20s，但是在本文中，沒有去適配動(dòng)畫的手尾銜接，也就是可能會(huì)出現(xiàn)每 20s，波浪效果有一個(gè)明顯的跳動(dòng)的感覺。解決這個(gè)問題，有兩個(gè)思路

• 通過(guò)精確的計(jì)算，讓動(dòng)畫的最后一幀和動(dòng)畫的第一幀銜接上

• 把 --animation-tick 的值設(shè)置的非常的大，然后把相應(yīng)的單輪動(dòng)畫時(shí)間設(shè)置的非常長(zhǎng)，這樣，基本也感受不到動(dòng)畫的跳幀

• 第三個(gè)問題可能就在于兼容性了

兼容性？

好吧，其實(shí)上一篇文章也談到了兼容問題，因?yàn)榭赡苡泻芏嗫吹奖酒恼虏]有去翻看前兩篇文章的同學(xué)。那么，CSS Painting API 的兼容性到底如何呢？

CanIUse - registerPaint 數(shù)據(jù)如下（截止至 2022-11-23）：

Chrome 和 Edge 基于 Chromium 內(nèi)核的瀏覽器很早就已經(jīng)支持，而主流瀏覽器中，F(xiàn)irefox 和 Safari 目前還不支持。

CSS Houdini 雖然強(qiáng)大，目前看來(lái)要想大規(guī)模上生產(chǎn)環(huán)境，仍需一段時(shí)間的等待。

“如何利用CSS實(shí)現(xiàn)波浪進(jìn)度條效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！