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

先上效果：

 工程下载地址：

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教程”，获取新的内容

​​​​​​​