溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-08-26 07:19:02 來源：腳本之家 閱讀：349 作者：1134024095 欄目：編程語(yǔ)言

一、效果展示

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

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

圖1 窗口特效

二、功能

如圖1窗口特效所示，實(shí)例中總共包含了4個(gè)groupbox，這4個(gè)groupbox是分別用來展示不同特效，下面分別講述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)

在講解代碼之前，先來認(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來完成背景色修改

 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à)值，如果有疑問大家可以留言交流，謝謝大家對(duì)億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手