QML歌词从左到右变色效果

QT实现MP3播放器的歌词同步显示(卡拉OK功能) QT实现MP3播放器的歌词同步显示(卡拉OK功能) 一、原理 mp3歌词文件是以lrc为扩展名的文件,属于纯文本格式文件,通过解析mp3纯文本格式的歌词文件(“XXX.lrc”),实现歌词的同步显示。 二、lrc文件格式介绍: 1、简介: LRC歌词是一种包含着“[*:*]”形式的“标签(tag)”、基于纯文本的歌词专用格式。 2、标签(ID-tags)说明 标签分为“标识标签”和“... 阅读详情

要实现的效果如下:
在这里插入图片描述
代码:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 400
    height: 100
    title: qsTr("Hello World")

    Text{
        id: mt
        anchors.centerIn: parent
        visible: false
        color: "red"
        text:"曾经年少爱追梦,一心只想往前飞。"
        font.pixelSize: 24
     }

     PropertyAnimation{
        target: mr1
        property: "width"
        from: 0
        to: m2.width
        duration: 5000
        loops: -1
        running: true
     }

     Rectangle{
         id: m2
         anchors.fill: mt
         color:"#00000000"
         Rectangle{
             id: mr1
             height:parent.height
             color: "blue"
             //width是从0到m2.width
         }
         Rectangle{
             x: mr1.width  //从0到m2.width
             height:parent.height
             width: m2.width-mr1.width
             color: "red"
         }
     }

     ShaderEffectSource {
        id: mask
        visible: false
        anchors.fill: mt
        hideSource : true
        sourceItem: m2
     }

     Blend {
       anchors.fill: mt
       source: mt
       foregroundSource: mask
       mode: "color"
    }
}

参考:
https://blog.youkuaiyun.com/zcwwcw/article/details/38726067
https://blog.youkuaiyun.com/willspace/article/details/48683897
https://www.jianshu.com/p/85f04a2fc030

QML LinearGradient实现文字渐变闪烁动画 QML利用Timer实现字体渐变动画 上一篇文章介绍了利用Timer对单个字母进行颜色变化实现文字渐变动画,对于文字比较固定的场景比较合适,但是对于文字数目会发生变化的场景的适应性并不好,发现了一种更好的方法来实现文字的动画。主要用到的QML功能如下: 1、LinearGradient 2、GradientStop 3、SequentialAnimation 4、NumberAnimation 实现原理 利用LinearGradient对文字区域进行梯度颜色设定,利用GradientStop在不同的... 阅读详情

相关推荐

Qt界面美化实战:从QSS到自定义绘制,打造专业级UI的完整指南

在桌面应用与嵌入式HMI开发中,用户界面的视觉体验直接影响软件的专业度和用户接受度。Qt作为主流的跨平台C++框架,其默认控件风格往往难以满足现代审美需求,因此界面美化成为开发者必须掌握的核心技能。其技术原理主要围绕样式系统与绘制机制展开:通过Qt样式表实现皮肤级定制,利用子类化与自定义绘制进行控件级重塑,结合QML构建动态交互界面,最终形成统一的设计语言。这项技术的核心价值在于将软件从“功能可用”提升至“体验出色”,显著增强产品的市场竞争力。在实际应用场景中,无论是音乐播放器、数据仪表盘还是工业控制界面,

weixin_30516243的博客 300

QT显示歌词渐变

central = new QWidget(this); setCentralWidget(central); central->setAutoFillBackground(true); central->setWindowOpacity(1); label = new QLabel(tr("这是一首歌,请你记住它,不要忘记"),central); ...

weixin_33753003的博客 729

QML实现渐变侧滑效果——显示和隐藏

