In this example, we will learn how to use an animation group to manage the states of the animations contained in the group.
- We will use the previous example, but this time, we add two more push buttons to the main window, like so:
- Next, define the animation for each of the push buttons in the main window's constructor:
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"); animation2->setDuration(3000); animation2->setStartValue(ui->pushButton_2->geometry()); animation2->setEndValue(QRect(150, 200, 100, 50)); QPropertyAnimation *animation3 = new QPropertyAnimation(ui->pushButton_3, "geometry"); animation3->setDuration(3000); animation3->setStartValue(ui->pushButton_3->geometry()); animation3->setEndValue(QRect(250, 200, 100, 50));
- After that, create an easing curve and apply the same curve to all three animations:
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);
- Once you have applied the easing curve to all three animations, we will then create an animation group and add all three animations to the group:
QParallelAnimationGroup *group = new QParallelAnimationGroup;group->addAnimation(animation1); group->addAnimation(animation2); group->addAnimation(animation3);
- Call the
start()function from the animation group we just created:group->start();
Since we are using an animation group now, we no longer call the start() function from the individual animation, but instead we will be calling the start() function from the animation group we just created.
If you compile and run the example now, you will see all three buttons being played at the same time. This is because we are using the parallel animation group. You can replace it with a sequential animation group and run the example again:
QSequentialAnimationGroup *group = new QSequentialAnimationGroup;
This time, only a single button will play its animation at a time, while the other buttons will wait patiently for their turn to come.
The priority is set based on which animation is added to the animation group first. You can change the animation sequence by simply rearranging the sequence of an animation being added to the group. For example, if we want button 3 to start the animation first, followed by button 2, and then button 1, the code will look like this:
group->addAnimation(animation3); group->addAnimation(animation2); group->addAnimation(animation1);
Since property animations and animation groups are both inherited from the QAbstractAnimator class, it means that you can also add an animation group to another animation group to form a more complex, nested animation group.
Qt allows us to create multiple animations and group them into an animation group. A group is usually responsible for managing the state of its animations (that is, it decides when to start, stop, resume, and pause them). Currently, Qt provides two types of class for animation groups, QParallelAnimationGroup and QSequentialAnimationGroup:
QParallelAnimationGroup: As its name implies, a parallel animation group runs all the animations in its group at the same time. The group is deemed finished when the longest-lasting animation has finished running.QSequentialAnimationGroup: A sequential animation group runs its animations in sequence, meaning it will only run a single animation at a time, and only play the next animation when the current one has finished.