Qt Kinetic Animations with Buttons

Comments

(no comments yet)

Log in or Join to leave comments.

Article Metadata

---

Article

Created: flaviofabricioferreira (23 Dec 2009)

Last edited: hamishwillee (11 Oct 2012)

This article shows how to animate a button (Widget) using the Animation Framework

Introduction:

The Qt Animation Framework provides an easy way for creating animated and smooth GUI's. By animating Qt properties, the framework provides great freedom for animating widgets and other QObjects. The framework can also be used with the Graphics View Framework. More about Qt Animation Framework is here.

Animation1

Link to Video Animation 1

Code

#include <QtGui>
#include <QPushButton>
#include <QPropertyAnimation>
#include <QDebug>
 
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
 
    QWidget w;
    w.setFixedSize(200,200);
    w.show();
 
    QPushButton button("B",&w);
    button.setFixedSize(20,20);
    button.show();
 
    QPropertyAnimation animation(&button, "geometry");
    animation.setDuration(5000);  //2000 miliseconds = 2 seconds
    animation.setStartValue(QRect(0,0, button.width(),button.height()));
    animation.setEndValue(QRect(180,180, button.width(),button.height()));
    animation.start();
 
    return a.exec();
}

Description

QPropertyAnimation animation(&button, "geometry");

In this step we have created a QPropertyAnimation that receipt like the first parameter of a button.

animation.setDuration(5000);  //2000 miliseconds = 2 seconds

Here, we define the total time of animation in milliseconds.

animation.setStartValue(QRect(0,0, button.width(),button.height()));

Then, we invoke the setStartValue() method. The first and second parameters are the initial position of button, and the third and fourth parameters are the width and height of animation.

animation.setEndValue(QRect(180,180, button.width(),button.height()));

In this step we call setEndValue() method. The parameters is equal to above.

animation.start();

Finally, we invoke the start of animation.

Animation 2

Link to Video Animation 2

Code

.
.
.   
QPropertyAnimation animation(&button, "geometry");
animation.setDuration(5000);  //2000 milliseconds = 2 seconds
animation.setKeyValueAt(0,QRect(0,0, button.width(),button.height()));
animation.setKeyValueAt(0.25,QRect(0,180, button.width(),button.height()));
animation.setKeyValueAt(0.5,QRect(180,180, button.width(),button.height()));
animation.setKeyValueAt(0.75,QRect(180,0, button.width(),button.height()));
animation.setKeyValueAt(1,QRect(0,0, button.width(),button.height()));
animation.start();
.
.
.

Description

This Animation has four steps, because it uses the method setKeyValueAt() to define this steps. The steps to alternate of 0 to 1.

animation.setKeyValueAt(0,QRect(0,0, button.width(),button.height()));
animation.setKeyValueAt(0.25,QRect(0,180, button.width(),button.height()));
animation.setKeyValueAt(0.5,QRect(180,180, button.width(),button.height()));
animation.setKeyValueAt(0.75,QRect(180,0, button.width(),button.height()));
animation.setKeyValueAt(1,QRect(0,0, button.width(),button.height()));

Note: I did a post with a example of application using Kinetic, the link is : QtPhoneRetro - A Qt Widget using Kinetic Animations