Archived:How to create a simple animation using QTimeLine

Article Metadata

---

Tested with

Devices(s): Emulator

---

Compatibility

Platform(s): S60 3rd Edition FP1, S60 3rd Edition FP2, S60 5th Edition

---

Article

Keywords: QTimeLine,QProgressBar

Created: (17 Jan 2009)

Last edited: valderind4 (17 Sep 2009)

Overview

This code snippet demonstrates how to create a simple animation in Qt for S60.

The QTimeLine class in Qt provides a timeline for controlling animations.

Preconditions

• Install latest Qt for S60 see Qt for S60 - Installation packages
• Check this link for installation guide: How to install the package.
• Go through this article: Getting started with Qt for S60

Various Functions

• This property holds the direction of the timeline when QTimeLine is in Running state.The default is forward.

timeLine->setDirection(QTimeLine::Backward);

• This property holds the shape of the timeline curve.

timeLine->setCurveShape(QTimeLine::EaseInCurve);

• To add a Pause to pause the TimeLine you have to add the following code in to your source code.

 connect(pushButton1, SIGNAL(clicked()), this, SLOT(viral()));

Add This Function to ypur current code.

 void timeline::viral(  timeLine->setPaused(1); }

Code Snippet

Source File

#include "timeline.h"
 
timeline::timeline(QWidget *parent)
    : QWidget(parent)
{	
	layout= new QVBoxLayout(this);
	progressBar = new QProgressBar(this);
	progressBar->setRange(0, 100);
 
	// Construct a 5-second timeline with a frame range of 0 - 100
	timeLine = new QTimeLine(5000, this);
	timeLine->setFrameRange(0, 100);
	connect(timeLine, SIGNAL(frameChanged(int)), progressBar, SLOT(setValue(int)));
 
	// Clicking the push button will start the progress bar animation
	pushButton = new QPushButton(tr("Start animation"), this);
	connect(pushButton, SIGNAL(clicked()), timeLine, SLOT(start()));
	layout->addWidget(progressBar);
	layout->addWidget(pushButton);
	setLayout(layout);
}
 
timeline::~timeline()
{
   // No need to delete any QObject that got proper parent pointer.
 
}

Header File

#ifndef TIMELINE_H
#define TIMELINE_H
 
#include <QtGui/QWidget>
#include "ui_timeline.h"
#include <QVBoxLayout>
#include <QTimeLine>
#include <QProgressBar>
#include <QPushButton>
class timeline : public QWidget
{
    Q_OBJECT
 
public:
	timeline(QWidget *parent = 0);
    ~timeline();
 
private:
	QPushButton *pushButton;
	QTimeLine *timeLine;
	QProgressBar *progressBar;
	QVBoxLayout *layout;
};
 
#endif // TIMELINE_H

ScreenShot

For more Details in QTimeLine visit:http://pepper.troll.no/s60prereleases/doc/qtimeline.html#curveShape-prop