Qt实现移入移出与淡入淡出效果

来源：互联网发布：淘宝上靠谱的韩代店编辑：程序博客网时间：2024/04/29 07:06

在用Qt做一些客户端时，经常需要实现循环播放一组图文，实现一些广告、步骤引导等效果；

而直接切换又比较生硬，需要加上一些常用的效果，比如淡入淡出效果、平移效果(移入移出)等等；

可以使用QMovie与QGraphicsOpacityEffect与定时器QTimer可以实现这样的效果，可以按你所需，自由实现这些效果；

这里给出一个例子，主要实现了淡入淡出效果与平移效果(上下左右自由组合)：

#ifndef SWITCHPICTURE_H#define SWITCHPICTURE_H#include <QTimer>#include <QWidget>#include <QGraphicsOpacityEffect>#include <QLabel>#include <QMovie>enum CTRLTYPE//控件类型，图片与文字{    TEXT,    IMAGE};enum MOVEWAY//平移类型{    NONE,    LEFTTORIGHT,    RIGHTTOLEFT,    UPTODOWN,    DOWNTOUP};class SwitchPicture : public QWidget{    Q_OBJECTpublic:    explicit SwitchPicture(CTRLTYPE CtrlType = TEXT, QTimer *tm_switch = NULL, QWidget *parent = 0);public:    QTimer    *tm_switch;//示意图文切换定时器    CTRLTYPE  CtrlType;public:    QLabel    *lb_picture;//示意图    QMovie    *mv_media;//多媒体播放    long      switchmsec;//示意图切换定时器切换间隔(毫秒数)    long      staymsec;//示意图停留时间(毫秒数)    QGraphicsOpacityEffect *pictureeffect;//示意图透明度样式    double    opacity;//透明度值    double    opacityinterval;//淡入淡出透明度变化间隔    long      switchcase;//淡入淡出中间状态标志    long      switchturn;//示意图标号    long      pageindex;//页面序号{0,1,2...}    QList<QList<QString>> pictureresourceslist;//示意图与文字说明容器    MOVEWAY   movein;    MOVEWAY   moveout;public:    //*初始化与切换*//    void initPage(long pageindex);//初始化页面：停止计时器，初始化示意图与文字提示，然后初始化画面效果    void initOpacityWithTimer();//初始化画面效果，并打开计时器开启切换效果    void switchToNext(long nextturn);//切换到对应图片或文字    void setPictureOpacity();//设置透明度与位移效果    //*设置切换效果参数*//    void setOpacityInterval(double opacityinterval = 0.05);//设置透明度渐变粒度    void setSwitchMsec(long switchmsec = 30, long staymsec = 3000);//设置渐变计时器时间与停留时间    void addPictureResources(QList<QString> reslist);//添加播放图集    void clearPictureResources();//清空播放图集    void setTextStyle(QFont font, QPalette palette);//设置文字显示时的字体与颜色    void setMoveWay(MOVEWAY movein, MOVEWAY moveout);//设置移入移出的方向signals:public slots:    void on_pictureswitching();//切换响应事件protected:    virtual void resizeEvent(QResizeEvent *event);};#endif // SWITCHPICTURE_H

