文档章节

Qt之对话框淡出、飞入、最小化的动画实现

shzwork
 shzwork
发布于 09/18 11:11
字数 1333
阅读 44
收藏 0

转自:https://www.cnblogs.com/swarmbees/p/7288885.html

一、效果展示

  最近做了一个提示框消失的功能,觉着挺有意思,以前一直以为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属性 。targetObject对象设置为this内部单独封装的widget,这样做的目的使得该提示框不需要依赖其他窗口遮挡即可做出飞出效果

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、快捷调用接口,该接口都是类的静态方法可以直接调用

View Code

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 }

四、demo程序

  VS版本:动画提示框

      Qt Creator版本:动画提示框 qt5.8

本文转载自:https://blog.csdn.net/zzwdkxx/article/details/84972067

shzwork
粉丝 15
博文 817
码字总数 10675
作品 0
厦门
私信 提问
在PPT2007中制作礼花绽放动画效果ppt模板打包下载

  家家户户都有除夕放烟花的习惯,尤其是一些小地方城市,过节礼花那是必不可少的。毕业论文ppt背景放礼花可以增添节日的喜庆气氛,但是大家也需要注意自身安全,下面简单介绍一下礼花绽放...

ppt模板下载空间
2015/09/20
284
0
[iOS Animation]-CALayer 显示动画 动画组

动画组 CABasicAnimation和CAKeyframeAnimation仅仅作用于单独的属性,而CAAnimationGroup可以把这些动画组合在一起。CAAnimationGroup是另一个继承于CAAnimation的子类,它添加了一个anima...

浩浩老师
2015/09/22
36
0
iOS UIView动画实践(四):过渡与伪3D动画

前言 上三篇关于UIView Animation的文章向大家介绍了基础的UIView动画,包括移动位置、改变大小、旋转、弹簧动画、过渡动画。这些虽然看起来很简单,但是如果我们仔细分析、分解一个复杂动画...

上官尘
2016/03/15
509
0
Java程序员从笨鸟到菜鸟之(九十一)跟我学jquery(七)jquery动画大体验

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了。现在想想,实在...

长平狐
2012/11/12
101
0
jQuery实现网页背景自动淡入淡出切换

在设计自己的个人主页时,想要一个背景图片自动切换的效果,但是单纯修改url的效果太丑了,希望简单设计一个淡入淡出的特效,百度出来的办法都不太好用,于是自己动手写了一个,仅供参考~ d...

Nicksonlvqq
2017/11/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

elasticsearch查询20公里以内的数据并按距离升序排序data es写法

NativeSearchQueryBuilder queryBuilder = new NativeSearchQueryBuilder();BoolQueryBuilder boolQueryBuilder=new BoolQueryBuilder();//这暂wei加入业务查询条件 queryBuilder.withQue......

为何不可1995
33分钟前
5
0
superset在线pip部署

1、安装依赖sudo yum install gcc libffi-devel python-devel python-pip python-wheel openssl-devel libsasl2-devel openldap-devel报错:没有可用软件包 python-pip。没有可用软件包 ......

阿伦哥-
38分钟前
4
0
photoshop简单使用

PS基本操作与图片格式 photoshop工具 组成 菜单项 工具栏 辅助面板 图片格式 jpg png gif 注: psd photoshop CC链接: https://pan.baidu.com/s/1LVa5R_btSjczLBwskCZidQ 提取码:sc3v 快捷...

studywin
40分钟前
4
0
springboot 整合pageHelper

今天跟大家聊聊springboot整合pageHelp,首先pageHelper是一个缓存式分页,分页步骤如下: 1 pom文件添加依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelp......

gaofei123
40分钟前
7
0
《DNS攻击防范科普系列1》—你的DNS服务器真的安全么?

DNS服务器,即域名服务器,它作为域名和IP地址之间的桥梁,在互联网访问中,起到至关重要的作用。每一个互联网上的域名,背后都至少有一个对应的DNS。对于一个企业来说,如果你的DNS服务器因...

大涛学弟
41分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部