《Qt窗口动画实战:窗口渐隐渐现效果》

《Qt窗口动画实战:窗口渐隐渐现效果》

在桌面应用开发中,优雅的窗口动画能显著提升用户体验。本文将分享我如何使用Qt实现窗口的渐隐渐现效果,以及在此过程中解决的各种技术难题。

1、看看效果如何

2、设计过程

1、设计思路
  1. 窗口显示时:从完全透明渐变到完全不透明
  2. 窗口隐藏时:从完全不透明渐变到完全透明
  3. 支持自定义动画时长
  4. 兼容Windows、macOS、Linux三大平台
2、设计方案

经过调研,我选择了以下技术方案:

核心机制:QPropertyAnimation

3、实现的具体过程

mainwindow.h文件的实现

cpp 复制代码
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPropertyAnimation>
#include <QPushButton>

class MainWindow : public QMainWindow
{
    Q_OBJECT
    Q_PROPERTY(qreal windowOpacity READ windowOpacity WRITE setWindowOpacity)

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void fadeOut();
    void fadeIn();

private:
    QPropertyAnimation *animation;
    QPushButton *fadeOutBtn;
    QPushButton *fadeInBtn;
};

#endif // MAINWINDOW_H 

mainwindow.cpp文件的实现

cpp 复制代码
#include "mainwindow.h"
#include <QVBoxLayout>
#include <QWidget>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setWindowTitle("test fade window");
    resize(400, 300);

    QWidget *centralWidget = new QWidget(this);
    QVBoxLayout *layout = new QVBoxLayout(centralWidget);
    setCentralWidget(centralWidget);

    fadeOutBtn = new QPushButton("fade out", this);
    fadeInBtn = new QPushButton("fade in", this);
    
    layout->addWidget(fadeOutBtn);
    layout->addWidget(fadeInBtn);

    animation = new QPropertyAnimation(this, "windowOpacity", this);
    animation->setDuration(1000); 


    connect(fadeOutBtn, &QPushButton::clicked, this, &MainWindow::fadeOut);
    connect(fadeInBtn, &QPushButton::clicked, this, &MainWindow::fadeIn);
}

MainWindow::~MainWindow()
{
}

void MainWindow::fadeOut()
{
    animation->setStartValue(1.0);
    animation->setEndValue(0.0);
    animation->start();
}

void MainWindow::fadeIn()
{
    animation->setStartValue(0.0);
    animation->setEndValue(1.0);
    animation->start();
} 

main.cpp实现:

cpp 复制代码
#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
} 

源码地址:https://github.com/MingYueRuYa/QtDemo

相关推荐
疾风铸境1 天前
qt+halcon开发相机拍照软件步骤
数码相机·qt·halcon·拍照
抠脚学代码1 天前
Ubuntu Qt x64平台搭建 arm64 编译套件
数据库·qt·ubuntu
眠りたいです1 天前
基于脚手架微服务的视频点播系统-播放控制部分
c++·qt·ui·微服务·云原生·架构·播放器
bikong71 天前
一种高效绘制余晖波形的方法Qt/C++
数据库·c++·qt
追烽少年x2 天前
QProxyStyle类中drawControl和drawComplexControl函数的区别是什么
qt
长沙红胖子Qt2 天前
VTK开发笔记(五):示例Cone2,熟悉观察者模式,在Qt窗口中详解复现对应的Demo
qt·观察者模式·vtk·回调
郝学胜-神的一滴2 天前
基于OpenGL封装摄像机类:视图矩阵与透视矩阵的实现
c++·qt·线性代数·矩阵·游戏引擎·图形渲染
华溢澄2 天前
macOS下基于Qt/C++的OpenGL开发环境的搭建
c++·qt·macos·opengl
刃神太酷啦2 天前
C++ 异常处理机制:从基础到实践的全面解析----《Hello C++ Wrold!》(20)--(C/C++)
java·c语言·开发语言·c++·qt·算法·leetcode
枫叶丹42 天前
【Qt开发】显示类控件(一)-> QLabel
开发语言·qt