#include "SwitchPicture.h"SwitchPicture::SwitchPicture(CTRLTYPE CtrlType, QTimer *tm_switch, QWidget *parent) :    QWidget(parent),    tm_switch(tm_switch),    CtrlType(CtrlType),    movein(NONE),    moveout(NONE),    opacityinterval(0.05),    switchmsec(30),    staymsec(3000){    if (parent)    {        this->setGeometry(QRect(0,0,parent->width(),parent->height()));    }    //示意图    lb_picture = new QLabel(this);    lb_picture->setAlignment(Qt::AlignCenter);    lb_picture->setGeometry(QRect(0,0,this->width(),this->height()));    //多媒体播放    mv_media = new QMovie(this);    lb_picture->setMovie(mv_media);    if (!this->tm_switch)    {        this->tm_switch = new QTimer(this);    }    connect(this->tm_switch, SIGNAL(timeout()), this, SLOT(on_pictureswitching()));    pictureeffect = new QGraphicsOpacityEffect();//示意图透明度样式}//初始化页面：停止计时器，初始化示意图与文字提示，然后初始化画面效果void SwitchPicture::initPage(long pageindex){    //重置定时器以及相关参数    tm_switch->stop();    this->pageindex = pageindex;    if (pictureresourceslist.length() > pageindex)    {        if (pictureresourceslist[pageindex].length() > 0)        {            switch(CtrlType)            {            case TEXT:                lb_picture->setText(pictureresourceslist[pageindex][0]);                break;            case IMAGE:                mv_media->stop();                mv_media->setFileName(pictureresourceslist[pageindex][0]);                mv_media->start();                //lb_picture->setPixmap(QPixmap(pictureresourceslist[pageindex][0]));                break;            default:                break;            }            initOpacityWithTimer();        }    }}//初始化画面效果，并打开计时器开启切换效果void SwitchPicture::initOpacityWithTimer(){    switchturn = 0;//示意图标号    opacity = 1.0;//透明度值    switchcase = 0;//淡入淡出中间状态标志    setPictureOpacity();    if (pictureresourceslist.length() > pageindex && pictureresourceslist[pageindex].length() > 1)    {        tm_switch->start(staymsec);    }}//切换响应事件void SwitchPicture::on_pictureswitching(){    if (pictureresourceslist.length() > pageindex)    {        if (pictureresourceslist[pageindex].length() - switchturn > 1)        {            switchToNext(switchturn + 1);        }        else        {            switchToNext(0);        }    }}//切换到对应图片与文字void SwitchPicture::switchToNext(long nextturn){    if (opacity > 0.0)    {        tm_switch->setInterval(switchmsec);        if (switchcase == 0)        {            opacity -= opacityinterval;        }        else        {            opacity += opacityinterval;        }        setPictureOpacity();        if (opacity == 1.0)        {            switchturn = nextturn;            switchcase = 0;            tm_switch->setInterval(staymsec);        }    }    else    {        QString resstr = pictureresourceslist[pageindex][nextturn];        switch(CtrlType)        {        case TEXT:            lb_picture->setText(resstr);            break;        case IMAGE:            mv_media->stop();            mv_media->setFileName(resstr);            mv_media->start();            //lb_picture->setPixmap(QPixmap(resstr));            break;        default:            break;        }        switchcase = 1;        if (movein == NONE)//防止移出后没有移入，图片显示不出来        {            lb_picture->setGeometry(QRect(0, 0, lb_picture->width(), lb_picture->height()));        }        opacity += opacityinterval;        setPictureOpacity();    }}//设置透明度与位移效果void SwitchPicture::setPictureOpacity(){    //*淡入淡出效果*************************************************//    pictureeffect->setOpacity(opacity);    lb_picture->setGraphicsEffect(pictureeffect);    //*移入移出效果*************************************************//    if (switchcase == 0)    {//opacity:1->0        switch(moveout)        {        case NONE:            break;        case LEFTTORIGHT:            lb_picture->setGeometry(QRect(lb_picture->width() * (1.0 - opacity), 0, lb_picture->width(), lb_picture->height()));            break;        case RIGHTTOLEFT:            lb_picture->setGeometry(QRect(lb_picture->width() * (opacity - 1.0), 0, lb_picture->width(), lb_picture->height()));            break;        case UPTODOWN:            lb_picture->setGeometry(QRect(0, lb_picture->height() * (1.0 - opacity), lb_picture->width(), lb_picture->height()));            break;        case DOWNTOUP:            lb_picture->setGeometry(QRect(0, lb_picture->height() * (opacity - 1.0), lb_picture->width(), lb_picture->height()));            break;        default:            break;        }    }    else    {//opacity:0->1        switch(movein)        {        case NONE:            break;        case LEFTTORIGHT:            lb_picture->setGeometry(QRect(lb_picture->width() * (opacity - 1.0), 0, lb_picture->width(), lb_picture->height()));            break;        case RIGHTTOLEFT:            lb_picture->setGeometry(QRect(lb_picture->width() * (1.0 - opacity), 0, lb_picture->width(), lb_picture->height()));            break;        case UPTODOWN:            lb_picture->setGeometry(QRect(0, lb_picture->height() * (opacity - 1.0), lb_picture->width(), lb_picture->height()));            break;        case DOWNTOUP:            lb_picture->setGeometry(QRect(0, lb_picture->height() * (1.0 - opacity), lb_picture->width(), lb_picture->height()));            break;        default:            break;        }    }}void SwitchPicture::setOpacityInterval(double opacityinterval)//设置透明度渐变粒度{    this->opacityinterval = opacityinterval;}void SwitchPicture::setSwitchMsec(long switchmsec, long staymsec)//设置渐变计时器时间与停留时间{    this->switchmsec = switchmsec;    this->staymsec = staymsec;}void SwitchPicture::addPictureResources(QList<QString> reslist)//添加播放图集{    this->pictureresourceslist.push_back(reslist);}void SwitchPicture::clearPictureResources()//清空播放图集{    this->pictureresourceslist.clear();}void SwitchPicture::setTextStyle(QFont font, QPalette palette)//设置文字显示时的字体与颜色{    lb_picture->setFont(font);    lb_picture->setPalette(palette);}void SwitchPicture::setMoveWay(MOVEWAY movein, MOVEWAY moveout)//设置移入移出的方向{    this->movein = movein;    this->moveout = moveout;}void SwitchPicture::resizeEvent(QResizeEvent *event){    lb_picture->setGeometry(QRect(0,0,this->width(),this->height()));    this->QWidget::resizeEvent(event);}

这里用QMovie是为了兼容gif动态图片，也可以根据所需，修改成其它Qwidget的子类；比如对话框、登陆框等等；

2 0