现代 CSS 高阶技巧，完美的波浪进度条效果。

news2025/1/16 14:42:26

将专注于实现复杂布局，兼容设备差异，制作酷炫动画，制作复杂交互，提升可访问性及构建奇思妙想效果等方面的内容。

在兼顾基础概述的同时，注重对技巧的挖掘，结合实际进行运用，欢迎大家关注。

正文从这里开始。

在上两篇中，我们详细介绍了 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 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();
        }
    }
);
复制代码

这样，我们就得到了这样一个波浪效果：

上面的代码其实很好理解，简单解释一下，我们核心就是利用路径绘制，基于 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() 绘制边框，也是可以的，其实我们得到是这样一个图形：

上图是同时去掉了 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);
}
复制代码

看看效果如何：

这样，借助 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 虽然强大，目前看来要想大规模上生产环境，仍需一段时间的等待。让我们给时间一点时间！

最后

好了，本文到此结束，希望本文对你有所帮助 :)

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/44843.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

金属非金属如何去毛刺 机器人浮动去毛刺

金属非金属如何去毛刺 机器人浮动去毛刺

毛刺的产生 在金属非金属零件的加工中&#xff0c;由于切削加工过程中塑性变形引起的毛边&#xff0c;或者是铸造、模锻等加工的飞边&#xff0c;或是焊接挤出的残料&#xff0c;这些与所要求的形状、尺寸有所出入&#xff0c;在被加工零件上派生出的多余部分即为毛刺&#xf…
阅读更多...
音视频开发之 ALSA实战！

音视频开发之 ALSA实战！

前言&#xff1a; 今天我们来分享一个开源的音频采集代码&#xff0c;现在大部分音频采集都是通过ALSA框架去采集&#xff0c;如果大家把ALSA采集代码学懂&#xff0c;那么大部分的音频采集都可以搞定。这个代码是用ALSA进行音频PCM的采集并保存到本地文件。一、alsa框架的介绍…
阅读更多...
C#语言实例源码系列-实现输入框焦点变色和窗体拖拽改变大小

C#语言实例源码系列-实现输入框焦点变色和窗体拖拽改变大小

专栏分享点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册 &#x1f449;关于作者 众所周知&#xff0c;人生是一个漫长的流程&#xff0c;不断克服困难&#xff0c;不断反思前进的过程。在这个过程中…
阅读更多...
002.组合总和|||——回溯算法

002.组合总和|||——回溯算法

1.题目链接&#xff1a; 216. 组合总和 III 2.解题思路&#xff1a; 2.1.题目要求&#xff1a; 给一个元素数量k和一个元素和n&#xff0c;要求从范围[1,2,3,4,5,6,7,8,9]中返回所有元素数量为k和元素和为n的组合。&#xff08;每个数字只能使用一次&#xff09; 比如输入k…
阅读更多...
深度学习快速入门----Pytorch 系列2

深度学习快速入门----Pytorch 系列2

注&#xff1a;参考B站‘小土堆’视频教程 视频链接&#xff1a;【PyTorch深度学习快速入门教程&#xff08;绝对通俗易懂&#xff01;&#xff09;【小土堆】 上一篇&#xff1a;深度学习快速入门----Pytorch 1 文章目录八、神经网络--非线性激活九、神经网络--线性层及其他层…
阅读更多...
作为IT行业过来人，我有3个重要建议给后辈程序员！

作为IT行业过来人，我有3个重要建议给后辈程序员！

见字如面&#xff0c;我是军哥&#xff01;作为一名 40 岁的 IT 老兵&#xff0c;我在年轻时踩了不少坑&#xff0c;我总结了其中最重要的 3 个并一次性分享给你&#xff0c;文章不长&#xff0c;你一定要看完哈&#xff5e;1、重视基础还不够&#xff0c;还要注重技术广度和深…
阅读更多...
第2-4-8章 规则引擎Drools实战(1)-个人所得税计算器

第2-4-8章 规则引擎Drools实战(1)-个人所得税计算器

文章目录9. Drools实战9.1 个人所得税计算器9.1.1 名词解释9.1.2 计算规则9.1.2.1 新税制主要有哪些变化&#xff1f;9.1.2.2 资较高人员本次个税较少&#xff0c;可能到年底扣税增加&#xff1f;9.1.2.3 关于年度汇算清缴9.1.2.4 个人所得税预扣率表&#xff08;居民个人工资、…
阅读更多...
科教导刊杂志科教导刊杂志社科教导刊编辑部2022年第27期目录

科教导刊杂志科教导刊杂志社科教导刊编辑部2022年第27期目录

前沿视角《科教导刊》投稿&#xff1a;cn7kantougao163.com 新时代研究生教育质量评价指标体系的框架构建 李军伟;赵永克;杨丹; 1-3 基于现代学徒制的“多主体、双标准、五维度”人才培养质量评价体系构建 汪帆;刘严; 4-6 高教论坛 新工科背景下地方性院校第二课堂…
阅读更多...
【云原生】Docker容器服务更新与发现之consul

【云原生】Docker容器服务更新与发现之consul

