Qt 动画3d轮播图片切换，使用Animation动画方式

最新推荐文章于 2024-07-14 08:00:00 发布
最新推荐文章于 2024-07-14 08:00:00 发布
阅读量1.7k 收藏 12
点赞数
分类专栏： QT开发 文章标签： animation Qt5 类 C++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peppereggfriedrice/article/details/107221787
版权

之前看到有人用 QGraphicsView实现了轮播图的效果，想着能不能简易一点用qt的动画类实现呢？

先上效果图：

效果还行，直接上代码吧，代码如下。大家可以根据自己的需求完善一下切换的point和线性动画属性。

MainWindow::MainWindow(QWidget *parent)
    :QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
    QGraphicsView
}

void MainWindow::slot_statechange1(QAbstractAnimation::State newState, QAbstractAnimation::State oldState)
{
    if(newState ==QAbstractAnimation::State::Running && oldState ==QAbstractAnimation::State::Stopped)
    {
        ui->label_1->raise(); //label置顶
    }
    else if(newState ==QAbstractAnimation::State::Stopped && oldState ==QAbstractAnimation::State::Running)
    {
      ui->label_2->lower();//label下移
      ui->label_3->lower();
    }
}

void MainWindow::slot_statechange2(QAbstractAnimation::State newState, QAbstractAnimation::State oldState)
{
    if(newState ==QAbstractAnimation::State::Running && oldState ==QAbstractAnimation::State::Stopped)
    {
        ui->label_2->raise();
    }
    else if(newState ==QAbstractAnimation::State::Stopped && oldState ==QAbstractAnimation::State::Running)
    {
      ui->label_3->lower();
      ui->label_1->lower();
    }
}

void MainWindow::slot_statechange3(QAbstractAnimation::State newState, QAbstractAnimation::State oldState)
{
    if(newState ==QAbstractAnimation::State::Running && oldState ==QAbstractAnimation::State::Stopped)
    {
       ui->label_3->raise();
    }
    else if(newState ==QAbstractAnimation::State::Stopped && oldState ==QAbstractAnimation::State::Running)
    {
      ui->label_1->lower();
      ui->label_2->lower();
    }
}

