Qt中使用动画组管理动画的状态

已于 2024-01-16 07:38:45 修改
阅读量402 收藏 4
点赞数
分类专栏： Qt 6 qt5 c++ 文章标签： qt 动画
于 2021-09-25 11:00:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuishou1000/article/details/120462781
版权
c++ 同时被 3 个专栏收录
17 篇文章 1 订阅
订阅专栏
Qt 6
16 篇文章 1 订阅
订阅专栏
qt5
16 篇文章 1 订阅
订阅专栏

先上效果：

 工程下载地址：

https://download.csdn.net/download/shuishou1000/24589450

1，创建mainwindow工程，添加三个按钮（pushbutton）。

2，下一步，在mainWindow的构造函数中为每一个按钮添加动画。

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    //添加动画
    QPropertyAnimation *animation1=new QPropertyAnimation(ui->pushButton,"geometry");
    animation1->setDuration(3000);
    animation1->setStartValue(ui->pushButton->geometry());
    animation1->setEndValue(QRect(50,200,100,50));
    
    QPropertyAnimation *animation2=new QPropertyAnimation(ui->pushButton_2,"geometry");
    animation1->setDuration(3000);
    animation1->setStartValue(ui->pushButton_2->geometry());
    animation1->setEndValue(QRect(150,200,100,50));
    
    QPropertyAnimation *animation3=new QPropertyAnimation(ui->pushButton_3,"geometry");
    animation1->setDuration(3000);
    animation1->setStartValue(ui->pushButton_3->geometry());
    animation1->setEndValue(QRect(250,200,100,50));
}

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

3,继续添加曲线，为这三个按钮添加同样的曲线。

QEasingCurve curve;
curve.setType(QEasingCurve::OutBounce);
curve.setAmplitude(1.00);
curve.setOvershoot(1.70);
curve.setPeriod(0.30);

animation1->setEasingCurve(curve);
animation2->setEasingCurve(curve);
animation3->setEasingCurve(curve);

4，一旦三个动画都添加了缓动曲线，我们就可以将所有三个动画添加到一个动画组里

//QParallelAnimationGroup *group=new QParallelAnimationGroup;
QSequentialAnimationGroup *group=new QSequentialAnimationGroup;
group->addAnimation(animation1);
group->addAnimation(animation2);
group->addAnimation(animation3);

5,调用start(),启动刚刚创建的动画组。

group->start();

我们使用动画组启动动画。

动画顺序设置QParallelAnimationGroup是同时播放，QSequentialAnimationGroup是按添加动画的顺序播放

 //QParallelAnimationGroup *group=new QParallelAnimationGroup;
    QSequentialAnimationGroup *group=new QSequentialAnimationGroup;

因为QParallelAnimationGroup和QSequentialAnimationGroup都是继承子QAbstractAnimator类，所以，他们之间可以进行相互添加使用addAnimation.

QParallelAnimationGroup同时播放所有动画，以最长的动画为准。

QSequentialAnimationGroup 按照添加动画的顺序播放动画。只有当一个动画完成了，再播放另外的动画。

这两个组是目前QT提供的，他们控制动画的开始，暂停，结束，顺序。

动画嵌套组的通常使用方法是：将QParallelAnimationGroup放入到QSequentialAnimationGroup中，顺序播放一组一组的动画。 

举例说明

1，使用之前的例子多放入一些按钮。

2，为所有按钮添加动画和缓动曲线

    //添加动画
    QPropertyAnimation *animation1=new QPropertyAnimation(ui->pushButton,"geometry");
    animation1->setDuration(3000);
    animation1->setStartValue(ui->pushButton->geometry());
    animation1->setEndValue(QRect(50,50,100,50));

    QPropertyAnimation *animation2=new QPropertyAnimation(ui->pushButton_2,"geometry");
    animation2->setDuration(3000);
    animation2->setStartValue(ui->pushButton_2->geometry());
    animation2->setEndValue(QRect(150,50,100,50));

    QPropertyAnimation *animation3=new QPropertyAnimation(ui->pushButton_3,"geometry");
    animation3->setDuration(3000);
    animation3->setStartValue(ui->pushButton_3->geometry());
    animation3->setEndValue(QRect(250,50,100,50));

    QPropertyAnimation *animation4=new QPropertyAnimation(ui->pushButton_4,"geometry");
    animation4->setStartValue(ui->pushButton_4->geometry());
    animation4->setDuration(3000);
    animation4->setEndValue(QRect(50,200,100,50));

    QPropertyAnimation *animation5=new QPropertyAnimation(ui->pushButton_5,"geometry");
    animation5->setStartValue(ui->pushButton_5->geometry());
    animation5->setDuration(3000);
    animation5->setEndValue(QRect(150,200,100,50));

    QPropertyAnimation *animation6=new QPropertyAnimation(ui->pushButton_6,"geometry");
    animation6->setStartValue(ui->pushButton_6->geometry());
    animation6->setDuration(3000);
    animation6->setEndValue(QRect(200,200,100,50));


    //创建曲线控制器
    QEasingCurve curve;
    curve.setType(QEasingCurve::OutBounce);
    curve.setAmplitude(1.00);
    curve.setOvershoot(1.70);
    curve.setPeriod(0.30);

    animation1->setEasingCurve(curve);
    animation2->setEasingCurve(curve);
    animation3->setEasingCurve(curve);
    animation4->setEasingCurve(curve);
    animation5->setEasingCurve(curve);
    animation6->setEasingCurve(curve);

 3,添加动画组

