快捷導(dǎo)航

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

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

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

一、效果展示

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

圖1 窗口特效

二、功能

如圖1窗口特效所示，實例中總共包含了4個groupbox，這4個groupbox是分別用來展示不同特效，下面分別講述4個groupbox

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

三、代碼實現(xiàn)

在講解代碼之前，先來認(rèn)識幾個概念

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

1、移出動畫，使用屬性動畫QPropertyAnimation類進(jìn)行，propertyname的參數(shù)是窗口的屬性，詳情參見Q_PROPERTY屬性。targetObject對象設(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、動畫啟動機(jī)制

使用定時器控制動畫，當(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();
 });
}

窗口顯示時啟動定時器，并且將窗口隨機(jī)移動到屏幕一個位置

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來完成背景色修改

 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、測試，由于測試代碼較多，我只貼出2個

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

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

四、demo程序

動畫提示框

總結(jié)

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

您可能感興趣的文章: