前端实现 海浪(波浪)进度条效果(支持自定义长度；调节速度,2s缓冲结束)

实现海浪进度条

文章目录

效果图如下(投入使用的版本)

背景和过程

提示：这个功能的开发过程真的是一波三折

1. 自信阶段: 此时我觉得这个动画,实现就还挺简单的,就估1-2天
2. 准备CV阶段: 开始在网上找有没有相同的例子网上给我的答案是:没有这种例子
3. 方案确定阶段: ①.使用css样式画出来 ; ②. 使用动态的图片(大多数解决是这种方案,但是图片的长度变更会有问题) ; ③: 使用canvas绘制(如果不是经常使用的话,上手绘制学习成本高) ; ④. 自己通过div盒子自己绘制(哈哈哈,这种我直接否定了,感觉跟动态图片的实现方式一样有点cun)
4. 迷茫阶段: 测试了大量例子,发现好像并不是很简单!! oh , my God !!!!!!!!
5. 摸索阶段: 测试大量的进度条案例
6. 成功阶段: 经过哥们,断断续续的调试,终于是得到了两个还原度100%的版本

一、调试和探索过程(下面都会给出来对应代码)

1. 类似Element-plus动态进度条的实现效果

1. 常规电涌效果的进度条

1. 常见类似波浪的进度条

最终模拟波浪效果的进度条

可以封装的进度条

二、类似Element-plus的进度条样式

1. CSS的样式如下

<style>/* styles.css */

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height:100vh;
            background-color: #f0f0f0;
            margin:0;}.progress-bar-container {
            width:80%;
            max-width:600px;}.progress-bar {
            background-color: #bcbdc0;
            border-radius:10px;
            overflow: hidden;
            position: relative;
            height:30px;}.progress-bar-striped {
            height:100%;
            background: linear-gradient(45deg,rgba(247,59,59,0.15)25%,
                    transparent 25%,
                    transparent 50%,rgba(157,15,15,0.15)50%,rgba(71,7,7,0.15)75%,
                    transparent 75%,
                    transparent);
            background-size:1rem 1rem;
            position: relative;
            animation: progress-bar-stripes 1s linear infinite;}.icon{
            position: absolute;
            height:100%;
            line-height:200%;
            right:0px;
            border-radius:100%;
            background-color: aquamarine;}

        @keyframes progress-bar-stripes {from{
                background-position:3rem 0;}

            to {
                background-position:00;}}</style>

2. HTML结构如下

<div class="progress-bar-container"><div class="progress-bar"><div class="progress-bar-striped" style="width: 70%;"><div class="icon">1</div></div></div></div>

二、电涌效果的进度条如下

1. CSS的样式如下

<style>/* styles.css */

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height:100vh;
            background-color: #f0f0f0;
            margin:0;}.progress-bar {
            position: relative;
            background-color: #e0e0e0;
            border-radius:10px;
            overflow: hidden;
            height:30px;
            min-width:200px;/* Minimum width */
            width: auto;/* Automatically adjust width */}.progress-bar-inner {
            height:100%;
            background-size:1rem 1rem;
            animation: progress-bar-stripes 1s linear infinite;}

        @keyframes progress-bar-stripes {from{
                background-position:00;}

            to {
                background-position:200px 0;}}.progress-icon {
            position: absolute;
            top:50%;
            left:-10px;
            transform:translate(0,-50%);
            font-size:20px;
            display: flex;
            align-items: center;}</style>

2. HTML的结构如下:

<div id="progress-bar-container"></div>

3. JavaScript代码如下

// script.jsfunctioncreateProgressBar(containerId, percentage, options ={}){const container = document.getElementById(containerId);const defaultOptions ={
            gradientColors:['#6a11cb','#2575fc'],
            icon:'🔥',};const settings ={...defaultOptions,...options };const progressBar = document.createElement('div');
        progressBar.className ='progress-bar';const progressBarInner = document.createElement('div');
        progressBarInner.className ='progress-bar-inner';
        progressBarInner.style.width =`${percentage}%`;
        progressBarInner.style.background =`linear-gradient(to right, ${settings.gradientColors.join(', ')})`;const progressIcon = document.createElement('div');
        progressIcon.className ='progress-icon';
        progressIcon.innerHTML = settings.icon;
        progressIcon.style.left =`${percentage}%`;

        progressBar.appendChild(progressBarInner);
        progressBar.appendChild(progressIcon);

        container.innerHTML ='';
        container.appendChild(progressBar);}createProgressBar('progress-bar-container',95);

