Qt之对话框消失动画

一、效果展示

　　最近做了一个提示框消失的功能，觉着挺有意思，以前一直以为Qt子窗口不能做淡出效果，其实Qt的淡出功能已经帮我们封装好了，我们仅仅只需要几行代码就可以做出酷炫的窗口关闭效果，写此篇文章的时候，我特意浏览了下之前写的两篇文章(QPainterPath 不规则提示框，QPainterPath 不规则提示框(二))，现在回想起来那会儿确实知之甚少，关于顶层窗口不能做圆角，其实帮助文档里已经说的很明确，解决办法有多种，一种是重写paintEvent函数，另一种是把widget包装一层，本篇文章就用的是后一种方式，如图1所示窗口关闭动画，实例程序中做了淡出、飞出、缩小等关闭窗口动画，除此之外还包含了阴影、背景着色、滤镜等特效。

图1 窗口特效

二、功能

如图1窗口特效所示，实例中总共包含了4个groupbox，这4个groupbox是分别用来展示不同特效，下面分别讲述4个groupbox

  • 背景色：主要针对窗口背景色进行了定制，就像groupbox中按钮文字那样，是红色和绿色的背景提示框，其中红色提示框使用了最小化关闭效果，绿色提示框使用了淡出特效
  • 飞出：这4个按钮弹出的对话框都使用了飞出特效，4个按钮分别展示了4种飞出的方式(左、上、右、下)
  • 自定义：支持自定义提示框别景色、提示框展示时长、消失动画时长和消失模式
  • shortcut：主要是针对业务进行的功能定制，warning提示框体的图标是进行单独处理的，是一个叹号图标

三、代码实现

在讲解代码之前，先来认识几个概念

  • QPropertyAnimation：属性动画，可以参考qt 窗口动画
  • QGraphicsOpacityEffect：窗口透明度设置类，继承自QGraphicsEffect
  • QGraphicsDropShadowEffect：窗口阴影，继承自QGraphicsEffect
  • QGraphicsBlurEffect：滤镜，继承自QGraphicsEffect
  • QGraphicsColorizeEffect：着色，继承自QGraphicsEffect

1、移出动画，使用属性动画QPropertyAnimation类进行，propertyname的参数是窗口的属性，详情参见Q_PROPERTY属性

 1 void GMPOperateTip::MoveOut()
 2 {
 3     m_pAnimation->setTargetObject(m_pMoveWidget);
 4     m_pAnimation->setPropertyName("pos");
 5
 6     m_pAnimation->setStartValue(QPoint());
 7     switch (m_eDirection)
 8     {
 9     case D_LEFT:
10         m_pAnimation->setEndValue(QPoint(-width(), 0));
11         break;
12     case D_TOP:
13         m_pAnimation->setEndValue(QPoint(0, -height()));
14         break;
15     case D_RIGHT:
16         m_pAnimation->setEndValue(QPoint(width(), 0));
17         break;
18     case D_BOTTOM:
19         m_pAnimation->setEndValue(QPoint(0, height()));
20         break;
21     default:
22         ;
23     }
24 }

2、淡出

 1 m_pOpacity = new QGraphicsOpacityEffect(this);
 2 m_pOpacity->setOpacity(1);
 3
 4 setGraphicsEffect(m_pOpacity);
 5
 6 m_pAnimation->setTargetObject(m_pOpacity);
 7 m_pAnimation->setPropertyName("opacity");
 8
 9 m_pAnimation->setStartValue(1);
10 m_pAnimation->setEndValue(0);

3、最小化

1 m_pAnimation->setPropertyName("geometry");
2
3 QRect startRect = rect();
4 startRect.moveTo(pos());
5 QRect stopRect = QRect(startRect.center(), QSize(0, 0));
6
7 m_pAnimation->setStartValue(startRect);
8 m_pAnimation->setEndValue(stopRect);

4、动画启动机制

