QT实现3D图像切换（广告切图效果）

        最近在做一个界面设计，看到一个大神雨田哥实现了一个酷炫图像,拜读代码之后发现能力不够，没有根据其代码复刻出来，自己琢磨了一下利用QTimer、QLabel、QPropertyAnimation实现了一个简单的效果。

效果展示：

        主要思想就是：拆解。将每个步骤进行拆分，假设有三张图像，首先在ui中添加三个QLabel将其排号序。接下来就该思考，图像切换顺序就是1-2 、2-3、 3-1；2-3、3-1、1-2；3-1、2-1、2-3；一个循环完成。知道怎么切换，然后就是把动画加进去就行。其中需要注意的是每一步将中间的图像放在最上层。

主要代码（三个函数就可以搞定）：

void Widget::init(){

    r1.setRect(ui->labe_1->x(),ui->labe_1->y(),ui->labe_1->width(),ui->labe_1->height());
    r2.setRect(ui->labe_2->x(),ui->labe_2->y(),ui->labe_2->width(),ui->labe_2->height());
    r3.setRect(ui->labe_3->x(),ui->labe_3->y(),ui->labe_3->width(),ui->labe_3->height());
    mTimer=new QTimer();
    mTimer->setInterval(1500);
    connect(mTimer,SIGNAL(timeout()),this,SLOT(satrtAnimate_Time()));


}

void Widget::satrtAnimate_Time()
{
    if(flag==0){
        animation(ui->labe_1,r1,r2,true);
        animation(ui->labe_2,r2,r3);
        animation(ui->labe_3,r3,r1);
        flag++;
    }else if (flag==1) {
        animation(ui->labe_1,r2,r3);
        animation(ui->labe_2,r3,r1);
        animation(ui->labe_3,r1,r2,true);
        flag++;
    }
    else if(flag==2)
    {
        animation(ui->labe_1,r3,r1);
        animation(ui->labe_2,r1,r2,true);
        animation(ui->labe_3,r2,r3);
        flag=0;
    }
    //    qDebug()<<flag<<endl;
}

void Widget::animation(QObject *target,QRect startRect,QRect endRect,bool isRaise){
    QPropertyAnimation *a = new QPropertyAnimation(target, "geometry");
    a->setDuration(1000);
    a->setStartValue(startRect);
    a->setEndValue(endRect);
    a->setEasingCurve(QEasingCurve::OutQuad);
    a->start();
    QLabel* lab=dynamic_cast<QLabel*>(target);
    if(isRaise){
        lab->raise();//最上层
    }
}

根据上面代码就可以弄出来的，也可以直接从这下载源代码（缺积分。。）：

https://download.csdn.net/download/qq_42570058/19874177