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.mzph.cn/web/57357.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

宠物空气净化器有用吗?有哪几款吸毛效果好且低噪的推荐

伴随着天气越来越凉&#xff0c;照常来说&#xff0c;猫咪掉毛的频率应该会变少&#xff0c;但是为什么我家的猫咪还在掉很多毛。 现在就连南方地区都要加外套了&#xff0c;但是猫咪掉毛太多&#xff0c;都不敢穿纯棉面料的衣服&#xff0c;还有本来想着顺应天气的变化&#…

深入理解C++ Lambda表达式:语法、用法与原理及其包装器的使用

深入理解C Lambda表达式&#xff1a;语法、用法与原理及其包装器的使用 lambda表达式C98中的一个例子lambda表达式语法lambda表达式各部分说明捕获列表说明 函数对象与lambda表达式 包装器function包装器 bind &#x1f30f;个人博客主页&#xff1a; 个人主页 本文深入介绍了…

2024最新Instagram养号攻略!海外社媒起号码住了

Instagram至今仍然是全球顶级的流量平合&#xff0c;不仅在国外是各大网红明星必备app&#xff0c;国内下载量也居高不下&#xff0c;但从2018年下半年开始加大了对新账号的监控和权限限制。新注册的账号会受到诸多限制&#xff0c;稍不慎就会进入安全模式或者被封&#xff0c;…

【vue】10.组件的生命周期-从Vue 2到Vue 3的演变

自Vue 2发布以来&#xff0c;它以其简单易用、灵活高效的特点赢得了众多开发者的喜爱。随着时间的推移&#xff0c;Vue 3在Vue 2的基础上进行了全面升级&#xff0c;其中包括对组件生命周期的调整。本文将首先回顾Vue 2的组件生命周期&#xff0c;然后重点介绍Vue 3组件生命周期…

STM32 HAL 点灯

首先从点灯开始 完整函数如下&#xff1a; #include "led.h" #include "sys.h"//包含了stm32f1xx.h&#xff08;包含各种寄存器定义、中断向量定义、常量定义等&#xff09;//初始化GPIO口 void led_init(void) {GPIO_InitTypeDef gpio_initstruct;//打开…

计算合约方法的签名

计算合约方法的签名 通过智能合约实现 // SPDX-License-Identifier: MIT pragma solidity ^0.8.26;contract FunctionSelector {/*"transfer(address,uint256)"0xa9059cbb"transferFrom(address,address,uint256)"0x23b872dd*/function getSelector(stri…

【Java】方法的使用 —— 语法要求、方法的重载和签名、方法递归

目录 1. 方法基础知识 1.1 方法的概念 1.2 语法格式 * 注意事项【与C不同】 1.3 return —— 返回值的严格检查【比C语言严格】 2. 形参与实参的关系 3. 方法重载 3.1 什么是方法重载&#xff1f;为什么要方法重载&#xff1f; 3.2 方法重载的规则 4. 方法签名 5. 递…

鸿蒙开发:arkts Refresh 组件

基本概念 在 ArkTS 5.0 中&#xff0c;Refresh组件是用于实现下拉刷新功能的重要元素。它为用户提供了一种直观的方式来获取最新的数据。当用户在界面上对Refresh组件所在的区域进行下拉操作时&#xff0c;如果满足一定的触发条件&#xff0c;就会触发刷新事件&#xff0c;从而…

ClickHouse 神助攻:纽约城市公共交通管理(MTA)数据应用挑战赛

本文字数&#xff1a;13198&#xff1b;估计阅读时间&#xff1a;33 分钟 作者&#xff1a;The PME Team 本文在公众号【ClickHouseInc】首发 我们一向对开放数据挑战充满热情&#xff0c;所以当发现 MTA&#xff08;城市交通管理局&#xff09;在其官网发起了这样的挑战时&…

HarmonyOS开发5.0 net 启动界面设置

第一步、创建我们界面 第二步&#xff0c; 在EntryAbility中配置启动页面&#xff0c;在entry/src/main/ets/entryability/EntryAbility.ets中配置启动页面 配置如下 至此大功告成

算法笔记day10

