devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Qt动画效果

作者：小丑西瓜9 | 2024-02-14 20:24:56

赞

踩

qt动画效果

文章目录

一、前言

记录下自己使用过程中用到过的动画效果。

提示：以下是本篇文章正文内容，下面案例可供参考

代码如下（示例）：

1.包含头文件

#include <QLabel>
#include <QPropertyAnimation>
#include <QParallelAnimationGroup>

  • 1
  • 2
  • 3

2.效果展示

在这里插入图片描述

														切页右滑动

  • 1

请添加图片描述

														开门切换效果

  • 1

请添加图片描述

二、窗口动画效果

1.软件启动动画效果

代码如下（示例）：

//桌面宽度
int CommonlyUsed::deskWidth()
{
    return qApp->desktop()->availableGeometry().width();
}
//桌面高度
int CommonlyUsed::deskHeight()
{
    return qApp->desktop()->availableGeometry().height();
}
//软件窗口渐进开启
void MainWindow::Software_startup_animation()
{
    //界面动画,窗口右移
    QPropertyAnimation *anim1 = new QPropertyAnimation(this,"pos");
    anim1->setDuration(800);                                //动画持续时间
    anim1->setStartValue(QPoint(deskWidth()/2 - this->width(),deskHeight()/2 - this->height()/2));
    anim1->setEndValue(QPoint(deskWidth()/2 - this->width()/2,deskHeight()/2 - this->height()/2));
    anim1->setEasingCurve(QEasingCurve::Linear);            //设置速度曲线

    //界面动画,渐显效果
    QPropertyAnimation *anim2 = new QPropertyAnimation(this, "windowOpacity");
    anim2 ->setDuration(800);            //动画持续时间
    anim2 ->setStartValue(0);            //设置初始值
    anim2 ->setEndValue(1);              //设置结束值(0-1,透明度由完全透明→不透明)

    //创建并行动画组
    QParallelAnimationGroup *group = new QParallelAnimationGroup(this);
    group->addAnimation(anim1);    //动画组移动动画
    group->addAnimation(anim2);    //动画组添加透明-显现动画   
    group->start(QAbstractAnimation::DeleteWhenStopped);    //动画组中的动画执行完毕后删除对象
}

