Qt动画效果

置顶 已于 2024-01-22 15:11:56 修改
阅读量5.7k 收藏 123
点赞数 17
文章标签： 动画 qt 开发语言
于 2022-05-09 12:12:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46246664/article/details/124633447
版权

文章目录

一、前言

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

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

代码如下（示例）：

1.包含头文件

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

2.效果展示

在这里插入图片描述

														切页右滑动

请添加图片描述

														开门切换效果

请添加图片描述

二、窗口动画效果

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();
}

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();
    });
}

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

四、更新一版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;

.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);
}

2.效果展示

请添加图片描述

总结

简单记录下我使用过的动画效果，方便之后需要时查看。
今汐我大老婆
关注
  • 17
    点赞
  • 踩
  • 123
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Qt动画的简单使用（QPropertyAnimation，含源码和注释）
热门推荐
lw的博客
03-23 1万+
一、Qt动画示例图（移动、缩放、不透明度） 下图为使用不同属性实现的效果（源码在本文第四节） 二、什么是Qt动画 QPropertyAnimation是Qt自带的动画类，该类可以实现简单的控件动画效果，比如对控件的移动、缩放、不透明度这些来做动画效果（使用某效果之前需要使用setPropertyName函数指定需要的动画属性名，以下三个是Qt已经定义好的）。 移动（pos）：主要实现移动效果，如从某个点移动到另一个点，所使用的变量类型为QPoint等。 缩放（geometry）：可实现缩放和移动效果，该
Qt中实现让静态图片动起来，创建动画效果
最新发布
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
07-11 960
Python Imaging Library（PIL）是一个非常流行的Python库，用于处理图像。尽管它的名字仍然广泛使用，但实际上，PIL已经被其分支Pillow所取代，Pillow不仅提供了PIL的所有特性，还增加了更多功能和对最新Python版本的支持。安装主要功能Pillow库支持多种图像处理功能，包括但不限于：读取和保存图像：支持多种图像格式，如JPEG、PNG、BMP、GIF、TIFF等。基本操作：裁剪、旋转、翻转图像，调整图像大小，改变图像模式（如灰度、RGB、CMYK）。
Qt动画效果展示
01-01
展示了Qt动画的使用，效果非常炫 详见博客：http://blog.csdn.net/caoshangpa/article/details/53964789
Qt利用帧动画实现所有动画效果(QWidget)
05-23
对应博文地址：http://blog.csdn.net/CSND_Ayo/article/details/70175385
Qt之动画效果
m0_60259116的博客
01-11 1413
Qt之动画效果
qt 动画效果
liangqiuJL的博客
01-06 1151
http://jingyan.baidu.com/article/154b46315757b628ca8f4116.html 如前面所讲，QPropertyAnimation类可以修改Qt属性们。要动画一个值，就需要使用此类。实际上，它的父类，QVariantAnimation，是一个虚拟类，不能被直接使用。     1、我们选择动画Qt属性的一个主要理由是Qt属性为我们提供了自己
Qt动画效果实现
12-05
在本文中，我们将深入探讨如何在Qt环境中实现各种动画效果，包括Widget属性动画，如位移、缩放和不透明度动画。Qt是一个强大的跨平台应用程序开发框架，它提供了丰富的功能来创建美观且动态的用户界面。让我们一起...
Qt自定义控件动画效果按钮
03-25
本文将深入探讨如何在Qt中为按钮添加动画效果，以增强用户界面的交互性和吸引力。 首先，我们需要了解Qt中的QGraphicsView和QGraphicsItem体系，这是实现动画效果的基础。QGraphicsView提供了一个二维图形视图框架...
QT-lineEidte动画效果
02-22
QT-lineEdit动画效果是Qt库中的一个特性，用于在用户交互时为lineEdit组件添加动态视觉效果，提升用户体验。Qt是一个跨平台的C++图形用户界面应用程序开发框架，它提供了丰富的UI元素和强大的功能，包括动画系统。在...
用Qt动画框架设计飞入-消失特效（演示程序）
05-08
此资源是演示程序，大家可以免积分下载。 ------------------------------------------------- Qt动画框架很强大，只要你想得到，它就有可能帮你实现。这一次我将抽取上一个演示程序的部分来进行介绍。这一部分我命名为“飞入 - 消失”特效，主要用在文字的显示方面，从这点上说很像PowerPoint上面特效的一种。
qt动画实现
12-20
qt利用自带movie实现动画背景，以及动态变化显示文本颜色
qt 动画效果启动酷炫界面
09-12
1. **QPropertyAnimation**：这个类是Qt动画系统的核心，它可以对任何公开的Q_PROPERTY进行动画处理。例如，你可以动画化一个QWidget的透明度、位置、大小等属性，以实现平滑的淡入淡出、移动或缩放效果。要创建一个...
Qt Quick实现一个炫酷的折叠动画效果
03-19
本文将深入探讨如何使用Qt Quick实现一个炫酷的折叠动画效果，这通常用于增强应用的用户体验和视觉吸引力。 首先，理解Qt Quick的基础是至关重要的。Qt Quick是一种声明式语言，它允许开发者通过定义UI元素的属性和...
qt动画按钮
03-21
在Qt框架中，动画效果是通过...这就是如何在Qt 5.0环境中实现“qt动画按钮”的基本步骤。你可以根据需要调整动画的参数，如持续时间、动画曲线类型，甚至添加更多的动画效果，如颜色变化，以满足不同的界面设计需求。
Qt 动画效果
qq_24127015的博客
11-16 612
https://www.jianshu.com/p/0050eae56929?tdsourcetag=s_pcqq_aiomsg
qt控件动画效果
cqltbe131421的博客
08-02 4108
#ifndef TERMINAL_H #define TERMINAL_H #include &lt;QMouseEvent&gt; #include &lt;QShowEvent&gt; #include &lt;QPaintEvent&gt; #include &lt;QBrush&gt; #include &lt;QHash&gt; #include &lt;QPushBu...
qt动画效果_Qml特效5-进场动画-百叶窗
05-24
QML中可以通过使用动画来实现各种特效，包括进场动画。其中，百叶窗特效是一种常见的进场动画，可以让界面元素以一定的节奏和方式出现。下面是一个简单的实现示例： ```qml import QtQuick 2.0 Rectangle { width: 300 height: 300 color: "white" Repeater { model: 5 Image { id: image source: "image.png" width: parent.width / 5 height: parent.height x: index * width clip: true transform: Scale { id: scale origin.x: width / 2 origin.y: height / 2 xScale: 1 yScale: 0 } Behavior on transform { PropertyAnimation { duration: 500 easing.type: Easing.InOutQuad } } } } Component.onCompleted: { for (var i = 0; i < repeater.count; i++) { var image = repeater.itemAt(i); image.scale.y = 1; } } } ``` 在这个示例中，我们使用了一个Repeater来创建了5个相同的Image元素，每个元素的宽度都是父元素宽度的1/5。我们将这些元素放置在一起，然后通过使用clip属性来将它们裁剪成相同大小。接着，我们为每个元素添加了一个缩放变换，初始时y轴的比例为0，这样它们就会“收缩”起来。最后，在组件完成时，我们将每个元素的缩放比例y设置为1，这样它们就会“展开”出现。 在这个示例中，我们使用了PropertyAnimation来控制变换的动画效果。该动画持续500ms，并且使用了Easing.InOutQuad缓动函数，使它看起来更加平滑。你可以根据需要对这些参数进行调整，以达到更好的效果。 总体来说，百叶窗特效是一种简单而又实用的进场动画，可以轻松地让你的应用程序变得更加生动有趣。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值