×
Namespaces

Variants
Actions

Qt Kinetic Animations with Buttons

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Compatibility
Platform(s):
Symbian
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

Contents

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

Kineticbutton1.png Kineticbutton2.png Kineticbutton3.png

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

AnimetdbuttonA1.pngAnimetdbuttonA2.pngAnimetdbuttonA3.pngAnimetdbuttonA4.png AnimetdbuttonA1.png

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.pngNote: I did a post with a example of application using Kinetic, the link is : QtPhoneRetro - A Qt Widget using Kinetic Animations

This page was last modified on 11 October 2012, at 04:18.
61 page views in the last 30 days.