目录 1.牛牛冲钻五 2.最长无重复子数组_牛客题霸_牛客网 3.重排字符串 1.牛牛冲钻五 算法思路&#xff1a; 特别简单的模拟题&#xff0c;没什么说的。 #include <iostream> #include <vector> #include <string> using namespace std; int main() { …

ETF申购赎回指南:详解注意事项与低费率券商推荐!

​ETF 申购&赎回 ETF申购赎回是个啥业务&#xff1f; 01 ETF申购、赎回是一种交易委托方式&#xff0c;指投资者通过申购方式(买入方向)获得ETF份额&#xff0c;通过赎回的方式&#xff08;卖出方向&#xff09;换掉/卖出ETF份额。ETF申购&#xff0c;通常是通过一篮子成…

LinkedList和链表之刷题课(下)

1. 给定x根据x把链表分割,大的结点放在x后面,小的结点放在x前面 题目解析: 注意此时的pHead就是head(头节点的意思) 基本上就是给定一个链表,我们根据x的值来把这个链表分成俩部分,大的那部分放在x后面,小的那部分放在x前面,并且我们不能改变链表本来的顺序,比如下面的链表,我…

UI 组件的二次封装

UI 组件的二次封装是指&#xff0c;在基础 UI 库的组件上进行自定义封装&#xff0c;以实现更贴合业务需求的功能和样式。通过二次封装&#xff0c;可以增强组件的复用性、便捷性和一致性&#xff0c;简化业务代码&#xff0c;同时降低后续维护成本。 1. 二次封装的原理 二次…

ELK + Filebeat + Spring Boot:日志分析入门与实践(二)

目录 一、环境 1.1 ELKF环境 1.2 版本 1.3 流程 二、Filebeat安装 2.1 安装 2.2 新增配置采集日志 三、logstash 配置 3.1 配置输出日志到es 3.2 Grok 日志格式解析 3.2 启动 logstash ​3.3 启动项目查看索引 一、环境 1.1 ELKF环境 springboot项目&#xff1a;w…

二百七十、Kettle——ClickHouse中增量导入清洗数据错误表

一、目的 比如原始数据100条&#xff0c;清洗后&#xff0c;90条正确数据在DWD层清洗表&#xff0c;10条错误数据在DWD层清洗数据错误表&#xff0c;所以清洗数据错误表任务一定要放在清洗表任务之后。 更关键的是&#xff0c;Hive中原本的SQL语句&#xff0c;放在ClickHouse…

一篇文章入门梅尔频率倒谱系数

文章目录 梅尔频率倒谱系数MFCC预处理预加重分帧加窗 FFT&#xff08;Fourier-Transform&#xff09;功率谱滤波器组梅尔频率倒谱系数&#xff08;MFCC&#xff09;均值归一化总结 参考文献 梅尔频率倒谱系数MFCC 梅尔倒谱系数&#xff08;Mel-scale FrequencyCepstral Coeffi…

Qt的信号槽机制学习一

一、Qt理论知识简记 &#xff08;一&#xff09;信号与槽[1] 信号与槽是Qt编程的基础&#xff0c;其使得处理界面上各个组件的交互操作变得比较直观和简单&#xff0c;GUI&#xff08;Graphical User Interface&#xff09;程序设计的主要工作就是对界面上各组件的信号进行相应…

程序员的相亲囧途:三万相亲费,能否换回真爱?

在快节奏的都市生活中&#xff0c;相亲已成为不少单身男女寻找另一半的重要途径。然而&#xff0c;宁波的唐先生却在这条路上遭遇了不小的挫折。28岁的他&#xff0c;身高1米78&#xff0c;本应是相亲市场上的“香饽饽”&#xff0c;却在“我主良缘”交了三万块钱相亲费后&…

【Android】使用TextView实现按钮开关代替Switch开关

介绍 Android 本身自己带的有开关控件&#xff0c;但是很多时候我们是不愿意使用这种开关的&#xff0c;感觉使用起来比较麻烦&#xff0c;特别是遇到需要延迟操作的情况。 比如有一个需求是这样的&#xff1a;我们需要打开一个设置&#xff0c;但是这个设置是否打开需要经过…