三、波浪效果的进度条

1. CSS的结构如下:

<style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height:100vh;
            margin:0;
            background: #f0f0f0;}.progress-container {
            width:80%;
            height:50px;
            background: #e0e0e0;
            border-radius:25px;
            overflow: hidden;
            position: relative;}.progress-bar {
            width:100%;
            height:100%;
            position: relative;
            overflow: hidden;}.wave {
            position: absolute;
            top:0;
            left:0;
            width:200%;
            height:100%;
            background: linear-gradient(90deg, #0099ff, #00ccff);
            animation: wave 4s infinite linear;
            clip-path:url(#waveClipPath);}

        @keyframes wave {0%{
                transform:translateX(0);}100%{
                transform:translateX(-50%);}}</style>

2. HTML的结构如下:

<div class="progress-container"><div class="progress-bar"><div class="wave"></div></div></div><svg width="0" height="0"><defs><clipPath id="waveClipPath" clipPathUnits="objectBoundingBox"><path d="M0,0.5 C0.2,0.8 0.4,0.2 0.6,0.5 C0.8,0.8 1,0.2 1,0.5 L1,1 L0,1 Z"></path></clipPath></defs></svg>

四、海浪效果的进度条(等我空闲就上传代码!!! )

代码在这里。

哈哈哈哈失踪人口回来了。后面会持续更新博客！！！！！

👉下载不需要积分

JavaScript代码如下

<script>const hy = document.querySelector('.hy');const wave = document.querySelector('.wave');const speedControl = document.getElementById('speed');const speedBtn = document.getElementById('speedBtn');const animationDuration =150000;// 初始动画持续时间，单位毫秒const waveDuration =3000;// 初始波浪动画持续时间，单位毫秒// 函数用于更新船的移动速度functionupdateAnimationSpeed(speedFactor){const newDuration = animationDuration / speedFactor;// 根据速度因子计算新的船动画持续时间const newWaveDuration = waveDuration / speedFactor;// 根据速度因子计算新的波浪动画持续时间
            hy.style.animationDuration =`${newDuration}ms`;// 更新船的动画持续时间
            wave.style.animationDuration =`${newWaveDuration}ms`;// 更新波浪的动画持续时间}// 添加滑动条事件监听器，用于实时更新速度因子
        speedControl.addEventListener('input',(event)=>{const speedFactor =parseInt(event.target.value,10);updateAnimationSpeed(speedFactor);// 更新动画速度});// 按钮事件，用于测试立即更新速度
        speedBtn.addEventListener("click",function(){const duration =2000;// 动画持续时间const currentLeft = hy.getBoundingClientRect().left;// 获取当前船的位置// const boxWidth = document.querySelector('.box').clientWidth; // 获取容器的宽度// const distanceToEnd = boxWidth - currentLeft; // 计算到达终点的距离// const speedFactor = distanceToEnd / boxWidth; // 根据距离计算速度因子

            hy.style.animation =`none`;// 先停止当前动画
            hy.style.left =`${currentLeft}px`;// 设置当前的位置setTimeout(()=>{
                hy.style.transition =`left ${duration}ms ease-out`;// 设置新的动画过渡效果
                hy.style.left ='100%';// 更新到终点位置},50);// 短暂延迟以确保动画效果被应用});// updateAnimationSpeed(speedControl.value); // 初始化动画速度</script>

总结（抽空会更新npm包版本）

今天抽了10分钟的空闲，把代码整进来了，已经有段时间没更新博客了。 感觉最近脑子好像有点不够用。

Tips：在写Taro创建的小程序项目，第一次接手得花点时间去研究。哈哈哈哈哈再接再厉吧👏 👏 。后续有时间也会给大家更新React和Taro的使用注意事项