//创建 动画组
    QParallelAnimationGroup *group=new QParallelAnimationGroup;
    QParallelAnimationGroup *group2=new QParallelAnimationGroup;

    QSequentialAnimationGroup *groupAll=new QSequentialAnimationGroup;
    group->addAnimation(animation1);
    group->addAnimation(animation2);
    group->addAnimation(animation3);

    group2->addAnimation(animation4);
    group2->addAnimation(animation5);
    group2->addAnimation(animation6);

4，嵌套动画组并播放

    groupAll->addAnimation(group);
    groupAll->addAnimation(group2);

    //启动动画
    groupAll->start();

效果：先播放上排按钮，再播放下排按钮。

待放动图。

通过动画组的代码设定可以完成复杂的GUI动画。更少的代码，更好的效果。

附录完整代码mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    //添加动画
    QPropertyAnimation *animation1=new QPropertyAnimation(ui->pushButton,"geometry");
    animation1->setDuration(3000);
    animation1->setStartValue(ui->pushButton->geometry());
    animation1->setEndValue(QRect(50,50,100,50));

    QPropertyAnimation *animation2=new QPropertyAnimation(ui->pushButton_2,"geometry");
    animation2->setDuration(3000);
    animation2->setStartValue(ui->pushButton_2->geometry());
    animation2->setEndValue(QRect(150,50,100,50));

    QPropertyAnimation *animation3=new QPropertyAnimation(ui->pushButton_3,"geometry");
    animation3->setDuration(3000);
    animation3->setStartValue(ui->pushButton_3->geometry());
    animation3->setEndValue(QRect(250,50,100,50));

    QPropertyAnimation *animation4=new QPropertyAnimation(ui->pushButton_4,"geometry");
    animation4->setStartValue(ui->pushButton_4->geometry());
    animation4->setDuration(3000);
    animation4->setEndValue(QRect(50,200,100,50));

    QPropertyAnimation *animation5=new QPropertyAnimation(ui->pushButton_5,"geometry");
    animation5->setStartValue(ui->pushButton_5->geometry());
    animation5->setDuration(3000);
    animation5->setEndValue(QRect(150,200,100,50));

    QPropertyAnimation *animation6=new QPropertyAnimation(ui->pushButton_6,"geometry");
    animation6->setStartValue(ui->pushButton_6->geometry());
    animation6->setDuration(3000);
    animation6->setEndValue(QRect(250,200,100,50));


    //创建曲线控制器
    QEasingCurve curve;
    curve.setType(QEasingCurve::OutBounce);
    curve.setAmplitude(1.00);
    curve.setOvershoot(1.70);
    curve.setPeriod(0.30);

    animation1->setEasingCurve(curve);
    animation2->setEasingCurve(curve);
    animation3->setEasingCurve(curve);
    animation4->setEasingCurve(curve);
    animation5->setEasingCurve(curve);
    animation6->setEasingCurve(curve);

    //创建 动画组
    QParallelAnimationGroup *group=new QParallelAnimationGroup;
    QParallelAnimationGroup *group2=new QParallelAnimationGroup;

    QSequentialAnimationGroup *groupAll=new QSequentialAnimationGroup;
    group->addAnimation(animation1);
    group->addAnimation(animation2);
    group->addAnimation(animation3);

    group2->addAnimation(animation4);
    group2->addAnimation(animation5);
    group2->addAnimation(animation6);

    groupAll->addAnimation(group);
    groupAll->addAnimation(group2);

    //启动动画
    groupAll->start();
}

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

