首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

Qml 实现水波进度动画条

编程知识
2024年09月13日 19:02

【写在前面】

最近看到一个非常有趣的动画效果:水波进度动画。

学习了一下实现思路,觉得很有意思。

不过原版是 HTML + CSS,我这里用的是 Qml,有一些小技巧,分享给大家~


【正文开始】

老样子,先来看看效果图:

image

最基础的无非就是四个部分:

1、圆形水缸

2、水波

3、百分比数字

4、进度条

水波效果最重点的就是水波,其实这个水波就是个障眼法罢了,画张图你们就明白了。

它就是一个圆角正方形,一直在旋转和上升下降,让用户有一种水波的视觉感~

image

当然,我们还需要将多余的部分裁剪掉,因此这里需要借助 OpacityMask

image

OpacityMask 原理是将 Source 对应 MaskSource 中的透明部分掩盖掉。

但我们不能直接透出 Source 部分 ( 蓝色圆角矩形 ),需要将它先下移,然后裁剪得到:

image

接着,使用一个圆形作为 MaskSource 即可裁剪出下面的形状:

image

最后,让蓝色圆角矩形无限旋转即可:

    Item {
        id: wave
        clip: true
        anchors.fill: parent
        visible: false

        Rectangle {
            y: mask.height * 1.1 * (1 - root.value)
            width: root.radius * 4
            height: root.radius * 4
            anchors.horizontalCenter: parent.horizontalCenter
            radius: root.radius * 1.5
            color: root.waveColor
            rotation: 45

            NumberAnimation on rotation {
                from: 0
                to: 360
                running: root.value < 1.0
                duration: root.waveSpeed * 1000
                loops: NumberAnimation.Infinite
            }
        }
    }

至于进度条和文字就非常简单,直接看源码即可。


【结语】

最后:项目链接(多多star呀..⭐_⭐):

Github 地址:https://github.com/mengps/QmlControls/tree/master/WaveProgress

From:https://www.cnblogs.com/mengps/p/18412795
本文地址: http://www.shuzixingkong.net/article/1992
0评论
提交 加载更多评论
其他文章 数据结构之美-深入理解树形结构
树形结构是一种广泛应用的非线性数据结构,它在计算机科学和日常生活中都有广泛的应用。比如文件系统,邮件系统,编译器语法树,决策树,网络通信,甚至机器学习当中,都有树形数据结构的影子。本文旨在梳理日常用到的各类树形结构以及其优点和劣势,让渎者对树形结构有一个深入的认知和了解。
数据结构之美-深入理解树形结构 数据结构之美-深入理解树形结构 数据结构之美-深入理解树形结构
chainLink vrf实验
title: chainLink vrf实验 author: ivhu date: 2024-09-13 14:00:42 categories: - 区块链 - 二层 tags: - solidity - ch - vrf description: 博客园我这个主题对sol的高亮不太行,可以去我g
chainLink vrf实验 chainLink vrf实验 chainLink vrf实验
Go runtime 调度器精讲(四):运行 main goroutine
原创文章,欢迎转载,转载请注明出处,谢谢。 0. 前言 皇天不负有心人,终于我们到了运行 main goroutine 环节了。让我们走起来,看看一个 goroutine 到底是怎么运行的。 1. 运行 goroutine 稍微回顾下前面的内容,第一讲 Go 程序初始化,介绍了 Go 程序是怎么进入
Go runtime 调度器精讲(四):运行 main goroutine
使用 `Roslyn` 分析器和修复器 对异步方法规范化返回Async结尾
之前写过一篇使用修复器帮助添加头部注释文本的功能,今天使用Roslyn的代码修复器对异步返回方法规范化的功能 实现分析器 首先需要实现分析器,使用RegisterSyntaxNodeAction,分析所有SyntaxKind.MethodDeclaration的语法类型, [DiagnosticAn
使用 `Roslyn` 分析器和修复器 对异步方法规范化返回Async结尾 使用 `Roslyn` 分析器和修复器 对异步方法规范化返回Async结尾 使用 `Roslyn` 分析器和修复器 对异步方法规范化返回Async结尾
k8s 中的 Service 简介【k8s 系列之二】
〇、前言 k8s 集群中的每一个 Pod 都有自己的 IP 地址,那么是不是有 IP 了,访问起来就简单了呢,其实不然。 因为在 k8s 中 Pod 不是持久性的,摧毁重建将获得新的 IP,客户端通过会变更 IP 来访问显然不合理。另外 Pod 还经常会通过多个副本来实现负载均衡,客户端如何高效的访
k8s 中的 Service 简介【k8s 系列之二】 k8s 中的 Service 简介【k8s 系列之二】 k8s 中的 Service 简介【k8s 系列之二】
SQL Server 语句日期格式查找方法
本文简要介绍了在SQL Server中,处理日期格式和查找特定日期格式的记录是一个常见的需求,本文给出了SQL Server提供了多种函数和格式选项来处理和比较日期。
UWP 通过 .NET 9 和Native AOT 的支持实现 UWP 应用的现代化
微软(9 月 11 日)发布博文,微软正在预览对 .NET 9 的 UWP(通用 Windows 平台)支持,为现有 UWP 开发人员提供一条使用最新的 .NET 和本机 AOT 实现其应用程序现代化的途径。这样做是因为该公司敦促开发人员切换到 Windows App SDK 和 WinUI 3,可
UWP 通过 .NET 9 和Native AOT 的支持实现 UWP 应用的现代化 UWP 通过 .NET 9 和Native AOT 的支持实现 UWP 应用的现代化 UWP 通过 .NET 9 和Native AOT 的支持实现 UWP 应用的现代化
为什么在EffectiveJava中建议用EnumSet替代位字段,以及使用EnumMap替换序数索引
在EffectiveJava中的第 36条中建议 用 EnumSet 替代位字段,在第37条中建议 用EnumMap替换序数索引,为什么? EnumSet 在EffectiveJava中的第 36条中建议 用 EnumSet 替代位字段 36、用 EnumSet替代位字段 如果枚举类型的元素主要在