乐趣区

关于前端:现代-CSS-高阶技巧完美的波浪进度条效果

jiezi

本文为稀土掘金技术社区首发签约文章，14 天内禁止转载，14 天后未获受权禁止转载，侵权必究！

我的新的专栏 — 古代 CSS 与 Web 动画解决方案。

将专一于实现简单布局，兼容设施差别，制作酷炫动画，制作简单交互，晋升可拜访性及构建奇思妙想成果等方面的内容。

在兼顾根底概述的同时，重视对技巧的开掘，结合实际进行使用，欢送大家关注。

注释从这里开始。

本文是 CSS Houdini 之 CSS Painting API 系列第三篇。

  • 古代 CSS 之高阶图片渐隐隐没术
  • 古代 CSS 高阶技巧，像 Canvas 一样自在绘图构建款式！

在上两篇中，咱们具体介绍了 CSS Painting API 是如何一步一步，实现自定义图案甚至实现动画成果的！

在这一篇中，咱们将持续摸索，尝试应用 CSS Painting API，去实现一些过往纯 CSS 无奈实现的成果。

CSS Painting API

再简略疾速的过一下，什么是 CSS Painting API。

CSS Painting API 是 CSS Houdini 的一部分。而 Houdini 是一组底层 API，它们公开了 CSS 引擎的各个局部，从而使开发人员可能通过退出浏览器渲染引擎的款式和布局过程来扩大 CSS。Houdini 是一组 API，它们使开发人员能够间接拜访 CSS 对象模型（CSSOM），使开发人员能够编写浏览器能够解析为 CSS 的代码，从而创立新的 CSS 性能，而无需期待它们在浏览器中本地实现。

CSS Paint API 目前的版本是 CSS Painting API Level 1。它也被称为 CSS Custom Paint 或者 Houdini’s Paint Worklet。

咱们能够把它了解为 JS In CSS，利用 JavaScript Canvas 画布的弱小能力，实现过往 CSS 无奈实现的性能。

利用 CSS Painting API 实现波浪成果

CSS 实现波浪成果，始终是 CSS 的一个难点之一。在过往，尽管咱们有很多形式利用 Hack 出一些波浪成果，我在之前的多篇文章中有重复提及过：

  • 纯 CSS 实现波浪成果!
  • 一种奇妙的应用 CSS 制作波浪成果的思路
  • 圆角大杀器，应用滤镜构建圆角及波浪成果！

是的，大部分时候，咱们都是利用一些奇技淫巧实现波浪成果，像是这样：

现在，有了 CSS Painting API，咱们曾经能够绘制实在的波浪成果了。看看代码：

<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);
}

咱们定义了一个 waveDraw 办法，接下来，就通过利用 registerPaint 来实现这个办法即可。

// 文件名为 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();}
    }
);

这样，咱们就失去了这样一个波浪成果：

<img width=”327″ alt=”image” src=”https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bfb49f5673eb465491807639747e73f9~tplv-k3u1fbpfcp-zoom-1.image”>

下面的代码其实很好了解，简略解释一下，咱们外围就是利用门路绘制，基于 Math.sin() 三角函数，绘制了一段 sin(x) 三角函数的图形。

  1. 整个图形从 ctx.beginPath() 开始，第一个点是 ctx.lineTo(0, initY + Math.sin((i) / 20) * 10)，不过 Math.sin(0) = 0，所以等于 ctx.lineTo(0, initY)
  2. initY 在这的作用是管制从什么高度开始绘制波浪图形，咱们这里的取值是 initY = height * 0.5，也就是定义成了图形的两头地位
  3. 利用 for (let i = 0; i <= width; i++) 循环，配合 ctx.lineTo(i, initY + Math.sin((i) / 20) * 10)，也就是在每一个 x 轴上的点，都绘制一个点
  4. 随后三个在循环体外的 ctx.lineTo 的作用是让整个图形造成一个闭环
  5. 最初 ctx.closePath() 实现整个门路，ctx.fill() 进行上色

如果不 ctx.fill() 上色，利用 ctx.stroke() 绘制边框，也是能够的，其实咱们失去是这样一个图形：

<img width=”321″ alt=”image” src=”https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8a24838650e43d5a44f039c18f8bb6b~tplv-k3u1fbpfcp-zoom-1.image”>

上图是同时去掉了 CSS 代码外面的 border-radius: 50%，不便大家了解。

当然，下面的图形，有个很大的问题，没法动起来，所以，咱们须要借助一个 CSS @Property 自定义变量，让它领有一些动画成果。