使用定时器控制动画，当指定时间后启动动画，并且在动画完成后关闭窗口

 1 void InitializeConnect()
 2 {
 3     m_pAnimation = new QPropertyAnimation(this);
 4     m_pAnimation->setTargetObject(this);
 5
 6     connect(m_pAnimation, &QPropertyAnimation::finished, this, &GMPOperateTip::close);
 7
 8     connect(&m_StayTimer, &QTimer::timeout, this, [this]{
 9         m_pAnimation->setDuration(m_DurationTime);
10         switch (m_eMode)
11         {
12         case AM_FADEOUT:
13             FadeOut_p();
14             break;
15         case AM_FLYOUT:
16             MoveOut();
17             break;
18         case AM_ZOOMIN:
19             ZoomIn();
20             break;
21         default:
22             ;
23         }
24
25         m_pAnimation->start();
26     });
27 }

窗口显示时启动定时器，并且将窗口随机移动到屏幕一个位置

 1 bool event(QEvent * e)
 2 {
 3     if (e->type() == QEvent::Show)
 4     {
 5         //QPoint pos = parentWidget()->rect().center() - this->rect().center();
 6         int wrand = qrand() % (parentWidget()->rect().width() - this->rect().width());
 7         int hrand = qrand() % (parentWidget()->rect().height() - this->rect().width());
 8         move(QPoint(wrand, hrand));
 9
10         m_StayTimer.start(m_iStayDuration);
11     }
12
13     return __super::event(e);
14 }

5、阴影

 1 void setShadowEnable(bool enable)
 2 {
 3     if (!m_pShadow)
 4     {
 5         m_pShadow = new QGraphicsDropShadowEffect(this);
 6         m_pShadow->setColor(QColor(0, 0, 0, 85));
 7         m_pShadow->setBlurRadius(10);
 8         m_pShadow->setOffset(4, 4);
 9     }
10
11     setGraphicsEffect(enable ? m_pShadow : nullptr);
12 }

6、着色

注释中的代码也可以进行着色，但是窗体的一些特殊样式不能完成，因此使用stylesheet来完成背景色修改

1 static const QString c_szStyleSheet = "QWidget{background-color:%1;\
2                                     border:1px solid %2;border-top:0;border-bottom-left-radius:3px;3                                     border-bottom-right-radius:3px;background-image: url();}";
 1 void GMPOperateTip::setBackgroundColor(const QColor & color)
 2 {
 3     //if (!m_pColorize)
 4     //{
 5     //    m_pColorize = new QGraphicsColorizeEffect(this);
 6     //    m_pColorize->setStrength(1);
 7     //
 8     //    setGraphicsEffect(m_pColorize);
 9     //}
10     //m_pColorize->setColor(color);
11
12     QColor border = color;
13     border.setAlpha(255 * 0.1);
14     QString borderRgba = QString("rgba(%1,%2,%3,%4)").arg(border.red()).arg(border.green()).arg(border.blue()).arg(border.alpha());
15     setStyleSheet(c_szStyleSheet.arg(color.name()).arg(borderRgba));
16 }