欢迎关注公众号 “QML教程”，获取新的内容


​​​​​​​

飞驰的蜗牛牛
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt实现多组动画
07-16
用Qt动画机制编写的一个简单的动画程序，实现两组动画，一只小鸟和一头猪分别在窗体飞过，适合新手学习研究。
剖析 Qt 实现动画状态机实例
weixin_34166847的博客
10-23 192
Qt实现动画状态机实例是本文介绍的内容，Qt4.6引入了动画框架，摆脱了以往控件只能安静的呆在布局里的时代，利用Qt提供的动画框架，我们可以让控件跳起舞来，呵呵，很有趣啊… 在Qt 4.7中又引入了Qt quick技术，其中的QML语言也是专门来定制GUI动画效果的，这是一种新的GUI动画机制，我刚也接触了些，语法类似CSS，实现预定义的动画很方便，所见即所得，路还得一...
简单介绍一下Qt动画系统，并举例说明如何使用
CHNIM的博客
03-05 1196
Qt动画系统是Qt框架中的一部分，用于创建和管理动画效果。它提供了一种简单而强大的方式来实现动态图形效果，使得用户界面更加生动和交互。属性动画（Property Animation）：允许您对控件的属性进行动画处理，如位置、大小、颜色等。您可以通过指定起始值和目标值，以及动画的持续时间和插值函数来创建属性动画。并行动画（Parallel Animation）：允许多个动画同时进行，可以并行地对多个属性或对象进行动画处理。顺序动画（Sequential Animation）
Qt动画组
04-05 1351
Qt中的动画组是由QAnimationGroup抽象类来表示的。一个动画组是一个动画的容器。动画组一般负责管理它的动画的状态，也就是说由它决定，什么时候开始动画，什么时候停止动画，什么时候暂停动画，什么时候重新运行动画。目前，Qt中提供了两种动画组：并行动画组合串行动画组。
qt的动画和状态机
全栈工程师
08-04 1924
一 简介  动画框架用于创建的GUI ,它可以为GUI快速转换为柔和的画面及添加原色。可以在QT提供的控件，QObject派生的类控件等元素上使用动画效果。 状态机 即有限状态机，用于定义状态之间的移动，例如，开关的行为动作可以分为ON/OFF两种，根据其行为变为ON/OFF。如果使用状态机，则可以简单快捷地实现对动画的行为组合。 动画框架除了提供基于C++的GUI创建框架外，还提供可以再Q...
使用C++ Qt开发的大屏监控界面源码，主要展示动态表格，精美大屏状态，过度动画，滚动动画等
09-26
该界面采用Qt的UI框架进行开发，通过精心设计的UI元素和动态效果，... 总之，使用Qt开发的大屏监控界面，通过动态表格、精美大屏状态、过度动画和滚动动画等多种手段，为用户提供了一个功能强大、美观易用的监控平台。
Qt状态机实现动画
07-16
Qt使用状态机实现动画，代码简洁清晰，适合新手学习研究
基于QT实现贝塞尔曲线画炫酷的波浪动画+源码
最新发布
05-10
该项目实现了通过贝塞尔曲线画波浪动画，可控制 颜色+密度+速度+加速度 安装与运行环境 语言：C++ 框架：Qt 11.3 平台：Windows 将屏幕水平平均分为10块，在一定范围内随机高度的12个点（左右出头），通过贝塞尔...
QT QML 零基础动画教程
06-20
针对QML可视化组件的详细动画教程，零基础学习，系统性的介绍QML动画中，所涉及的状态、转换、及动画的相关概念，同时详细的说明了动画运作的三种方式，1、直接使用动画，2、通过转换使用动画，3、通过行为使用动画...
QTQML零基础动画教程-笔记.zip
06-05
针对QML可视化组件的详细动画教程，零基础学习，系统性的介绍QML动画中，所涉及的状态、转换、及动画的相关概念，同时详细的说明了动画运作的三种方式，1、直接使用动画，2、通过转换使用动画，3、通过行为使用动画...
Qt利用帧动画实现所有动画效果(QWidget)
05-23
对应博文地址：http://blog.csdn.net/CSND_Ayo/article/details/70175385
Qt多界面动画切换实现
06-02
Qt多界面切换实现，基于Qt5.9.1 LTS实现，界面是六方格形式
Qt动画组QAnimationGroup构建复杂的动画
fearlazy
02-21 2118
文章已更新，最新地址：http://www.fearlazy.com/index.php/post/114.html 在Qt中我们使用QPropertyAnimation就可以很轻松的实现动画效果，但是一个QPropertyAnimation只能绑定一个属性，也就是说只能用来展示某一个方面的动画效果。 然而在一些较为复杂的场景下单一个的动画效果就显得不够生动，这时候就需要多个QPrope...
Qt动画框架：动画分组示例
友善啊，朋友的博客
11-21 423
QParallelAnimationGroup：并行动画，组中的动画各自自行运行。 QSequentialAnimationGroup：串行动画，运行完一个下一个才运行。 QPropertyAnimation * animation = new QPropertyAnimation(ui->w, "widgetWidth"); animation->setDuration(3000); animation->setStartValue(100); an
Qt动画效果
weixin_46246664的博客
05-09 5418
记录下自己使用过程中用到过的动画效果。提示：以下是本篇文章正文内容，下面案例可供参考简单记录下我使用过的动画效果，方便之后需要时查看。
Qt之动画效果
热门推荐
玖零儛的博客
12-05 2万+
Qt自带的动画框架用来做简单的控件动画效果是比较简单易用的，像是对控件的位移、缩放、不透明度这些来做动画效果。
【Qt炫酷动画】4.QAnimationGroup动画组、QParallelAnimationGroup平行动画组、QSequentialAnimationGroup顺序动画组
小鱼酱的博客
08-19 468
QAnimationGroup动画组、QParallelAnimationGroup平行动画组、QSequentialAnimationGroup顺序动画组
Qt之对话框消失动画
weixin_34413357的博客
08-05 823
一、效果展示 　　最近做了一个提示框消失的功能，觉着挺有意思，以前一直以为Qt子窗口不能做淡出效果，其实Qt的淡出功能已经帮我们封装好了，我们仅仅只需要几行代码就可以做出酷炫的窗口关闭效果，写此篇文章的时候，我特意浏览了下之前写的两篇文章(QPainterPath 不规则提示框，QPainterPath 不规则提示框(二))，现在回想起来那会儿确实知之甚少，关于顶层窗口不能做圆角，其实帮助文档里...
Qt opengl assimp使用骨骼动画代码
05-20
以下是使用Qt、OpenGL和Assimp实现骨骼动画的示例代码： 首先，需要在项目中包含assimp库和Qt的OpenGL模块。可以使用以下命令将它们添加到.pro文件中： ``` LIBS += -lassimp QT += opengl ``` 然后，需要编写一个用于渲染模型的OpenGL窗口类。以下是一个简单的示例： ```cpp #include <QOpenGLWidget> #include <QOpenGLFunctions> #include <assimp/Importer.hpp> #include <assimp/scene.h> #include <assimp/postprocess.h> class OpenGLWidget : public QOpenGLWidget, protected QOpenGLFunctions { public: OpenGLWidget(QWidget *parent = 0); ~OpenGLWidget(); protected: void initializeGL(); void resizeGL(int w, int h); void paintGL(); private: Assimp::Importer m_importer; const aiScene *m_scene; }; ``` 在初始化函数中，需要加载模型并设置OpenGL状态： ```cpp void OpenGLWidget::initializeGL() { initializeOpenGLFunctions(); // Load model m_scene = m_importer.ReadFile("model.dae", aiProcess_Triangulate | aiProcess_GenSmoothNormals | aiProcess_FlipUVs | aiProcess_LimitBoneWeights); // Set up OpenGL state glEnable(GL_DEPTH_TEST); glDepthFunc(GL_LESS); glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); } ``` 在绘制函数中，需要遍历场景中的所有节点和网格，并计算每个节点的变换矩阵。以下是绘制函数的示例代码： ```cpp void OpenGLWidget::paintGL() { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Set up camera glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (double)width() / (double)height(), 0.1, 100.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); // Draw meshes for (unsigned int i = 0; i < m_scene->mNumMeshes; i++) { const aiMesh *mesh = m_scene->mMeshes[i]; // Set up vertex positions and normals glEnableClientState(GL_VERTEX_ARRAY); glVertexPointer(3, GL_FLOAT, 0, mesh->mVertices); glEnableClientState(GL_NORMAL_ARRAY); glNormalPointer(GL_FLOAT, 0, mesh->mNormals); // Set up bone weights and indices if (mesh->HasBones()) { glEnableVertexAttribArray(4); glVertexAttribPointer(4, 4, GL_FLOAT, GL_FALSE, sizeof(VertexBoneData), (const GLvoid*)offsetof(VertexBoneData, weights)); glEnableVertexAttribArray(5); glVertexAttribPointer(5, 4, GL_FLOAT, GL_FALSE, sizeof(VertexBoneData), (const GLvoid*)offsetof(VertexBoneData, indices)); // Calculate bone matrices std::vector<aiMatrix4x4> boneMatrices(mesh->mNumBones); for (unsigned int j = 0; j < mesh->mNumBones; j++) { const aiBone *bone = mesh->mBones[j]; aiMatrix4x4 boneMatrix = bone->mOffsetMatrix; const aiNode *node = m_scene->mRootNode->FindNode(bone->mName); while (node && node != mesh->mBones[j]->mNode) { boneMatrix = node->mTransformation * boneMatrix; node = node->mParent; } boneMatrices[j] = boneMatrix; } // Set up bone matrices glUniformMatrix4fv(glGetUniformLocation(m_shaderProgram.programId(), "boneMatrices"), mesh->mNumBones, GL_FALSE, (const GLfloat*)&boneMatrices[0]); } // Draw triangles glDrawElements(GL_TRIANGLES, mesh->mNumFaces * 3, GL_UNSIGNED_INT, mesh->mFaces[0].mIndices); // Disable vertex and normal arrays glDisableClientState(GL_VERTEX_ARRAY); glDisableClientState(GL_NORMAL_ARRAY); // Disable bone weights and indices if (mesh->HasBones()) { glDisableVertexAttribArray(4); glDisableVertexAttribArray(5); } } // Swap buffers swapBuffers(); } ``` 在这个示例中，假设模型使用了骨骼动画。因此，需要设置每个网格的顶点数据结构，其中包含每个顶点的骨骼权重和索引。以下是这个数据结构的示例代码： ```cpp struct VertexBoneData { float weights[4]; unsigned int indices[4]; }; ``` 在顶点着色器中，需要将顶点位置和法线变换为相机空间，并使用骨骼权重和索引来计算每个顶点的最终位置。以下是顶点着色器的示例代码： ```glsl #version 330 uniform mat4 projectionMatrix; uniform mat4 modelViewMatrix; uniform mat4 boneMatrices[100]; in vec3 vertexPosition; in vec3 vertexNormal; in vec4 vertexWeights; in ivec4 vertexIndices; out vec3 normal; void main() { mat4 boneMatrix = boneMatrices[vertexIndices.x] * vertexWeights.x; boneMatrix += boneMatrices[vertexIndices.y] * vertexWeights.y; boneMatrix += boneMatrices[vertexIndices.z] * vertexWeights.z; boneMatrix += boneMatrices[vertexIndices.w] * vertexWeights.w; gl_Position = projectionMatrix * modelViewMatrix * boneMatrix * vec4(vertexPosition, 1.0); normal = normalize(mat3(modelViewMatrix * boneMatrix) * vertexNormal); } ``` 在片段着色器中，可以使用法线和光照计算每个像素的颜色。以下是片段着色器的示例代码： ```glsl #version 330 uniform vec3 lightPosition; in vec3 normal; out vec4 fragmentColor; void main() { vec3 ambientColor = vec3(0.2, 0.2, 0.2); vec3 diffuseColor = vec3(1.0, 1.0, 1.0); vec3 specularColor = vec3(1.0, 1.0, 1.0); float shininess = 50.0; vec3 lightDirection = normalize(lightPosition - gl_FragCoord.xyz); vec3 normalDirection = normalize(normal); vec3 reflectionDirection = reflect(-lightDirection, normalDirection); float diffuseFactor = max(dot(lightDirection, normalDirection), 0.0); vec3 diffuseComponent = diffuseColor * diffuseFactor; float specularFactor = pow(max(dot(reflectionDirection, normalize(-gl_FragCoord.xyz)), 0.0), shininess); vec3 specularComponent = specularColor * specularFactor; fragmentColor = vec4(ambientColor + diffuseComponent + specularComponent, 1.0); } ``` 最后，需要在Qt应用程序中创建OpenGL窗口并运行事件循环。以下是一个简单的示例： ```cpp #include <QApplication> #include "OpenGLWidget.h" int main(int argc, char *argv[]) { QApplication a(argc, argv); OpenGLWidget w; w.show(); return a.exec(); } ``` 这就是使用Qt、OpenGL和Assimp实现骨骼动画的基本步骤和代码示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值