簡述

在Qt 之 QQ系統表情（五） 中 我們實現了自定義系統表情視窗，這一篇將簡單介紹如何實現QQ聊天介面中小表情視窗切換至正常表情視窗的動畫效果。

先看看QQ的效果：

當滑鼠懸浮在表情按鈕之上顯示小表情視窗，點選動態顯示正常表情視窗，再點選隱藏視窗。表面上看起來這幾個動作很簡單，但是要想控制好著實不易，下面直接上程式碼。

程式碼之路

//顯示小視窗
void EmotionWindow::showSmallEmotion(QPoint point)
{
    m_normalEmotionWidget->setVisible(false);
    m_smallEmotionWidget->
 
setVisible(true);
    m_lableTitle->setText("This is Small Emotion Window");
    this->resize(QSize(m_smallEmotionWidget->width() + 20, m_smallEmotionWidget->height() + 50));
    move(point.x() - width() / 2, point.y() - height());
    show();
    activateWindow();
}

//從小視窗變換至大視窗效果顯示
void EmotionWindow::showNormalEmotion
 
(QPoint point)
{   
    //將小表情視窗和文字提示隱藏
    m_lableTitle->setVisible(false);
    m_smallEmotionWidget->setVisible(false);
    show();
    activateWindow();
    //動畫顯示
    QPropertyAnimation *pAnimation = new QPropertyAnimation(this, "geometry");
    QPoint startPoint(point.x() - width() / 2, point.
 
y() - height());
    QPoint endPoint(point.x() - m_normalEmotionWidget->width() / 2, point.y() - m_normalEmotionWidget->height() - 50);
    // 動畫顯示時長
    pAnimation->setDuration(200);
    // 視窗變換起始尺寸
    pAnimation->setStartValue(QRect(startPoint.x(), startPoint.y(), width(), height()));
    // 視窗變換結束尺寸
    pAnimation->setEndValue(QRect(endPoint.x(), endPoint.y(), m_normalEmotionWidget->width() + 20, m_normalEmotionWidget->height() + 50));
    // 變換效果型別
    pAnimation->setEasingCurve(QEasingCurve::Linear);
    pAnimation->start(QAbstractAnimation::DeleteWhenStopped);
    // 動畫效果顯示結束顯示正常的視窗
    connect(pAnimation, SIGNAL(finished()), this, SLOT(onAnimationFinished()));
}

//動畫顯示結束，顯示正常的視窗
void EmotionWindow::onAnimationFinished()
{
    m_lableTitle->setVisible(true);
    m_normalEmotionWidget->setVisible(true);    
    m_lableTitle->setText("This is Normal Emotion Window");
}

bool EmotionWindow::eventFilter(QObject *obj, QEvent *event)
{
    // 呼叫activeWindow()方法後進入
    if (QEvent::WindowActivate == event->type())
    {
        qDebug() << "WindowActivate_____________";
    }
    // 視窗失去焦點後進入（這裡用來當滑鼠點選表情視窗外的其他部分自動隱藏表情視窗）
    else if (QEvent::WindowDeactivate == event->type())
    {
        this->hide();
        qDebug() << "WindowDeactivate___________";
    }
    return __super::eventFilter(obj , event);
}

看一下效果圖：

以上給出了關鍵的幾個方法，具體滑鼠點選按鈕、懸浮在按鈕上等顯示不同的視窗由於還存在一些小問題，暫不給出具體實現，在下一篇中將完善實現完整效果，敬請期待！

尾

——掐指一算，已經20天沒有更新部落格了，這20天說忙也忙，說不忙也不忙。時間永遠都是海綿中的水，還是在於自己的掌控。Keep Coding ， Keep Moving —— Every Day !