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

uniapp圆形波浪进度效果

article 2024/10/30 9:54:54

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看下效果：
请添加图片描述
另外这个那个旋转的圆角矩形的弧度你还可以自己定义，这里分享一个网站专门生成边框弧度，你可以在这里生成你自己想要的弧度。