快捷導(dǎo)航

Qt學(xué)習(xí)教程之對(duì)話框消失動(dòng)畫效果

更新時(shí)間：2018年07月18日 08:36:29 作者：1134024095

這篇文章主要給大家介紹了關(guān)于Qt學(xué)習(xí)教程之對(duì)話框消失動(dòng)畫效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、效果展示

最近做了一個(gè)提示框消失的功能，覺著挺有意思，以前一直以為Qt子窗口不能做淡出效果，其實(shí)Qt的淡出功能已經(jīng)幫我們封裝好了，我們僅僅只需要幾行代碼就可以做出酷炫的窗口關(guān)閉效果，寫此篇文章的時(shí)候，我特意瀏覽了下之前寫的兩篇文章(QPainterPath 不規(guī)則提示框，QPainterPath 不規(guī)則提示框(二))，現(xiàn)在回想起來(lái)那會(huì)兒確實(shí)知之甚少，關(guān)于頂層窗口不能做圓角，其實(shí)幫助文檔里已經(jīng)說(shuō)的很明確，解決辦法有多種，一種是重寫paintEvent函數(shù)，另一種是把widget包裝一層，本篇文章就用的是后一種方式，如圖1所示窗口關(guān)閉動(dòng)畫，實(shí)例程序中做了淡出、飛出、縮小等關(guān)閉窗口動(dòng)畫，除此之外還包含了陰影、背景著色、濾鏡等特效。

圖1 窗口特效

二、功能

如圖1窗口特效所示，實(shí)例中總共包含了4個(gè)groupbox，這4個(gè)groupbox是分別用來(lái)展示不同特效，下面分別講述4個(gè)groupbox

背景色：主要針對(duì)窗口背景色進(jìn)行了定制，就像groupbox中按鈕文字那樣，是紅色和綠色的背景提示框，其中紅色提示框使用了最小化關(guān)閉效果，綠色提示框使用了淡出特效
飛出：這4個(gè)按鈕彈出的對(duì)話框都使用了飛出特效，4個(gè)按鈕分別展示了4種飛出的方式(左、上、右、下)
自定義：支持自定義提示框別景色、提示框展示時(shí)長(zhǎng)、消失動(dòng)畫時(shí)長(zhǎng)和消失模式
shortcut：主要是針對(duì)業(yè)務(wù)進(jìn)行的功能定制，warning提示框體的圖標(biāo)是進(jìn)行單獨(dú)處理的，是一個(gè)嘆號(hào)圖標(biāo)

三、代碼實(shí)現(xiàn)

在講解代碼之前，先來(lái)認(rèn)識(shí)幾個(gè)概念

QPropertyAnimation：屬性動(dòng)畫，可以參考qt 窗口動(dòng)畫
QGraphicsOpacityEffect：窗口透明度設(shè)置類，繼承自QGraphicsEffect
QGraphicsDropShadowEffect：窗口陰影，繼承自QGraphicsEffect
QGraphicsBlurEffect：濾鏡，繼承自QGraphicsEffect
QGraphicsColorizeEffect：著色，繼承自QGraphicsEffect

1、移出動(dòng)畫，使用屬性動(dòng)畫QPropertyAnimation類進(jìn)行，propertyname的參數(shù)是窗口的屬性，詳情參見Q_PROPERTY屬性。targetObject對(duì)象設(shè)置為this內(nèi)部單獨(dú)封裝的widget，這樣做的目的使得該提示框不需要依賴其他窗口遮擋即可做出飛出效果

void GMPOperateTip::MoveOut()
{
 m_pAnimation->setTargetObject(m_pMoveWidget);
 m_pAnimation->setPropertyName("pos");

 m_pAnimation->setStartValue(QPoint());
 switch (m_eDirection)
 {
 case D_LEFT:
  m_pAnimation->setEndValue(QPoint(-width(), 0));
  break;
 case D_TOP:
  m_pAnimation->setEndValue(QPoint(0, -height()));
  break;
 case D_RIGHT:
  m_pAnimation->setEndValue(QPoint(width(), 0));
  break;
 case D_BOTTOM:
  m_pAnimation->setEndValue(QPoint(0, height()));
  break;
 default:
  ;
 }
}

2、淡出

m_pOpacity = new QGraphicsOpacityEffect(this);
m_pOpacity->setOpacity(1);

setGraphicsEffect(m_pOpacity);

m_pAnimation->setTargetObject(m_pOpacity);
m_pAnimation->setPropertyName("opacity");

m_pAnimation->setStartValue(1);
m_pAnimation->setEndValue(0);

3、最小化

m_pAnimation->setPropertyName("geometry");

QRect startRect = rect();
startRect.moveTo(pos());
QRect stopRect = QRect(startRect.center(), QSize(0, 0));

m_pAnimation->setStartValue(startRect);
m_pAnimation->setEndValue(stopRect);

4、動(dòng)畫啟動(dòng)機(jī)制

使用定時(shí)器控制動(dòng)畫，當(dāng)指定時(shí)間后啟動(dòng)動(dòng)畫，并且在動(dòng)畫完成后關(guān)閉窗口

void InitializeConnect()
{
 m_pAnimation = new QPropertyAnimation(this);
 m_pAnimation->setTargetObject(this);

 connect(m_pAnimation, &QPropertyAnimation::finished, this, &GMPOperateTip::close);

 connect(&m_StayTimer, &QTimer::timeout, this, [this]{
  m_pAnimation->setDuration(m_DurationTime);
  switch (m_eMode)
  {
  case AM_FADEOUT:
   FadeOut_p();
   break;
  case AM_FLYOUT:
   MoveOut();
   break;
  case AM_ZOOMIN:
   ZoomIn();
   break;
  default:
   ;
  }

  m_pAnimation->start();
 });
}

窗口顯示時(shí)啟動(dòng)定時(shí)器，并且將窗口隨機(jī)移動(dòng)到屏幕一個(gè)位置

bool event(QEvent * e)
{
 if (e->type() == QEvent::Show)
 {
  //QPoint pos = parentWidget()->rect().center() - this->rect().center();
  int wrand = qrand() % (parentWidget()->rect().width() - this->rect().width());
  int hrand = qrand() % (parentWidget()->rect().height() - this->rect().width());
  move(QPoint(wrand, hrand));

  m_StayTimer.start(m_iStayDuration);
 }

 return __super::event(e);
}

5、陰影

void setShadowEnable(bool enable)
{
 if (!m_pShadow)
 {
  m_pShadow = new QGraphicsDropShadowEffect(this);
  m_pShadow->setColor(QColor(0, 0, 0, 85));
  m_pShadow->setBlurRadius(10);
  m_pShadow->setOffset(4, 4);
 }

 setGraphicsEffect(enable ? m_pShadow : nullptr);
}

6、著色

注釋中的代碼也可以進(jìn)行著色，但是窗體的一些特殊樣式不能完成，因此使用stylesheet來(lái)完成背景色修改

 static const QString c_szStyleSheet = "QWidget{background-color:%1;\
          border:1px solid %2;border-top:0;border-bottom-left-radius:3px;\
          border-bottom-right-radius:3px;background-image: url();}";

void GMPOperateTip::setBackgroundColor(const QColor & color)
{
 //if (!m_pColorize)
 //{
 // m_pColorize = new QGraphicsColorizeEffect(this);
 // m_pColorize->setStrength(1);
 // 
 // setGraphicsEffect(m_pColorize);
 //}
 //m_pColorize->setColor(color);

 QColor border = color;
 border.setAlpha(255 * 0.1);
 QString borderRgba = QString("rgba(%1,%2,%3,%4)").arg(border.red()).arg(border.green()).arg(border.blue()).arg(border.alpha());
 setStyleSheet(c_szStyleSheet.arg(color.name()).arg(borderRgba));
}

7、快捷調(diào)用接口，該接口都是類的靜態(tài)方法可以直接調(diào)用

8、測(cè)試，由于測(cè)試代碼較多，我只貼出2個(gè)

void tip::on_pushButton_success_clicked()
{
 GMPOperateTip::Success(this, QStringLiteral("測(cè)a試º?，ê?測(cè)a試º?"), 1000, 1000);
}

void tip::on_pushButton_warning_clicked()
{
 GMPOperateTip::Waring(this, QStringLiteral("測(cè)a試º?，ê?測(cè)a試º?"), 1000, 1000);
}

四、demo程序

動(dòng)畫提示框

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: