太阳神三国杀中,每当玩家出杀或吃桃子时,就会有一个动画效果,使界面非常生动绚丽.现在我们就分析一下QT中动画的原理,及实现方式,这里我们只分析吃桃子时的动画效果实现.由于三国杀有多个在线玩家同时游戏,因此当一个玩家吃了桃子,会将这个消息发送给服务器,服务器在分别通知每个在线玩家,使玩家界面出现吃桃子的动画.现在我们来跟踪一下代码的执行流程.
在NativeClientSocket::init()成员函数中,关联QtcpSocket的readyRead信号与其处理槽函数:connect(socket, SIGNAL(readyRead()), this, SLOT(getMessage()));在getMessage()函数中,每接收一条消息就触发message_got信号,Client类的构造函数中关联这个信号connect(socket, SIGNAL(message_got(char*)), this, SLOT(processServerPacket(char*)));在processServerPacket函数中,判断消息如果不是通知或请求,则调用processReply方法.在processReply方法中,判断消息字符串的首个字符,并根据消息内容查找对应的处理函数,此时消息内容为"animate",因此转而调用animate方法.这里有个小技巧,因为服务端和客户端之间的通信内容时字符串,那么如何根据发送的字符串找到相应的处理函数呢?将函数的名称和函数地址映射存入了一个QHash<QString, Callback> callbacks;成员变量中,在Client类的构造函数中进行初始化.
callbacks["addHistory"] = &Client::addHistory;
callbacks["animate"] = &Client::animate;
callbacks["judgeResult"] = &Client::judgeResult;
callbacks["setScreenName"] = &Client::setScreenName;
callbacks["setFixedDistance"] = &Client::setFixedDistance;
callbacks["transfigure"] = &Client::transfigure;
callbacks["jilei"] = &Client::jilei;
callbacks["cardLock"] = &Client::cardLock;
callbacks["pile"] = &Client::pile; ...... ......
其中Callback的定义为:typedef void (Client::*Callback)(const QString &);在根据函数名称查找函数地址时,只需要使用QHash类的value方法获取,而后调用:
Callback callback = callbacks.value(method, NULL);
if(callback){
QString arg_str = arg;
(this->*callback)(arg_str);//注意调用方式为(this->*callback)(参数列表),表示调用的是一个类实例(this)的成员函数,因为callback为函数指针,加星号降引用(好像可不加星号而直接调用,没有测试过).
现在就可以进入Client::animate成员函数了.解析出服务端发送的名称,及参数,触发animated信号.
void Client::animate(const QString &animate_str){
QStringList args = animate_str.split(":");
QString name = args.takeFirst();
emit animated(name, args);
}
在RoomScene构造函数中,关联了animated信号及处理槽:connect(ClientInstance, SIGNAL(animated(QString,QStringList)), this, SLOT(doAnimation(QString,QStringList)));doAnimation函数首先定义了一个静态QMap变量,并在首次调用的时候进行设置,将一个字符串命令与一个函数地址向映射,原理与callbacks相同,实现延时加载的目标,提高软件启动速度.接着根据传入的name参数到map中查找对应的函数地址,并调用.
void RoomScene::doAnimation(const QString &name, const QStringList &args){
static QMap<QString, AnimationFunc> map;
if(map.isEmpty()){
map["peach"] = &RoomScene::doAppearingAnimation;
map["jink"] = &RoomScene::animatePopup;
map["nullification"] = &RoomScene::doMovingAnimation;
map["analeptic"] = &RoomScene::doAppearingAnimation;
map["fire"] = &RoomScene::doAppearingAnimation;
map["lightning"] = &RoomScene::doAppearingAnimation;
map["typhoon"] = &RoomScene::doAppearingAnimation;
map["lightbox"] = &RoomScene::doLightboxAnimation;
map["huashen"] = &RoomScene::doHuashen;
map["indicate"] = &RoomScene::doIndicate;
map["hpChange"] = &RoomScene::animateHpChange;
}
AnimationFunc func = map.value(name, NULL);
if(func)
(this->*func)(name, args);
}
根据name的值可知,接下来调用了RoomScene::doAppearingAnimation成员函数,转而又调用了setEmotion函数.
if(name == "analeptic"
|| name == "peach")
{
setEmotion(args.at(0),name);
return;
}
setEmotion首先根据参数who获取对应的座位对象photo,如果找到座位则在对手的座位上播放动画,否则在本地的控制区播放动画.
void RoomScene::setEmotion(const QString &who, const QString &emotion ,bool permanent){
Photo *photo = name2photo[who];
if(photo){
photo->setEmotion(emotion,permanent);
return;
}
PixmapAnimation * pma = PixmapAnimation::GetPixmapAnimation(dashboard,emotion);
if(pma)
{
pma->moveBy(0,- dashboard->boundingRect().height()/2);
pma->setZValue(8.0);
}
}
先看setEmotion方法,参数emotion是动画名称,对应image/system/emotion/目录中的一个子目录名称,permanent指示是否永久播放动画.emotion_item是QGraphicsPixmapItem类型的指针,设置其显示,在其上播放动画,如果不是永久播放的动画则使用QTimer在2秒后隐藏动画图元emotion_item.接着就调用PixmapAnimation的静态成员函数GetPixmapAnimation来播放动画了.注意PixmapAnimation类是从QGraphicItem继承的(class PixmapAnimation : public QObject,public QGraphicsItem),动画的原理就是在桌位上创建一个PixmapAnimation实例,并使用计时器定时触发调用paint方法,在其上绘制不同的图片.
void Photo::setEmotion(const QString &emotion, bool permanent){
this->permanent = permanent;
if(emotion == "."){
emotion_item->hide();
return;
}
QString path = QString("image/system/emotion/%1.png").arg(emotion);//这个图片路径如果不存在,则emotion_item不生效.
emotion_item->setPixmap(QPixmap(path));
emotion_item->show();
if(emotion == "question" || emotion == "no-question")
return;
if(!permanent)
QTimer::singleShot(2000, this, SLOT(hideEmotion()));
PixmapAnimation::GetPixmapAnimation(this,emotion);
}
GetPixmapAnimation是一个静态函数,首先创建一个新的PixmapAnimation实例pma,并设置其图片所在路径加载路径中的图片,设置动画播放的位置,最后调用基类QObject的startTimer函数设置计时器,每50毫秒触发一次,动画完成时触发QObject的deleteLater函数,延时删除自己(在对象退出消息循环后进行自我删除).
PixmapAnimation* PixmapAnimation::GetPixmapAnimation(QGraphicsObject *parent, const QString &emotion)
{
PixmapAnimation *pma = new PixmapAnimation();
pma->setPath(QString("image/system/emotion/%1/").arg(emotion));
if(pma->valid())
{
if(emotion == "slash_red" ||
emotion == "slash_black" ||
emotion == "thunder_slash" ||
emotion == "peach" ||
emotion == "analeptic")
{
pma->moveBy(pma->boundingRect().width()*0.15,
pma->boundingRect().height()*0.15);
pma->setScale(0.7);
}
else if(emotion == "no-success")
{
pma->moveBy(pma->boundingRect().width()*0.15,
pma->boundingRect().height()*0.15);
pma->setScale(0.7);
}
pma->moveBy((parent->boundingRect().width() - pma->boundingRect().width())/2,
(parent->boundingRect().height() - pma->boundingRect().height())/2);
{
if(emotion == "fire_slash")pma->moveBy(40,0);
}
pma->setParentItem(parent);
pma->startTimer(50);
connect(pma,SIGNAL(finished()),pma,SLOT(deleteLater()));
return pma;
}
else
{
delete pma;
return NULL;
}
}
接着就进入了timerEvent函数,这是一个QObject定义的虚函数,如果对象调用了startTimer则会定时触发timerEvent,这里将其重写.
void PixmapAnimation::timerEvent(QTimerEvent *)
{
advance(1);
}
advance成员函数累加current成员变量,记录当前帧,调用update方法触发paint函数的调用,如果帧数超过总帧数,则重置为0,并触发finished信号.
void PixmapAnimation::advance(int phase)
{
if(phase)current++;
if(current>=frames.size())
{
current = 0;
emit finished();
}
update();
}
paint函数则直接根据current成员变量值获取对应的帧图片,进行绘制.frames的定义为QList<QPixmap> frames;在PixmapAnimation::setPath函数中,将指定路径中的所有png图片都加载到frames中.为了提高图片加载速度,setPath函数中加载图片是调用GetFrameFromCache从缓存中查找图片,如果没有则从磁盘上加载并存入缓存,QPixmapCache是提供这个功能的核心类.
void PixmapAnimation::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{
painter->drawPixmap(0,0,frames.at(current));
}
QPixmap PixmapAnimation::GetFrameFromCache(const QString &filename){
QPixmap pixmap;
if(!QPixmapCache::find(filename, &pixmap)){
pixmap.load(filename);
if(!pixmap.isNull())
QPixmapCache::insert(filename, pixmap);
}
return pixmap;
}