7、快捷调用接口，该接口都是类的静态方法可以直接调用

 1 void GMPOperateTip::FadeOut(QWidget * parent /*= nullptr */
 2     , QString strText /*= "" */
 3     , const unsigned int nShowTime /*= 4000 */
 4     , const unsigned int nAnimationTime /*= 500*/)
 5 {
 6     GMPOperateTip * tipWidget = new GMPOperateTip(parent);
 7     tipWidget->setAnimationMode(AM_FADEOUT);
 8
 9     tipWidget->setText(strText);
10     tipWidget->setStayTime(nShowTime);
11     tipWidget->setAnimationdDuration(nAnimationTime);
12
13     tipWidget->show();
14 }
15
16 void GMPOperateTip::FlyOut(QWidget * parent /*= nullptr */
17     , QString strText /*= "" */
18     , Direction direction /*= D_TOP*/
19     , const unsigned int nShowTime /*= 4000 */
20     , const unsigned int nAnimationTime /*= 500 */)
21 {
22     GMPOperateTip * tipWidget = new GMPOperateTip(parent);
23     tipWidget->setAnimationMode(AM_FLYOUT);
24
25     tipWidget->setText(strText);
26     tipWidget->setFlyoutDirection(direction);
27     tipWidget->setStayTime(nShowTime);
28     tipWidget->setAnimationdDuration(nAnimationTime);
29
30     tipWidget->show();
31 }
32
33 void GMPOperateTip::Colorize(QWidget * parent /*= nullptr */
34     , QString strText /*= "" */
35     , const QColor & color /* = QColor(20, 142, 53) */
36     , AnimationMode animation /*= AM_FLYOUT */
37     , Direction direction /*= D_TOP */
38     , const unsigned int nShowTime /*= 4000 */
39     , const unsigned int nAnimationTime /*= 500*/)
40 {
41     GMPOperateTip * tipWidget = new GMPOperateTip(parent);
42
43     tipWidget->setText(strText);
44     tipWidget->setBackgroundColor(color);
45     tipWidget->setAnimationMode(animation);
46     tipWidget->setFlyoutDirection(direction);
47     tipWidget->setStayTime(nShowTime);
48     tipWidget->setAnimationdDuration(nAnimationTime);
49
50     tipWidget->show();
51 }
52
53 void GMPOperateTip::Waring(QWidget * parent /*= nullptr */
54     , QString strText /*= "" */
55     , const unsigned int nShowTime /*= 4000 */
56     , const unsigned int nAnimationTime /*= 500*/)
57 {
58     GMPOperateTip * tipWidget = new GMPOperateTip(parent);
59     tipWidget->setAnimationMode(AM_FLYOUT);
60     tipWidget->setFlyoutDirection(D_TOP);
61
62     tipWidget->setIcon(":/tip/warning.png");
63     tipWidget->setStyleSheet(c_szStyleSheet.arg("#FF9830").arg("#FF9326"));
64     tipWidget->setBackgroundColor(QColor(255, 152, 48));
65     tipWidget->setText(strText);
66     tipWidget->setStayTime(nShowTime);
67     tipWidget->setAnimationdDuration(nAnimationTime);
68
69     tipWidget->show();
70 }
71
72 void GMPOperateTip::Success(QWidget * parent /*= nullptr */
73     , QString strText /*= "" */
74     , const unsigned int nShowTime /*= 4000 */
75     , const unsigned int nAnimationTime /*= 500*/)
76 {
77     GMPOperateTip * tipWidget = new GMPOperateTip(parent);
78     tipWidget->setAnimationMode(AM_FLYOUT);
79     tipWidget->setFlyoutDirection(D_TOP);
80
81     tipWidget->setText(strText);
82     tipWidget->setStayTime(nShowTime);
83     tipWidget->setAnimationdDuration(nAnimationTime);
84
85     tipWidget->show();
86 }

8、测试，由于测试代码较多，我只贴出2个

1 void tip::on_pushButton_success_clicked()
2 {
3     GMPOperateTip::Success(this, QStringLiteral("测a试º?，ê?测a试º?"), 1000, 1000);
4 }
5
6 void tip::on_pushButton_warning_clicked()
7 {
8     GMPOperateTip::Waring(this, QStringLiteral("测a试º?，ê?测a试º?"), 1000, 1000);
9 }
时间： 2024-07-29 07:56:23

Qt之对话框消失动画的相关文章

Qt动画窗口，Qt之对话框消失动画

在讲解代码之前,先来认识几个概念 QPropertyAnimation:属性动画,可以参考qt 窗口动画 QGraphicsOpacityEffect:窗口透明度设置类,继承自QGraphicsEffect QGraphicsDropShadowEffect:窗口阴影,继承自QGraphicsEffect QGraphicsBlurEffect:滤镜,继承自QGraphicsEffect QGraphicsColorizeEffect:着色,继承自QGraphicsEffect http://w

如何修改Qt标准对话框的文字(例如,英文改成中文)

