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 !