In this example, we will learn how to make our animation more interesting by utilizing easing curves. We will still use the previous source code, which uses the property animation to animate a push button.
- Define an easing curve and add it to the property animation before calling the
start()function:QPropertyAnimation *animation = new QPropertyAnimation(ui->pushButton, "geometry"); animation->setDuration(3000); animation->setStartValue(ui->pushButton->geometry()); animation->setEndValue(QRect(200, 200, 100, 50)); QEasingCurve curve; curve.setType(QEasingCurve::OutBounce); animation->setEasingCurve(curve); animation->start();
- Call the
setLoopCount()function to set how many loops you want it to repeat for:QPropertyAnimation *animation = new QPropertyAnimation(ui->pushButton, "geometry"); animation->setDuration(3000); animation->setStartValue(ui->pushButton->geometry()); animation->setEndValue(QRect(200, 200, 100, 50)); QEasingCurve curve; Curve.setType(EasingCurve::OutBounce); animation->setEasingCurve(curve); animation->setLoopCount(2); animation->start(); - Call
setAmplitude(),setOvershoot(), andsetPeriod()before applying the easing curve to the animation:QEasingCurve curve; curve.setType(QEasingCurve::OutBounce); curve.setAmplitude(1.00); curve.setOvershoot(1.70); curve.setPeriod(0.30); animation->setEasingCurve(curve); animation->start();
In order to let an easing curve control the animation, all you need to do is to define an easing curve and add it to the property animation before calling the start() function. You can also try several other types of easing curve and see which one suits you best. Here is an example:
animation->setEasingCurve(QEasingCurve::OutBounce);
If you want the animation to loop after it has finished playing, you can call the setLoopCount() function to set how many loops you want it to repeat for, or set the value to -1 for an infinite loop:
animation->setLoopCount(-1);
There are several parameters that you can set to refine the easing curve before applying it to the property animation. These parameters include amplitude, overshoot, and period:
- Amplitude: The higher the amplitude, the higher the bounce or elastic spring effect that will be applied to the animation.
- Overshoot: Some curve functions will produce an overshoot (exceeding its final value) curve due to damping effect. By adjusting the overshoot value, we are able to increase or decrease this effect.
- Period: Setting a small period value will give a high frequency to the curve. A large period will give it a small frequency.
These parameters, however, are not applicable to all curve types. Please refer to the Qt documentation to see which parameter is applicable to which curve type.
While the property animation works perfectly fine, sometimes it feels a little boring to look at a GUI element animated at a constant speed. We can make the animation look more interesting by adding an easing curve to control the motion. There are many types of easing curve that you can use in Qt, and here are some of them:
As you can see from the preceding diagram, each easing curve produces a different ease-in and ease-out effect.
Note
For the full list of easing curves available in Qt, please refer to the Qt documentation at http://doc.qt.io/qt-5/qeasingcurve.html#Type-enum.