//界面动画,窗口下降
void MainWindow::Window_down()
{
    QPropertyAnimation *anim1 = new QPropertyAnimation(this,"pos");
    anim1->setDuration(800);
    anim1->setStartValue(QPoint(this->x(),this->y() - this->height()));
    anim1->setEndValue(QPoint(this->x(),this->y()));
    anim1->setEasingCurve(QEasingCurve::Linear);            //设置速度曲线
}
//界面动画,窗口下坠
void frmMain::onDropWindow()
{
    QPropertyAnimation *pAnimation = new QPropertyAnimation(this, "geometry");
    QDesktopWidget *pDesktopWidget = QApplication::desktop();
    int x = (pDesktopWidget->availableGeometry().width() - width()) / 2;
    int y = (pDesktopWidget->availableGeometry().height() - height()) / 2;
    pAnimation->setDuration(1500);
    pAnimation->setStartValue(QRect(x, 0, width(), height()));
    pAnimation->setEndValue(QRect(x, y, width(), height()));
    pAnimation->setEasingCurve(QEasingCurve::OutElastic);
    pAnimation->start(QAbstractAnimation::DeleteWhenStopped);
}
//窗口抖动动画
void MainWindow::ShakeAnimation()
{
    //设置软件在桌面的中心位置
    this->setGeometry(qApp->desktop()->availableGeometry().width()/2 - this->width()/2,
                      qApp->desktop()->availableGeometry().height()/2 - this->height()/2,
                      this->width(),this->height());
    m_animation = new QPropertyAnimation(this,"pos");
    //获取坐标
    QPoint pos = this->pos();
    //动画还没有结束就先立马停止，防止用户不停的点击
    if(m_animation->state() == QPropertyAnimation::Running)
    {
        m_animation->stop();
    }
    m_animation->setDuration(600);
    m_animation->setStartValue(pos);
    m_animation->setKeyValueAt(0.1,pos + QPoint(-12,-12));
    m_animation->setKeyValueAt(0.2,pos + QPoint(0,-4));
    m_animation->setKeyValueAt(0.3,pos + QPoint(4,0));
    m_animation->setKeyValueAt(0.4,pos + QPoint(4,2));
    m_animation->setKeyValueAt(0.5,pos + QPoint(6,-6));
    m_animation->setKeyValueAt(0.6,pos + QPoint(-4,4));
    m_animation->setKeyValueAt(0.7,pos + QPoint(-4,0));
    m_animation->setKeyValueAt(0.8,pos + QPoint(0,8));
    m_animation->setKeyValueAt(0.9,pos + QPoint(12,12));
    m_animation->setEndValue(pos);
    m_animation->start();
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84

2.软件关闭动画效果

代码如下（示例）：

//关闭动画
void MainWindow::closeMainInterface()
{
    //界面动画,窗口下坠
    QPropertyAnimation* closeAnimation = new QPropertyAnimation(this,"geometry");
    closeAnimation->setStartValue(geometry());
    closeAnimation->setEndValue(QRect(geometry().x(),geometry().y()+height(),width(),0));
    closeAnimation->setDuration(600);
    closeAnimation->setEasingCurve(QEasingCurve::Linear);   //设置速度曲线

    //界面动画,消失效果
    QPropertyAnimation *WindowDisappear_animation = new QPropertyAnimation(this, "windowOpacity");
    WindowDisappear_animation->setDuration(600);
    WindowDisappear_animation->setStartValue(1);
    WindowDisappear_animation->setEndValue(0);

    //创建并行动画组
    QParallelAnimationGroup *group = new QParallelAnimationGroup(this);
    group->addAnimation(closeAnimation);    //动画组添加移动动画
    group->addAnimation(WindowDisappear_animation);         //动画组添加透明-显现动画
    group->start(QAbstractAnimation::DeleteWhenStopped);    //动画组中的动画执行完毕后删除对象
    connect(group, &QParallelAnimationGroup::finished, this, &MainWindow::myCloseWindow); //关闭动画完成后再退出软件
}

//关闭
void MainWindow::myCloseWindow()
{
    QApplication* app;
    app->exit(0);
}

//窗口中心式关闭
void MainWindow::closeAnimation()
{
    setMinimumHeight(1);
    QPropertyAnimation* closeAnimation = new QPropertyAnimation(parentWidget,"geometry");
    closeAnimation->setStartValue(geometry());
    closeAnimation->setEndValue(QRect(geometry().x(),geometry().y()+height()/2,width(),1));
    closeAnimation->setDuration(500);
    closeAnimation->setEasingCurve(QEasingCurve::Linear);
    QPropertyAnimation *WindowDisappear_animation = new QPropertyAnimation(parentWidget, "windowOpacity");
    WindowDisappear_animation->setDuration(500);
    WindowDisappear_animation->setStartValue(1);
    WindowDisappear_animation->setEndValue(0);
    QParallelAnimationGroup *group = new QParallelAnimationGroup(parentWidget);
    group->addAnimation(closeAnimation);
    group->addAnimation(WindowDisappear_animation);
    group->start(QAbstractAnimation::DeleteWhenStopped);
    connect(group, &QParallelAnimationGroup::finished, this, [=](){
        QApplication *app;
        app->quit();
    });
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

anim1->setEasingCurve(QEasingCurve::Linear);
请添加图片描述

三、stackedWidget界面切换的简单动画效果

1.函数实现

代码如下（示例）：

//界面切换动画
void MainWindow::Interface_Switching_Animation(int m_currentIndex)
{
	#if 0
    //截取整个图片并向右边移动
    {
    	*QLabel *m_label = new QLabel(ui->stackedWidget);
    	m_label->resize(QSize(ui->stackedWidget->width(),ui->stackedWidget->height()));
    	m_label->setPixmap(ui->stackedWidget->grab());  //捕获当前界面并绘制到label上
    	m_label->setAttribute(Qt::WA_DeleteOnClose);	//设置属性（关闭时删除）
    	m_label->show();								
    	QPropertyAnimation *animation1 = new QPropertyAnimation(m_label,"geometry");
    	animation1->setDuration(1000);  //设置动画时间为1秒
    	animation1->setStartValue(QRect(0,0,ui->stackedWidget->width(),ui->stackedWidget->height()));
    	animation1->setEndValue(QRect(ui->stackedWidget->width()*2,0,ui->stackedWidget->width(),ui->stackedWidget->height()));
    	animation1->setEasingCurve(QEasingCurve::InCubic);   //设置速度曲线(先慢后快)
    	QParallelAnimationGroup *group = new QParallelAnimationGroup;  //并行动画容器(这里只用了一个动画，可以自己添加动画后再添加到并行动画容器中实现多动画效果)
    	group->addAnimation(animation1);
    	group->start(QAbstractAnimation::DeleteWhenStopped);
    	ui->stackedWidget->setCurrentIndex(m_currentIndex);				//切换到对应的界面
    	m_label->raise();       //把label置顶显示
    	connect(group, &QParallelAnimationGroup::finished, this, [=](){m_label->close();}); //关闭动画完成后关闭label
    }
    #endif
} 

#if 1
    //开门动画
    {
        QLabel *m_label = new QLabel(ui->stackedWidget_matrix);
        m_label->resize(QSize(ui->stackedWidget_matrix->width()/2,ui->stackedWidget_matrix->height()));
        m_label->setAttribute(Qt::WA_DeleteOnClose);

        //裁剪截取到的图片，只复制图片左边一半
        QPixmap pix = ui->stackedWidget_matrix->grab();
        QPixmap pixleft = pix.copy(0,0,ui->stackedWidget_matrix->width()/2,ui->stackedWidget_matrix->height());
        m_label->setPixmap(pixleft);  //捕获当前界面并绘制到label上
        m_label->show();


        QLabel *m_label1 = new QLabel(ui->stackedWidget_matrix);
        m_label1->resize(QSize(ui->stackedWidget_matrix->width()/2,ui->stackedWidget_matrix->height()));
        m_label1->setAttribute(Qt::WA_DeleteOnClose);

        //裁剪截取到的图片，只复制图片右边边一半
        QPixmap pixright = pix.copy(ui->stackedWidget_matrix->width()/2,0,ui->stackedWidget_matrix->width()/2,ui->stackedWidget_matrix->height());
        m_label1->setPixmap(pixright);  //捕获当前界面并绘制到label上
        m_label1->show();


        //左边图片向左移动
        QPropertyAnimation *animation1 = new QPropertyAnimation(m_label,"geometry");
        animation1->setDuration(1500);  //设置动画时间为1.5秒
        animation1->setStartValue(QRect(0,0,ui->stackedWidget_matrix->width()/2,ui->stackedWidget_matrix->height()));
        animation1->setEndValue(QRect(-ui->stackedWidget_matrix->width()*2,0,ui->stackedWidget_matrix->width()/2,ui->stackedWidget_matrix->height()));
        animation1->setEasingCurve(QEasingCurve::InCubic);   //设置速度曲线(先慢后快)

        //右边图片向右移动
        QPropertyAnimation *animation2 = new QPropertyAnimation(m_label1,"geometry");
        animation2->setDuration(1500);  //设置动画时间为1.5秒
        animation2->setStartValue(QRect(ui->stackedWidget_matrix->width()/2,0,ui->stackedWidget_matrix->width()/2,ui->stackedWidget_matrix->height()));
        animation2->setEndValue(QRect(ui->stackedWidget_matrix->width()*2,0,ui->stackedWidget_matrix->width()/2,ui->stackedWidget_matrix->height()));
        animation2->setEasingCurve(QEasingCurve::InCubic);   //设置速度曲线(先慢后快)

        QParallelAnimationGroup *group = new QParallelAnimationGroup;  //并行动画容器
        group->addAnimation(animation1);		//添加动画
        group->addAnimation(animation2);
        group->start(QAbstractAnimation::DeleteWhenStopped);
        ui->stackedWidget_matrix->setCurrentIndex(m_currentIndex);
        //把label置顶显示
        m_label->raise();
        m_label1->raise();
        connect(group, &QParallelAnimationGroup::finished, this, [=](){m_label->close();m_label1->close();}); //关闭动画完成后再退出软件
    }
    #endif

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75

四、更新一版stackedWidget界面切换的简单动画效果，原地址：https://www.jb51.net/article/254239.htm

1.函数实现

.h文件中添加

public Q_SLOTS:
    void onslotBtnPre();	//翻到上一页
    void onslotBtnNext();	//翻到下一页
private:
    bool m_bDonghua = false;
    int NextIndex = 0;
    QStackedWidget *inputOutputSettingStackedWidget;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

.cpp文件中添加

void InputOutputSettingsWidget::initData()
{
    inputOutputSettingStackedWidget = new QStackedWidget(this);
    inputOutputSettingStackedWidget->setObjectName("inputOutputSettingStackedWidget");
    QWidget *networkSetupWidget = new QWidget(inputOutputSettingStackedWidget);
    QWidget *videoSetupWidget = new QWidget(inputOutputSettingStackedWidget);
    QWidget *audioSetupWidget = new QWidget(inputOutputSettingStackedWidget);
    QWidget *osdSetupWidget = new QWidget(inputOutputSettingStackedWidget);
    QWidget *kvmSetupWidget = new QWidget(inputOutputSettingStackedWidget);
    QWidget *baseMapSetupWidget = new QWidget(inputOutputSettingStackedWidget);
    QWidget *advancedSetupWidget = new QWidget(inputOutputSettingStackedWidget);
    inputOutputSettingStackedWidget->addWidget(networkSetupWidget);
    inputOutputSettingStackedWidget->addWidget(videoSetupWidget);
    inputOutputSettingStackedWidget->addWidget(audioSetupWidget);
    inputOutputSettingStackedWidget->addWidget(osdSetupWidget);
    inputOutputSettingStackedWidget->addWidget(kvmSetupWidget);
    inputOutputSettingStackedWidget->addWidget(baseMapSetupWidget);
    inputOutputSettingStackedWidget->addWidget(advancedSetupWidget);
    inputOutputSettingStackedWidget->setCurrentIndex(0);
    for (int i = 0; i < 7; i++){
        QPushButton *but = new QPushButton(this);
        but->setProperty("Type", "InputConfigurationBut");
        but->setFixedHeight(25);
        but->setMinimumWidth(70);
        topRightButList.append(but);
    }
    topRightButList.at(0)->setText(tr("网络设置"));
    topRightButList.at(1)->setText(tr("视频设置"));
    topRightButList.at(2)->setText(tr("音频设置"));
    topRightButList.at(3)->setText(tr("OSD台标"));
    topRightButList.at(4)->setText(tr("KVM设置"));
    topRightButList.at(5)->setText(tr("底图设置"));
    topRightButList.at(6)->setText(tr("高级功能"));
    foreach (QPushButton *but, topRightButList) {
        connect(but, &QPushButton::clicked, this, &InputOutputSettingsWidget::onBarBtnClick);
    }
}
void InputOutputSettingsWidget::onBarBtnClick()
{
	if(but == topRightButList.at(0)){
        qDebug()<< "网络设置";
        NextIndex = 0;
        pageTurningMode();
    }
    else if(but == topRightButList.at(1)){
        qDebug()<< "视频设置";
        NextIndex = 1;
        pageTurningMode();
    }
    else if(but == topRightButList.at(2)){
        qDebug()<< "音频设置";
        NextIndex = 2;
        pageTurningMode();
    }
    else if(but == topRightButList.at(3)){
        qDebug()<< "OSD台标";
        NextIndex = 3;
        pageTurningMode();
    }
    else if(but == topRightButList.at(4)){
        qDebug()<< "KVM设置";
        NextIndex = 4;
        pageTurningMode();
    }
    else if(but == topRightButList.at(5)){
        qDebug()<< "底图设置";
        NextIndex = 5;
        pageTurningMode();
    }
    else if(but == topRightButList.at(6)){
        qDebug()<< "高级功能";
        NextIndex = 6;
        pageTurningMode();
    }
}
void InputOutputSettingsWidget::onslotBtnPre()
{
    if (m_bDonghua) {
        return;
    }
    m_bDonghua = true;
    int currentIndex = inputOutputSettingStackedWidget->currentIndex();
    int windowWidth = inputOutputSettingStackedWidget->widget(currentIndex)->width();
    int windowHieght = inputOutputSettingStackedWidget->widget(currentIndex)->height();
    if (currentIndex == 0) {
        return;
    }
    inputOutputSettingStackedWidget->setCurrentIndex(NextIndex);
    inputOutputSettingStackedWidget->widget(currentIndex)->show();
    QPropertyAnimation* animation1;
    QPropertyAnimation* animation2;
    QParallelAnimationGroup* group = new QParallelAnimationGroup;
    animation1 = new QPropertyAnimation(inputOutputSettingStackedWidget->widget(currentIndex), "geometry");
    animation1->setDuration(500);
    animation1->setStartValue(QRect(0, 0, windowWidth, windowHieght));
    animation1->setEndValue(QRect(windowWidth, 0, windowWidth, windowHieght));

    animation2 = new QPropertyAnimation(inputOutputSettingStackedWidget->widget(NextIndex), "geometry");
    animation2->setDuration(500);
    animation2->setStartValue(QRect(-windowWidth, 0, windowWidth, windowHieght));
    animation2->setEndValue(QRect(0, 0, windowWidth, windowHieght));

    group->addAnimation(animation1);
    group->addAnimation(animation2);
    group->start(QAbstractAnimation::DeleteWhenStopped);
    group->setProperty("widget", QVariant::fromValue(inputOutputSettingStackedWidget->widget(currentIndex)));
    connect(group, &QParallelAnimationGroup::finished, this, &InputOutputSettingsWidget::onAnimationFinished);
}

void InputOutputSettingsWidget::onslotBtnNext()
{
    if (m_bDonghua) {
        return;
    }
    m_bDonghua = true;
    int currentIndex = inputOutputSettingStackedWidget->currentIndex();
    int windowWidth = inputOutputSettingStackedWidget->widget(currentIndex)->width();
    int windowHieght = inputOutputSettingStackedWidget->widget(currentIndex)->height();
    if (currentIndex >= inputOutputSettingStackedWidget->count()) {
        return;
    }
    inputOutputSettingStackedWidget->setCurrentIndex(NextIndex);
    inputOutputSettingStackedWidget->widget(currentIndex)->show();
    QPropertyAnimation* animation1;
    QPropertyAnimation* animation2;
    QParallelAnimationGroup* group = new QParallelAnimationGroup;
    animation1 = new QPropertyAnimation(inputOutputSettingStackedWidget->widget(currentIndex), "geometry");
    animation1->setDuration(500);
    animation1->setStartValue(QRect(0, 0, windowWidth, windowHieght));
    animation1->setEndValue(QRect(-windowWidth, 0, windowWidth, windowHieght));

    animation2 = new QPropertyAnimation(inputOutputSettingStackedWidget->widget(NextIndex), "geometry");
    animation2->setDuration(500);
    animation2->setStartValue(QRect(windowWidth, 0, windowWidth, windowHieght));
    animation2->setEndValue(QRect(0, 0, windowWidth, windowHieght));

    group->addAnimation(animation1);
    group->addAnimation(animation2);
    group->start(QAbstractAnimation::DeleteWhenStopped);
    group->setProperty("widget", QVariant::fromValue(inputOutputSettingStackedWidget->widget(currentIndex)));
    connect(group, &QParallelAnimationGroup::finished, this, &InputOutputSettingsWidget::onAnimationFinished);
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142

2.效果展示

请添加图片描述

总结

简单记录下我使用过的动画效果，方便之后需要时查看。

  • 1
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/81406?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号