简述

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

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

Vc++ - qt -仿照微信项目- 表情窗口设计
分享的力量是无穷的,在csdn上搜索关于表情窗口的设计,偶然发现之前有人做过关于表情这方面的工作,博主:前行中的小猪,相关系列文章 <<QQ之系统表情>>,这里提供<&l ...
Qt工作笔记-Qt元对象系统解析【2合1】
博文转载地址: https://blog.csdn.net/spwper/article/details/51332187 说Qt信号与槽是一个很好机制,不如说Qt的元对象系统很强大.这也是大家讲Qt ...
[练习]QQ/微信表情收藏-测试用例的编写 [简洁思路]
QQ电脑版添加表情: 微信添加表情: 手机版QQ添加表情: 总结上次经验,这次可以分成几个方向进行测试用例编写: 1. 功能方面 :正常的功能能不能正常使用,图片上限 2. 性能方面 :网络.时间.类 ...
Pango+Qt 列举windows系统字体
欢迎关注公众号可以查看更多完整文章可以显示Windows上所安装的所有字体的名称. 使用Qt显示数量和名称. 需要依赖Pango.Cairo.glib三个库,获取三个库,获取可以参见我的其他博客. ...
Qt 实现 QQ 9.0 新版登录窗口
简述 QQ的界面又进行了一波更新,登录界面的样式换了一种全新的效果.一直很喜欢QQ的界面,所以进行了一波模仿. 点击登录,登录成功之后,右侧会出现一条伸出的竖线,然后窗口会自动向右移动直到窗口完全隐藏 ...
Qt模仿QQ聊天窗口界面（二）
Qt模仿QQ聊天窗口界面(二) Qt模仿QQ聊天窗口界面(二) 简述修改效果图后期规划代码结尾简述在上篇我们已经搭好了QQ聊天窗口的框架,这里在原来的基础上叠加功能,以及优化一些控件. ...
一种用QT实现即时通信软件表情发送与接收的思路
一种用QT实现即时通信软件表情发送与接收的思路最近需要使用QT为项目添加一个表情包发送与接受的功能,虽然之前知道表情发送与接收显示的一个基本原理,但是其中涉及到例如表情包插入到QTextEdit如何 ...
如何在线制作QQ微信表情包
不知道大家有没有在聊天时看见朋友发来自己的表情包?很好奇他们是怎么制作的?今天,手把手教大家如何制作表情包,以后在微信.QQ聊天的时候,你也可以发出属于你自己的表情包了. 其实很简单的下面就开始制作我 ...
【原创】QT在嵌入式系统中显示中文的方法
[原创]QT在嵌入式系统中显示中文的方法此篇文章主要借鉴:http://zzqh007.blog.163.com/blog/static/44434847201011312168296/ 移植QT4 ...
实现类似微博、QQ空间等的动态加载
微博.QQ空间等的动态加载方式属于滚屏加载技术,获取当前滚动条位置来触发onscroll()函数,向服务器发起请求,将请求得到的新的数据动态加载在页面上本文利用该原理实现了动态加载,但不是检测当前滚 ...

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

简述

代码之路

尾

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

最新文章

热门文章