当前位置: 首页 > article >正文

uniapp圆形波浪进度效果

uniapp圆形波浪进度效果

  • 背景
  • 实现思路
  • 代码实现
  • 尾巴

背景

最近项目中有些统计的地方需要用到圆形的波浪进度效果,要求是根据百分比值然后在一个圆形内动态的展示一个波浪形的进度,看参考一下效果。
请添加图片描述

实现思路

这个效果看着挺复杂的,那么我们应该怎么去实现了?特别是中间这个水波纹的荡漾效果?我接下来再放一张效果图出来,你肯定就能明白了,请下如下效果图:
请添加图片描述
是不是看完上面这个图恍然大悟了,哈哈原来这么简单。
1、先画一个带边框的圆形。
2、在这个圆形上面盖一个圆角矩形。
3、给这个圆角矩形加一个旋转动画。
4、通过进度值转换成圆角矩形的top来实现不同进度的水波纹。

代码实现

以上思路有了,接下来就是代码实现了

<!-- 模板代码 -->
<template>
	<view class="content">
		<view class="progress-box">
			<!-- 波浪效果元素 设置了一个css变量 然后再css中计算top值会用到 -->
			<view class="progress"
				:style="{'--progress': `${progress}%`}"></view>
			<!-- 进度数字 -->
			<view class="progress-value-p">
				<view class="value">{{progress}}%</view>
			</view>
		</view>
	</view>
</template>

data中就一个progress属性值为30这里就不贴代码了。

/* css代码 */
<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/* 定一个旋转动画 用于实现波浪效果 */
	 @keyframes progressRotate {
	    0% {
			transform: rotate(0deg);
	    }
	    100% {
	        transform: rotate(360deg);
	    }
	}
	.progress-box {
		position: relative;
		width: 144rpx;
		height: 144rpx;
		border: 5rpx solid #7FD6FC;
		border-radius: 50%;
		background: #fff;
		/* 最关键的属性 */
		overflow: hidden;
		/* 这里是为了防止再ios设备上overflow不生效问题*/
		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
		-webkit-mask-image: -webkit-radial-gradient(white, black);
		/* 设置进度条样式 */
		.progress {
			position: absolute;
			/* 波浪占据外层圆形区域的百分比 由 --progress控制 */
			top: calc(100% - var(--progress));
			left: -72rpx;
			z-index: 9;
			width: 288rpx;
			height: 288rpx;
			border-radius: 36%;
			background: linear-gradient(#7FD6FC, #0299fe);
			/* 添加旋转动画效果 */
			animation: progressRotate 8.5s linear infinite;
			/* 由于上面使用了transform 且动画中也使用了transform 设置该属性使其叠加生效 */
			animation-composition: add;
		}
		/* 设置进度数字样式 */
		.progress-value-p {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		    position: absolute;
		    z-index: 10;
			width: 100%;
			height: 100%;
			.value {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 26rpx;
				font-weight: bold;
				color: black;
				line-height: 23rpx;
				text-align: left;
				margin-bottom: 30rpx;
				font-style: normal;
				text-transform: none;
			}
		}
	}
</style>

以上基本就是全部代码实现了,代码中基本都做了注释,一看就能明白,然后你就可以通过修改data中的progress来实现不同百分比值的波浪效果了。我们将progress改成64.67看下效果:
请添加图片描述
另外这个那个旋转的圆角矩形的弧度你还可以自己定义,这里分享一个网站专门生成边框弧度,你可以在这里生成你自己想要的弧度。

尾巴

今天实现的功能比较简单,关键地方也做好了注释,有问题可以给我留言。如果喜欢我的文章,欢迎给我点赞,评论,关注,谢谢大家!


http://www.kler.cn/a/371394.html

相关文章:

  • Debug日程工作经验总结日程常用
  • 池化层笔记
  • HCIP--2 TCP有关笔记
  • iQOO手机怎样将屏幕投射到MacBook?可以同步音频吗?
  • 面试经典 150 题.P27. 移除元素(002)
  • Soanrquber集成Gitlab 之 导入Gitlab项目
  • 2024护理类科技核心期刊汇总(最新版)
  • 基于uniapp微信小程序的宠物救助宠物领养系统
  • 【动植物毒性数据集】毒蛇识别 蘑菇毒性分类 人工智能 深度学习 目标检测 Python(含数据集)
  • 【算法篇】图论类(1)(笔记)
  • 【C#】编写计算机选课程序
  • 跨越地域限制:在线原型设计软件的自由与便捷
  • 标准正态分布的数据 tensorflow 实现正态分布图,python 编程,数据分析和人工智能...
  • 华为手机卸载系统应用的方法
  • Mac下载 安装MIMIC-IV 3.0数据集
  • 10个你应该立即卸载的VS Code扩展
  • 《机器学习by周志华》学习笔记-神经网络-03多层网络学习算法之误差逆传播算法
  • 排序算法中——冒泡排序和快速排序
  • 【vue】12.全局组件与局部组件的深入解析
  • 5G网络中RLC层及其切割简介
  • 【Redis】常见基本全局命令
  • GIT分布式版本控制系统基础操作
  • Ubuntu下搭建自己的Docker镜像仓库
  • Xcode 16.1 (16B40) 发布下载 - Apple 平台 IDE
  • Oracle创建存储过程,创建定时任务
  • 太速科技-430-基于RFSOC的8路5G ADC和8路10G的DAC PCIe卡