内容预知 1.consul的相关知识 1.1 什么是注册与发现 1.2 什么是consul 1.3 zookeeper和consul的区别 2. consul 部署 2.1 部署consul服务器 2.2 registrator服务器 3.consul-template 的引入 3.1 consul-template的作用 3.2 consul-template的具体部署运用 &…
阅读更多...
微信开发者工具C盘占用大的问题

微信开发者工具C盘占用大的问题

将User Data 下的文件迁移到其他盘&#xff0c;比如 D盘&#xff0c;E盘&#xff0c;F盘 步骤如下&#xff1a; 1.找到微信开发者工具C盘所在的缓存目录&#xff0c;一般为 C:\Users\ 你的用户名\AppData\Local\微信开发者工具\User Data 将里面的内容全部剪切到其它盘符&…
阅读更多...
从鹅厂实例出发！分析Go Channel底层原理

从鹅厂实例出发！分析Go Channel底层原理

本文是基于Go1.18.1源码的学习笔记。Channel的底层源码从Go1.14到现在的Go1.19之间几乎没有变化&#xff0c;这也是Go最早引入的组件之一&#xff0c;体现了Go并发思想&#xff1a;Do not communicate by sharing memory; instead, share memory by communicating.不要通过共享…
阅读更多...
Playwright 简明入门教程：录制自动化测试用例，结合 Docker 使用

Playwright 简明入门教程：录制自动化测试用例，结合 Docker 使用

本篇文章聊聊如何使用 Playwright 进行测试用例的录制生成&#xff0c;以及如何在Docker 容器运行测试用例&#xff0c;或许是网上最简单的入门教程。 写在前面 Playwright 是微软出品的 Web 自动化测试工具和框架&#xff0c;和 Google Puppeteer 有着千丝万缕的关系。前一阵…
阅读更多...
[附源码]计算机毕业设计springboot儿童早教课程管理系统论文2022

[附源码]计算机毕业设计springboot儿童早教课程管理系统论文2022

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
如何治理 Electron 版本淘宝直播应用崩溃？

如何治理 Electron 版本淘宝直播应用崩溃？

经过几个月的努力&#xff0c;基于Electron框架开发的新版淘宝直播推流软件终于上线了。随之而来的就是线上用户反馈的各种问题&#xff0c;其中最影响用户体验的当属应用崩溃问题了。当应用程序出现未 catch 的异常时就会发生崩溃&#xff0c;本文介绍了客户端应用崩溃的处理流…
阅读更多...
javaSE - Arrays - 数组的定义与使用

javaSE - Arrays - 数组的定义与使用

一、数组基本用法 1.1、什么是数组 数组本质上就是让我们能 “批量” 创建相同类型的变量 也可以说是存储一组相同数据类型的数据的集合 如: 如果需要表示两个数据, 那么直接创建两个变量即可 int a; int b 如果需要表示五个数据, 那么可以创建五个变量 int a1; int a2; int …
阅读更多...
uni-app入门:自定义组件实现父子组件参数传递

uni-app入门:自定义组件实现父子组件参数传递

1.属性绑定:父组件传递参数到子组件 2.事件绑定:子组件传递参数到父组件 3.获取组件对象实例:父组件获取子组件实例对象进行参数传递 1.属性绑定:父组件传递参数到子组件首先交代一下基本的项目信息:主页面为index.wxml,创建test子组件,文件目录:component/test/test…
阅读更多...
惠柏新材创业板IPO过会：上半年营收9.3亿 拟募资3.4亿

惠柏新材创业板IPO过会：上半年营收9.3亿 拟募资3.4亿

雷递网 雷建平 11月28日惠柏新材料科技&#xff08;上海&#xff09;股份有限公司&#xff08;简称&#xff1a;“惠柏新材”&#xff09;日前IPO过会&#xff0c;准备在深交所创业板上市。惠柏新材计划募资3.42亿元&#xff0c;其中&#xff0c;1.8亿元用于上海帝福3.7万吨纤维…
阅读更多...
xss-labs/level9

xss-labs/level9

这一关界面感觉跟上一关很像 所以我们注入上一关的为编码的答案 javascript:alert(xss) 没能弹窗 查看源代码 他说我输入的链接不合法 我压根没有输入链接 我觉得后台应该是做了一个条件的判断 应该是要有链接才会在第二处输出点回显我们的输入 根据上面的猜测 我们构造如下…
阅读更多...
网络的根基

网络的根基

hi 大家好&#xff0c;上个周末带小伙伴&#xff0c;一起复习了一遍网络协议&#xff0c;对网络协议的核心知识进行梳理&#xff0c;希望大家早日掌握这些核心知识&#xff0c;打造自己坚实的基础&#xff0c;为自己目标慢慢积累&#xff0c;等到自己春天的到来。详细点击查看…
阅读更多...
设计模式学习笔记

设计模式学习笔记

文章目录23种设计模式学习笔记1.创建型模式1 单例模式2 工厂模式3 抽象工厂模式4 建造者模式5 原型模式2.结构型模式6 代理模式7 适配器模式8 桥接模式9 装饰模式10 外观模式11 组合模式12 享元模式3.行为型模式13 策略模式14 观察者模式15 责任链模式16 模板模式17 状态模式18…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023