咱们须要革新一下代码，首先，增加一个 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;}
}

咱们增加了一个 --animation-tick 变量，并且利用 CSS 动画，让它从 1000 减至 0。

下一步，利用这个一直在变动的 CSS 自定义变量，咱们在 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();}
    }
);

认真看，和上述的代码变动不大，外围在于，利用三角函数绘制图形的时候，咱们把这个变量退出进去。

从原来的 ctx.lineTo(i, initY + Math.sin((i) / 20) * 10)，变成了 ctx.lineTo(i, initY + Math.sin((i + tick) / 20) * 10)。

这样，在这个一直变动的变量的作用下，咱们的波浪图形就能静止起来了：

CodePen Demo — CSS Houdini Wave

尽管能动了，然而总是感觉还少了些什么。如果咱们把这个波浪成果利用与进度条之类的成果上，咱们能够须要能够疾速定义波浪的振幅、每个波峰之间的间距、成果的色彩、百分比等等。

因而，咱们须要再通过一个 CSS 变量，让它成为一个理论可用的封装良好的波浪进度条。咱们再简略革新一下：

@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;
}

能够看到，咱们定义了十分多个 CSS 变量，每次，它们都是有意义的：

  • --animation-tick 示意波浪静止的速率
  • --amplitude 波浪的振幅
  • --gap 波峰间距
  • --initHeight 初始高度
  • --color1、--color2、--color3 咱们会叠加 3 层波浪成果，显得更实在一点，这里 3 个色彩示意 3 层波浪的色彩

定义好这些 CSS 变量后，咱们就能够把它们使用在理论的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();}
    }
);

能够看到，咱们在 paint() 办法中，调用了 this.drawWave()。每次调用 this.drawWave() 都会生成一个波浪图形，通过 3 层的叠加成果，生成 3 层波浪。并且，把咱们在 CSS 中定义的变量全副的利用了起来，别离管制波浪成果的不同参数。

这样，咱们就失去了这样一个波浪成果：

通过管制 CSS 中的 --height 变量，还能够实现高度的变动，从而实现实在的百分比，实现一种进度条成果。

div:hover {--height: 0;}

成果如下：

很好，十分不错的成果。有了上述一些 CSS 自定义变量的帮忙，咱们就能够通过封装好的 waveDraw 办法，实现不同色彩，不同大小，不同速率的波浪进度条成果了。

咱们只须要简略的扭转一下传入的 CSS 变量参数即可：

<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);
}

看看成果如何：

CodePen Demo — CSS Hudini Custom Wave Effects !

这样，借助 CSS Painting API，咱们完满的实现了波浪图形，并且借助它，实现了波浪进度条成果。通过传入不同的 CSS 变量，咱们有了疾速批量生成不同成果的能力。补救了过往 CSS 在波浪成果上的缺点！

当然，就基于上述的代码，还是有一些能够优化的空间的：

  1. 在上述的 CSS 代码中，能够看到，咱们是传入了 3 个对于色彩的 CSS 变量，--color1、--color2、--color3，失常而言，这里传入 1 个色彩即可，通过转换成 HSL 色彩表示法，替换 L 色值，失去近似的另外两个色值即可。当然，这样做的话会削减十分多的 JavaScript 代码，所以，本文为了不便大家了解，偷懒间接传入了 3 个 CSS 色彩变量值；

  2. 整个波浪成果单轮的动画持续时间我设置为了 20s，然而在本文中，没有去适配动画的手尾连接，也就是可能会呈现每 20s，波浪成果有一个显著的跳动的感觉。解决这个问题，有两个思路

    • 通过准确的计算，让动画的最初一帧和动画的第一帧连接上
    • 把 --animation-tick 的值设置的十分的大，而后把相应的单轮动画工夫设置的十分长，这样，根本也感触不到动画的跳帧
  3. 第三个问题可能就在于 兼容性 了

兼容性？

好吧，其实上一篇文章也谈到了兼容问题，因为可能有很多看到本篇文章并没有去翻看前两篇文章的同学。那么，CSS Painting API 的兼容性到底如何呢？

CanIUse – registerPaint 数据如下（截止至 2022-11-23）：

Chrome 和 Edge 基于 Chromium 内核的浏览器很早就曾经反对，而支流浏览器中，Firefox 和 Safari 目前还不反对。

CSS Houdini 尽管弱小，目前看来要想大规模上生产环境，仍需一段时间的期待。让咱们给工夫一点工夫！

最初

好了，本文到此结束，心愿本文对你有所帮忙 :)

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版