当看到一个博文,用一个NumberAnimation实现QML实现渐变侧滑效果,从右往左出现的时候,我就想:要实现一个从右往左出现,动画结束后,点击鼠标,又从左往右隐藏。这样的时候,就可以实现一个侧边的面板,响应鼠标(或者键盘)事件,出现或者隐藏。 test.qml代码: import QtQuick 2.0 Rectangle { id: root width: 300 ...

斧冰 2083

QML做渐变色字体

渐变色字体就不多说了,在开发应用中用得很多,之前用LinearGradient来实现,但是一直效果不太理想,在桌面端运行时没有问题,但是在android上表现不一样。后来查看官方文档,找到一种比较好的方法,分享一下。

hw5230的博客 596

QML 数字滚动与特殊文字:数字滚动、卡拉 OK、弹幕

本文介绍了数字滚动、卡拉OK歌词、文字弹幕三种特殊文字动效,分别用NumberAnimation平滑过渡数值、按索引驱动逐字高亮、Repeater与随机属性实现错落飞行的弹幕。

u011186532的专栏 111

qml gradient 横向渐变

qml 在5.12以下版本是没有从左到右的横向渐变方法设置的,如下: Rectangle { gradient: Gradient { GradientStop { color: "#333" position: 0 } GradientStop { color: "#2...

波风水门 2293

qml之从零开始编写网易云音乐(二)

完善标题栏的搜索框,效果如下:搜索栏:自定义组合控件 //搜索 Rectangle{ id:searchTextEdit anchors{ left:titleLabel.right leftMargin: 20*dp top:parent.top topM...

小李的博客 1140

使用QML实现的一个音乐播放器

这是我使用qml做的一个小音乐播放器,目前只实现了基本功能,其他的诸如显示歌词,播放列表会在以后的版本添加.如果遇到播放不了的文件可能是缺少解码器,程序在ubuntu14.04下测试通过

Qt音乐播放器歌词滚动进阶:如何用QML实现酷狗式平滑滚动效果

本文详细解析了如何使用QML实现Qt音乐播放器中酷狗式的歌词平滑滚动效果。通过对比传统QLabel方案的局限性,展示了QML在流畅度、开发效率和动画支持方面的优势,并提供了核心架构设计、性能调优技巧以及高级视觉特效的实现方法,帮助开发者打造专业级的网络音乐播放器。

sam99的博客 572

qml 实现网易云音乐ui界面

qml 实现网易云音乐ui界面。。=

卡拉OK歌词的滚动显示(模仿酷我音乐盒)

本来在做项目,看到酷我音乐盒的歌词显示挺有趣的,模仿做了一个不完整的。 (只有滚动显示,没有节奏显示)。 原理: (1)定义一个派生自CStatic类的CKaraokeLyricCtrl类(歌词控件),自绘制风格 ; (2)准备一个背景位图(保存在CKaraokeLyricCtrl::m_dcBK中); (3)设置两个计数器(ID分别为1和2),启动自绘制,1用来显示节奏(未实现,只 有框架),2用来滚动歌词; (4)自绘制函数中,将绘制的滚动歌词和背景位图混合,然后输出到屏幕上。滚动 歌词的绘制使用GDI+的Graphics::DrawString函数,歌词文本的大小、位置、字体和 透明度均自动计算和变化,模仿酷我音乐盒的形式。 以上功能均封闭实现在CKaraokeLyricCtrl类中。该类可以直接使用(见下边的使用步骤)。 使用步骤: (1)CKaraokeLyric::InitInstance中启动GDI+; (2)在CKaraokeLyricView::OnInitialUpdate中,创建歌词控件 (CKaraokeLyricCtrl类),其大小和CKaraokeLyricView视图相同,即覆盖了后者; (3)在菜单项响应中,使用CKaraokeLyricCtrl::ReadLyric读取歌词文件,再使用 CKaraokeLyricCtrl::Start即可启动歌词的滚动显示 未实现部分:(歌词的节拍显示) 虽然没有实现,但思路大致是:在后台先用另外一种颜色绘制当前突出显示的歌词(即字体最大的一行歌词),根据歌曲节奏,将还未唱出部分全部涂黑,然后和屏幕上的当前行突出歌词进行混合。

QML Gradient(渐变)

渐变由两种或多种颜色定义,这些颜色无缝混合。颜色从指定的角度开始,以 360 度较大的角度值结束。渐变由两种或多种颜色定义,这些颜色无缝混合。颜色从项目的中间开始,到边框结束。

qq_45303986的博客 4217

FPGA波束形成:从算法到硬件的艺术之旅

本文深入探讨了FPGA在波束形成技术中的应用,从算法原理到Verilog硬件实现的全过程。文章详细分析了FPGA并行处理、低延迟和可重构特性如何优化波束形成系统性能,并提供了Verilog关键模块代码示例和资源优化策略,为工程师实现高效FPGA波束形成解决方案提供实用指导。

tea88的博客 1047

Qt qml 模拟iphone slide to unlock 的聚光动画文字效果

模拟iphone slide to unlock 的聚光动画文字效果    /底层放淡文字    /前景放高亮文字+半透明遮罩    /动画移动遮罩 Author: surfsky.cnblogs.com 2015-02Lisence: MIT, 请保留本文档说明 【先看效果】 【下载】 http://download.youkuaiyun.com/detail/surfsky/8448175 ...

weixin_33798152的博客 221

PWN-shellcode

构造一段shellcode的作用就是为了在缓冲区溢出时将shellcode的地址覆盖掉正常的返回地址。 题目: 1Ch=16+12=28,+esp=32:偏移量是32 能溢出:100-0x1c-4=68字节 C伪代码: 理论基础 函数返回步骤 : 保存返回值:函数返回值保存在EAX寄存器 弹出当前栈帧,恢复上一个栈帧 a) ESP + 当前栈帧大小:堆栈平衡基础上,降低栈顶,回收当前栈帧空间...

MuMuLee_的博客 2086

GAN网络(论文阅读):Generative Adversarial Nets

当判别器效果比较好时,D(G(z))值为0,则log(1-D(G(z)))值为0,当判别器效果不好,会输出一个大于0 的数,则log(1-D(G(z)))值就为一个负数,在极端情况下,会得到负无穷大,此时判别失误。在价值函数的第二项中存在问题,在早期G比较弱的时,生成的数据和真实数据相差很大,D就容易训练的比较好,很容易区分,就会导致log(1-D(G(z)))变成0 ,这样很难求梯度来优化G,所以更新G时,将优化函数改为log(D(G(z)))。最终使G赢,即G生成的数据D判别不出来。

m0_54248968的博客 2293

实现线性渐变的文字

【代码】实现线性渐变的文字。

qq_44236654的博客 777

【图像超分】论文精读:Residual Dense Network for Image Super-Resolution(RDN)

一个非常深的卷积神经网络 (CNN) 最近在图像分类 (SR) 方面取得了巨大成功,并提供了分层特征。然而,大多数基于深度 CNN 的 SR 模型没有充分利用原始低分辨率 (LR) 图像中的层次特征,从而实现相对较低的性能。在本文中,我们提出了一种新的残差密集网络(RDN)来解决图像SR中的这个问题。我们充分利用所有卷积层的分层特征。具体来说,我们提出了残差密集块(RDB)通过密集连接的卷积层提取丰富的局部特征。RDB 进一步允许将前一个 RDB 的状态与当前 RDB 的所有层直接连接,从而产生连续的内存

主要更新底层视觉(去噪、超分等)相关的科研内容,形式为【论文精读】+【论文复现】 7259

qml的Rectangle

先记录一个Rectangle操作的很不错的博客,QML中Rectangle QML的透明度、旋转、缩放、渐变

IEE2285的博客 836

吃透 10GBASE-T1 PHY:从 PMA 原理到线束 PCB 工程落地全指南(上)

本文介绍了以太网物理层关键子层PMA(物理介质附属子层)的功能及其测试规范。PMA位于PCS与PMD之间,负责数字信号与模拟信号的转换,包括串并转换、时钟恢复等核心功能,并支持链路监测与调试。文章详细阐述了7种测试模式的定义与应用场景,涵盖发射机抖动、线性度、功率谱密度等参数的检测方法。测试模式包括特定信号序列的发送与验证,如JP03A/B、PRBS13Q等。此外还介绍了测试夹具的使用要求,为PMA的性能验证提供了完整的技术框架。

一只豌豆象的博客 157

《MPDIoU:边界框回归的高效革新与YOLOv8集成实战指南》

摘要: MPDIoU(多优先级距离IoU)通过引入中心距离、形状差异和尺度变化的三步优化策略,解决了传统IoU在目标检测中的尺度敏感、收敛低效和场景局限问题。相较于GIoU、DIoU等主流方法,MPDIoU在精度、速度和鲁棒性上实现全面提升,尤其在复杂场景和小目标检测中表现突出。通过代码集成和训练优化,MPDIoU在YOLOv8中显著提升COCO数据集AP指标,并在智能安防(密集行人检测)和工业质检(微小缺陷定位)等垂直领域验证了其应用价值。未来研究方向包括动态权重调整和多模态融合,进一步拓展边界框回归的精

m0_64661770的博客 160

QML利用Timer实现字体渐变动画

1、实现效果图 确认一下是否是你要找的效果呢?如果确定,那就继续阅读吧。 2、实现原理 该功能实现非常简单,下面是流程: 1、首先对每个单词进行拆分,即一个字符串拆分成多个字符,对每个字符定义一个Text; 2、对字符的颜色进行定义,并且绑定一个变量值 3、定义一个Timer,并且实时刷新颜色对应的变量值。 3、核心代码介绍 Text { id: name anchors.left: parent.left height: 10 width: 30 text:

PRML_MAN的博客 997

【零基础学习CAPL】——CAN报文的发送(CRC——ChecSum值)

本章主要介绍带有CRC值的报文发送一般报文可使用CANoe的IG模块直接发送,但带有CRC值的报文就只能编写脚本进行发送,以下详细讲解在配合Panel面板情况下,如何进行带有循环冗余码的报文进行报文的发送。

LOVE135149的博客 1916

Qt/QML学习-文本样式

Qt/QML学习-文本样式

QT、QML 494

火焰烟雾识别系统【数据集+源码+UI界面】

数据集准备:收集并标注火焰与烟雾数据。YOLOv10训练:训练YOLOv10模型来识别火焰和烟雾。实时检测:通过摄像头视频流进行实时检测,并显示检测结果。UI界面设计:用Tkinter设计简易界面,显示检测结果。完成以上步骤后,可以实现一个完整的火焰烟雾识别系统,具备实时检测与友好的用户界面。

2201_76125393的博客 1136

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

上一篇: 详解C++设计模式编程中策略模式的优缺点及实现
下一篇: QML中ListView向上滚动效果
hp_cpp
博客等级 码龄11年 310粉丝 218原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值