void MainWindow::on_pushButton_clicked()
{
    const QRect mid     (120, 0, 450,140);
    const QRect right_0(240, 0, 450,140);
    const QRect right_1(286, 14, 405,126);
    const QRect left_0   (0, 14, 405,126);
    const QRect left_1   (0, 0, 450, 140);

    const int stoptime = 4500; //中间暂停时间

    //--------------

    QPropertyAnimation *animation_label_1_0 = new QPropertyAnimation(ui->label_1, "geometry");
    QPropertyAnimation *animation_label_1_1 = new QPropertyAnimation(ui->label_1, "geometry");
    QPropertyAnimation *animation_label_1_2 = new QPropertyAnimation(ui->label_1, "geometry");
    QPropertyAnimation *animation_label_1_3 = new QPropertyAnimation(ui->label_1, "geometry");
    QPropertyAnimation *animation_label_1_4 = new QPropertyAnimation(ui->label_1, "geometry");

    //此信号槽用于控件的前后顺序
    connect(animation_label_1_4,&QPropertyAnimation::stateChanged, this ,&MainWindow::slot_statechange1);

    animation_label_1_0->setDuration(1000);
    animation_label_1_0->setStartValue(mid);
    animation_label_1_0->setEndValue(right_0);
    animation_label_1_0->setLoopCount(1);

    animation_label_1_1->setDuration(1000);
    animation_label_1_1->setStartValue(right_0);
    animation_label_1_1->setEndValue(right_1);
    animation_label_1_1->setLoopCount(1);

    animation_label_1_2->setDuration(2000);
    animation_label_1_2->setStartValue(right_1);
    animation_label_1_2->setEndValue(left_0);
    animation_label_1_2->setLoopCount(1);

    animation_label_1_3->setDuration(1000);
    animation_label_1_3->setStartValue(left_0);
    animation_label_1_3->setEndValue(left_1);
    animation_label_1_3->setLoopCount(1);

    animation_label_1_4->setDuration(1000);
    animation_label_1_4->setStartValue(left_1);
    animation_label_1_4->setEndValue(mid);
    animation_label_1_4->setLoopCount(1);

    animation_label_1_0->setEasingCurve(QEasingCurve::OutSine); //动画类型
    animation_label_1_1->setEasingCurve(QEasingCurve::OutSine);
    animation_label_1_2->setEasingCurve(QEasingCurve::OutSine);
    animation_label_1_3->setEasingCurve(QEasingCurve::OutSine);
    animation_label_1_4->setEasingCurve(QEasingCurve::OutSine);

    QSequentialAnimationGroup *pPosGroup_label_1 = new QSequentialAnimationGroup(this);
    pPosGroup_label_1->addAnimation(animation_label_1_0);
    pPosGroup_label_1->addAnimation(animation_label_1_1);
    pPosGroup_label_1->addPause(stoptime);
    pPosGroup_label_1->addAnimation(animation_label_1_2);
    pPosGroup_label_1->addPause(stoptime);
    pPosGroup_label_1->addAnimation(animation_label_1_3);
    pPosGroup_label_1->addAnimation(animation_label_1_4);
    pPosGroup_label_1->addPause(stoptime);
    pPosGroup_label_1->setLoopCount(1);

    //--------------------

    QPropertyAnimation *animation_label_2_0 = new QPropertyAnimation(ui->label_2, "geometry");
    QPropertyAnimation *animation_label_2_1 = new QPropertyAnimation(ui->label_2, "geometry");
    QPropertyAnimation *animation_label_2_2 = new QPropertyAnimation(ui->label_2, "geometry");
    QPropertyAnimation *animation_label_2_3 = new QPropertyAnimation(ui->label_2, "geometry");
    QPropertyAnimation *animation_label_2_4 = new QPropertyAnimation(ui->label_2, "geometry");

    connect(animation_label_2_1,&QPropertyAnimation::stateChanged, this ,&MainWindow::slot_statechange2);

    animation_label_2_0->setDuration(1000);
    animation_label_2_0->setStartValue(left_0);
    animation_label_2_0->setEndValue(left_1);
    animation_label_2_0->setLoopCount(1);

    animation_label_2_1->setDuration(1000);
    animation_label_2_1->setStartValue(left_1);
    animation_label_2_1->setEndValue(mid);
    animation_label_2_1->setLoopCount(1);

    animation_label_2_2->setDuration(1000);
    animation_label_2_2->setStartValue(mid);
    animation_label_2_2->setEndValue(right_0);
    animation_label_2_2->setLoopCount(1);

    animation_label_2_3->setDuration(1000);
    animation_label_2_3->setStartValue(right_0);
    animation_label_2_3->setEndValue(right_1);
    animation_label_2_3->setLoopCount(1);

    animation_label_2_4->setDuration(2000);
    animation_label_2_4->setStartValue(right_1);
    animation_label_2_4->setEndValue(left_0);
    animation_label_2_4->setLoopCount(1);

    animation_label_2_0->setEasingCurve(QEasingCurve::OutSine);
    animation_label_2_1->setEasingCurve(QEasingCurve::OutSine);
    animation_label_2_2->setEasingCurve(QEasingCurve::OutSine);
    animation_label_2_3->setEasingCurve(QEasingCurve::OutSine);
    animation_label_2_4->setEasingCurve(QEasingCurve::OutSine);

    QSequentialAnimationGroup *pPosGroup_label_2 = new QSequentialAnimationGroup(this);
    pPosGroup_label_2->addAnimation(animation_label_2_0);
    pPosGroup_label_2->addAnimation(animation_label_2_1);
    pPosGroup_label_2->addPause(stoptime);
    pPosGroup_label_2->addAnimation(animation_label_2_2);
    pPosGroup_label_2->addAnimation(animation_label_2_3);
    pPosGroup_label_2->addPause(stoptime);
    pPosGroup_label_2->addAnimation(animation_label_2_4);
    pPosGroup_label_2->addPause(stoptime);
    pPosGroup_label_2->setLoopCount(1);

    //---------------

    QPropertyAnimation *animation_label_3_0 = new QPropertyAnimation(ui->label_3, "geometry");
    QPropertyAnimation *animation_label_3_1 = new QPropertyAnimation(ui->label_3, "geometry");
    QPropertyAnimation *animation_label_3_2 = new QPropertyAnimation(ui->label_3, "geometry");
    QPropertyAnimation *animation_label_3_3 = new QPropertyAnimation(ui->label_3, "geometry");
    QPropertyAnimation *animation_label_3_4 = new QPropertyAnimation(ui->label_3, "geometry");
    connect(animation_label_3_2,&QPropertyAnimation::stateChanged, this ,&MainWindow::slot_statechange3);

    animation_label_3_0->setDuration(2000);
    animation_label_3_0->setStartValue(right_1);
    animation_label_3_0->setEndValue(left_0);
    animation_label_3_0->setLoopCount(1);

    animation_label_3_1->setDuration(1000);
    animation_label_3_1->setStartValue(left_0);
    animation_label_3_1->setEndValue(left_1);
    animation_label_3_1->setLoopCount(1);

    animation_label_3_2->setDuration(1000);
    animation_label_3_2->setStartValue(left_1);
    animation_label_3_2->setEndValue(mid);
    animation_label_3_2->setLoopCount(1);

    animation_label_3_3->setDuration(1000);
    animation_label_3_3->setStartValue(mid);
    animation_label_3_3->setEndValue(right_0);
    animation_label_3_3->setLoopCount(1);

    animation_label_3_4->setDuration(1000);
    animation_label_3_4->setStartValue(right_0);
    animation_label_3_4->setEndValue(right_1);
    animation_label_3_4->setLoopCount(1);

    animation_label_3_0->setEasingCurve(QEasingCurve::OutSine);
    animation_label_3_1->setEasingCurve(QEasingCurve::OutSine);
    animation_label_3_2->setEasingCurve(QEasingCurve::OutSine);
    animation_label_3_3->setEasingCurve(QEasingCurve::OutSine);
    animation_label_3_4->setEasingCurve(QEasingCurve::OutSine);

    QSequentialAnimationGroup *pPosGroup_label_3 = new QSequentialAnimationGroup(this);
    pPosGroup_label_3->addAnimation(animation_label_3_0);
    pPosGroup_label_3->addPause(stoptime);

    pPosGroup_label_3->addAnimation(animation_label_3_1);
    pPosGroup_label_3->addAnimation(animation_label_3_2);
    pPosGroup_label_3->addPause(stoptime);

    pPosGroup_label_3->addAnimation(animation_label_3_3);
    pPosGroup_label_3->addAnimation(animation_label_3_4);
    pPosGroup_label_3->addPause(stoptime);
    pPosGroup_label_3->setLoopCount(1);

    QParallelAnimationGroup *m_group;
    m_group = new QParallelAnimationGroup(this);
    m_group->addAnimation(pPosGroup_label_1);
    m_group->addAnimation(pPosGroup_label_2);
    m_group->addAnimation(pPosGroup_label_3);

    m_group->setDirection(QAbstractAnimation::Forward);
    m_group->setLoopCount(-1); //无限循环
    m_group->start();
}

 

工程已上传：https://download.csdn.net/download/PepperEggFriedRice/12593588

PepperEggFriedRice
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QT实现3D图像切换（广告切图效果）
qq_42570058的博客
06-28 944
最近在做一个界面设计，看到一个大神雨田哥实现了一个酷炫图像,拜读代码之后发现能力不够，没有根据其代码复刻出来，自己琢磨了一下利用QTimer、QLabel、QPropertyAnimation实现了一个简单的效果。 效果展示： 主要思想就是：拆解。将每个步骤进行拆分，假设有三张图像，首先在ui中添加三个QLabel将其排号序。接下来就该思考，图像切换顺序就是1-2 、2-3、 3-1；2-3、3-1、1-2；3-1、2-1、2-3；一个循环完成。知道怎么切换，然后就是...
Qt3DAnimation_example2
08-12
Qt3DAnimation_example2
【Qt】Qt属性动画
最新发布
一点一点变好
07-14 1125
Qt动画框架提供了一种对 GUI 元素进行动画处理的简单方法，它使开发者能够对Widget或QObject的 Qt 属性值进行动画处理，该框架提供的大多数功能在Qt Quick中也可用，可以在其中以声明方式定义动画。在本概述中，我们将解释了其体系结构的基础， 并且提供一些的最常见动画处理技术的示例。
Qt Quick 3D系列（四）：为三维模型添加动画效果
zjgo007的专栏
02-16 2620
Qt Quick 3D旨在让那些熟悉QML开发的人能够使用非常少的学习成本实现3D开发，因此对于三维模型动画没有类似与Qt 3D中有个专门的Qt3DAnimation来控制动画效果，而是直接使用QML中的Animation对三维模型中属性进行控制，是不是很赞，下面介绍如何使用NumberAnimation控制摄像机自动旋转。
Qt：在QML中使用Animator，让动画无卡顿
Jason’s home
08-31 7400
之前有说如果使用Qt的PropertyAnimation做Material曲线动画。 传送门：```http://blog.csdn.net/wsj18808050/article/details/72869043``` PropertyAnimation是Qt提供的属性动画，用的非常广泛。可以适用于很多场合，比如说X的移动，甚至自定义属性的修改。他还有很多派生类，比如说NumberAnimation、Color
嵌入式系统大作业——基于QT的3D模型展示
Scizhen的博客
04-10 3770
在Linux中利用QT设计一款可以显示3D模型的界面，并通过浏览本地文件夹打开指定的3D模型。可以通过键盘对模型进行操作，实现模型的平移、旋转、缩放这三大基本功能，并且可以通过改变灯光位置，在不同角度对模型进行渲染展示。
记一次QT 2D 画图 实现3D动态效果
qq_39304481的博客
07-26 1013
最近在学习古老的QT开发手册，其中有一节是使用QT画图来实现正弦函数的小demo,稍微改变了一点，结果实现的结果超出了预期的想象，实现了3D的效果特此记录 //头文件 class drawDemo : public QWidget { Q_OBJECT public: explicit drawDemo(QWidget *parent = nullptr); ~drawDemo(); public slots: void flushBuff(); protected:
qt动画轮播图.rar
07-09
它是Qt动画框架的基础，提供了一种通用的方式来控制时间序列的行为。通过继承QAbstractAnimation，我们可以自定义动画的各个阶段，如开始、更新和结束。在这个轮播图项目中，我们将创建一个自定义的动画类，用于控制...
qt实现轮播图，包含左右切换和选中切换。
weixin_43246170的博客
04-25 790
qt实现轮播图，包含左右切换和选中切换。 该动画使用到串行动画和并行动画。 大致思路：按钮滚动使用的串行动画，图片滚动使用的并行动画。 #ifndef UANIMAYION_H #define UANIMAYION_H #include <QWidget> #include <QTimer> #include <QPropertyAnimation> #include <QSequentialAnimationGroup> #include <QPa
QML-轮播效果图-3D轮播效果效果图
11-24
在本文中，我们将深入探讨QML（Qt Meta Language）中的轮播效果，特别是3D轮播效果的实现，这是对UI设计的一种高级应用，适用于创建动态、吸引人的用户界面。QML是Qt框架的一部分，它提供了一种声明式语言来构建用户...
Qt/C++编写自定义控件24-图片轮播控件
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
06-08 2674
一、前言 上一篇文章写的广告轮播控件，采用的传统widget堆积设置样式表做的，这次必须要用到更高级的QPainter来绘制了，这个才是最高效的办法，本控件参考雨田哥的轮播控件，经过大规模的改造而成，相比于原来的广告轮播控件，本控件可以说完爆他，按在地上使劲摩擦。除了可以设置图片路径集合以外，还可以设置对应的提示信息，这个在众多的web轮播图片效果中最常见，比如新闻的标题等，可以更直观的显示当前图...
QT绘制3D效果
11-14
使用QT5绘制3D模型，代码很详细，使用QT5.3编译后即可运行
Qt Creator中的3D绘图及动画教程(参照NeHe)（所有的资源文件）
05-25
Qt Creator中的3D绘图及动画教程(参照NeHe)（所有的资源文件）！！！！！
QT连续显示多幅图片看起来像动画
12-14
在window的qt creator平台上开发的，qt定时器的方法连续播放几幅图片看起来像动画，而且运行时外围的窗体都被透明化了，只有显示破壳而出的小鸡的动画，在你的桌面上随意拖动。
使用QPropertyAnimation实现图片播放
跬步至千里
06-15 500
Qt实现图片切换动画
Qt 3D教程（四）结合Qt Quick来实现动画的效果
开发游戏，辉煌全中国
07-29 1万+
上篇教程已经给大家带来较为实用的效果了，这回我们尝试载入两个模型，并且让PhongMaterial成为它们的共享材质，此外，我们通过借助QtQuick的动画框架来让我们的三维场景动起来！
Qt绘制旋转的轮播图
龚建波
10-31 2597
目前见的比较多的轮播图有平移和旋转两种方式。平移类似淘宝那种切换幻灯片一样的效果，旋转一般是近大远小，看起来有点3D的感觉。本文代码实现旋转轮播图效果如下完整代码链接。
Qt之实现图片轮播效果
热门推荐
前行之路还需前行
01-31 2万+
一、简述 今天文章讲述的是如何用Qt实现图片轮播的效果，其实我们经常在网页中看到各种广告就是使用了图片轮播，实现小区域内嵌入多个广告的效果。 下面是CSDN页面中两种常见的图片轮播效果。基本上就是定时自动切换广告页面，或者手动点击选择切换页面。 其实实现起来也不难，只要使用Qt的动画类即可实现类似的效果。之前做了一个，效果不佳，今天重新写了一遍，实现了类似上面第一种的效果，通过Qt
Qt-4.6动画Animation快速入门三字决
decajes的专栏
06-03 786
Qt-4.6动画Animation快速入门三字决 Qt-4.6新增了Animation Framework(动画框架),让我们能够方便的写一些生动的程序。不必像以前的版本一样，所有的控件都枯燥的呆在伟大光荣的QLayout里，也许它们可以唱个歌，跳个舞。     所谓动画就是在一个时间段内的不同时间点有不同的状态，只要定义好这样状态，实现动画就是水到渠成的事情。当然做这件事情，最好用的
qt 图片轮播动画效果
07-15
最后，为了完成图片轮播动画效果，我们可以通过循环遍历图片列表，在每次定时器超时时切换到下一张图片，并应用相应的动画效果。 ### 回答3： Qt是一款跨平台的开源C++框架，它提供了丰富的图形界面和多媒体处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值