此篇文章参考qtcn论坛整理而成,因为文字和图片是本人亲自组织,所以仍算原创. http://www.qtcn.org/bbs/read-htm-tid-30650.html http://blog.csdn.net/yangxiao_0203/article/details/7488967 如图所示,QT自带的内建标准对话框QFontDialog.QColorDialog.QMessageBox.默认的文字全是英文的.QLineEdit和QTextEdit的右键菜单,默认的文字也全是英文的.请

Qt标准对话框之QColorDialog

Qt中提供了一些标准的对话框,用于实现一些常用的预定义功能,比如本节中将要介绍的颜色对话框——QColorDialog. 在不同的系统平台下,颜色对话框的显示效果可能会有所不同,主要因系统主题风格而异,但是功能是相同的,显示效果如下: 查看帮助文档的话,我们可以看到这个类提供的方法还是很多的,但是我们一般情况下用到的也就一个静态的成员方法:getColor(),该函数的原型如下: 1 QColor QColorDialog::getColor(const QColor & initial = Q

qt程序启动播放动画

qt程序启动播放动画 编辑删除转载 2016-01-20 10:23:11 标签:qt启动动画 1.播放动画 1 QAxWidget *flash = new QAxWidget(0, 0); //QAxWidget使用的是ActiveX插件 2 3 flash->resize(800, 600); //设置该控件的初始大小 4 5 flash->setControl(QString::fromUtf8("{d27cdb6e-ae6d-11cf-96b8-444553540000}&

QT常用对话框的使用以及实现

考虑的QT的对话框的内容颇多,很难记,而且使用起来往往相同的操作,所以将自己敲的各个常用对话框的使用方法上传.以下包含了颜色对话框.打开单个(多个)文件对话框,字体对话框.输入对话框.提示信息对话框.进度对话框.QErrorMessage对话框,以及向导对话框. 废话少说,直接上代码: //颜色对话框 QColor color = QColorDialog::getcolor(Qt::red,this,tr("颜色对话框")); //获取选择的颜色再去设置即可 //文件对话框 QStr

12个QT基本对话框，以及淡入原理（用定时器把窗口逐渐变成透明）

一.基本对话框 1,核心库: 界面程序 QApplication 非程序界面QCoreAppliction 2,消息循环必须执行QApplication.exec(); 3,消息绑定机制: 信号-槽 信号可以对应信号,也可以对应槽. 一个信号可以对应多个信号和多个槽. 4,QT基本对话框: QErrorMessage, QInputDialog, QMessageBox, QPrintDialog, QProgressDialog, QFileDialog, QAbstractPrintDial

Qt 3D教程（四）结合Qt Quick来实现动画的效果

Qt 3D教程(四)结合Qt Quick来实现动画的效果 上篇教程已经给大家带来较为实用的效果了,这回我们尝试载入两个模型,并且让PhongMaterial成为它们的共享材质,此外,我们通过借助Qt Quick的动画框架来让我们的三维场景动起来! 蒋彩阳原创文章,首发地址:http://blog.csdn.net/gamesdev/article/details/47132099.欢迎同行前来探讨. 这次的改动没有上次那么多,只需要修改main.qml即可满足效果.main.qml文件如下所示:

Qt标准对话框：QMessageBox

Qt标准对话框之QMessageBox 这次来说一下QMessageBox以及类似的几种对话框.其实,我们已经用过QMessageBox了,就在之前的几个程序中.不过,当时是大略的说了一下,现在专门来说说这几种对话框. 先来看一下最熟悉的QMessageBox::information.我们在以前的代码中这样使用过: QMessageBox::information(NULL, "Title", "Content", QMessageBox::Yes | QMess

QT模态对话框及非模态对话框

QT模态对话框及非模态对话框 模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对话框等.所谓模态对话框就是在其没有被关闭之前,用户不能与同一个应用程序的其他窗口进行交互,直到该对话框关闭.对于非模态对话框,当被打开时,用户既可选择和该对话框进行交互,也可以选择同应用程序的其他窗口交互. 在Qt中,显示一个对话框一般有两种方式,一种是使用exec()方法,它总是以模态来显示对话框