Qt 之 QQ系统表情—实现动态显示效果

简述

在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 !