Trying Qt 4.6: Qt Animations and State Machine

Recently, the so-called “technological preview” (technological preview) of Qt 4.6 has been released, which allows us to try new features now, which will be included in release 4.6 of this wonderful framework. I will not list the innovations - they were fairly well covered in this topic , and I’ll dwell more on two of them: State Machine and Qt Animation Framevork.

So, what are they?

A state machine is nothing more than a finite state machine: an object with a predetermined finite number of states and transitions between them.
In Qt 4.6, it is implemented exactly this way: we can create the number of states we need, and for each state, specify which properties each object has in this state, then set transitions between states, specify the starting point and start the machine for execution.

But first, we need Qt 4.6 itself. I will tell you how to build it from source for Linux (applicable to any distribution). Building under Windows, I think, is not much different if you pre-install MinGW. It may be possible to assemble using MSVS, but I have not tried it myself.
')

Qt 4.6 build

I will talk about my Qt 4.6 build method without any “negative impact” on the current version installed from the repository. Perhaps my method is not the most optimal, but at least it works :)
Immediately I warn you: the assembly will require ~ 3 GB of disk space, and then another ~ 900 MB for installation (everything that remains from the assembly can be removed later). It takes so much, because firstly it contains debag information (since this is not a release yet), plus it's not just libraries, but also examples, documentation, etc.
First, download the source code from here (tar.gz) or from here (zip) . Unpack, go to the source directory, run the configuration

  $ ./configure --prefix = / opt / Qt4.6

Specifying a similar prefix, we kill two birds with one stone: 1) do not affect the already installed version; and 2) we can subsequently remove everything with a “flick of the wrist.”
In the process of configuring, they will ask about the license: answer “o” (open source version, including the GPL and LGPL), agree with it (say “yes”), wait a few minutes. After the end we will be reminded once again with which prefix the configuration was made.
And finally, the assembly! Run

  $ make

And wait. We wait. We wait…
While it is being assembled, it is possible not only to make tea / coffee for yourself, but also to clean the room: on my quad core, the assembly in 4 threads took 40 minutes. The number of threads (by the number of processor cores) can be specified using the "-j" option:

  $ make -j 4

After the end of the assembly set using

  $ sudo make install

In general, such an installation is highly undesirable, but in this particular case we can afford it, because We secured ourselves with an indication of the desired prefix, and the harmony of our system will not be particularly affected by this.

Customization

Now we need to be able to use the new version instead of the one installed on the system. All we need to do is use the correct qmake, and he himself will pick up the necessary inclusions and libraries and generate a Makefile using them.
Here we have 3 different options:

each time call qmake with the full path:
```
  $ /opt/Qt4.6/bin/qmake 
```

set the qmake path for the terminal session:

  $ export PATH = / opt / Qt4.6 / bin: $ PATH

write the line above to ~ / .bashrc, and then this qmake will always be used

I use the second option - for experiments it is more than enough.

We try

To check that we did everything correctly, let's compile a small program:

  $ mkdir qt_anim
 $ cd qt_anim
 $ (vim | emacs | nano | kate | gedit | juffed | ...) anim.cpp

anim.cpp:

Copy Source | Copy HTML #include < QApplication > #include < QWidget > int main( int argc, char * argv []) { QApplication app(argc, argv ); QWidget w; w.resize( 200 , 100 ); w.show(); return app.exec(); } 

  $ qmake -project
 $ qmake
 $ make
 $ ldd qt_anim |  grep qt

After that, we should be told that the libraries we are counting on are used. If not, make sure the correct qmake version is used:

  $ which qmake

and if the version is not the same - check that you are not mistaken with the PATH setting.

Getting started!

To begin with, we will understand what State Machine is and what it is eaten with. We set the task: to create a window in the corner of which a small picture will be displayed, which when clicked on the window will move and increase in size.

anim.cpp:

Copy Source | Copy HTML #include < QApplication > #include "AnimWidget.h" int main( int argc, char * argv []) { QApplication app(argc, argv ); AnimWidget w; w.resize( 300 , 300 ); w.show(); return app.exec(); } 

AnimWidget.h:

Copy Source | Copy HTML #ifndef __ANIM_WIDGET_H__ #define __ANIM_WIDGET_H__ #include < QLabel > #include < QStateMachine > #include < QWidget > class AnimWidget : public QWidget { Q_OBJECT public : AnimWidget (); signals: /* signal for triggering state machine changes */ void clicked(); protected : /* here we will be catching clicks */ virtual void mouseReleaseEvent(QMouseEvent*); private : QStateMachine machine_; QLabel * photo_; }; #endif // __ANIM_WIDGET_H__

AnimWidget.cpp:

Copy Source | Copy HTML #include "AnimWidget.h" #include < QState > #include < QVariant > AnimWidget::AnimWidget() { photo_ = new QLabel ( "" , this ); photo_->setGeometry( 0 , 0 , 40 , 40 ); photo_->setScaledContents( true ); photo_->setPixmap(QPixmap( "ottawa.png" )); /* creating 2 states */ QState * st1 = new QState (); QState * st2 = new QState (); /* defining photo's properties for each of them */ st1->assignProperty(photo_, "geometry" , QRect( 0 , 0 , 40 , 40 )); st2->assignProperty(photo_, "geometry" , QRect( 50 , 50 , 200 , 200 )); /* define transitions between states by clicking on main window*/ st1->addTransition( this , SIGNAL(clicked()), st2); st2->addTransition( this , SIGNAL(clicked()), st1); /* adding states to state machine */ machine_.addState(st1); machine_.addState(st2); machine_.setInitialState(st1); /* starting machine */ machine_.start(); } void AnimWidget::mouseReleaseEvent(QMouseEvent*) { emit clicked(); }

In rows

  st1-> assignProperty (photo_, "geometry", QRect (0, 0, 40, 40));
 st2-> assignProperty (photo_, "geometry", QRect (50, 50, 200, 200));

set the properties of objects that are inherent in them in a particular state. Standard Qt-shny classes contain a certain set of properties, and to set properties for your own classes use Q_PROPERTY (see the documentation ).

Strings

  st1-> addTransition (this, SIGNAL (clicked ()), st2);
 st2-> addTransition (this, SIGNAL (clicked ()), st1);

determine transitions between states and conditions for these transitions. In our case, the condition for the transition will be a “clicked ()” signal, thrown by the main window.
The transition between states can be unconditional - then the object and the signal are not indicated, but simply the terminal state is indicated (see documentation ).

And do not forget to specify a different image instead of “ottawa.png” and put it next to the source code (or download the source at the link below).

We collect:

  $ qmake -project
 $ qmake
 $ make
 $ ./qt_anim

Click - jumps!
But jumping instantly. Yes, the transition between the states of the machine is instantaneous - but this is not what we want, right? Let's add a little animation to the transition between states. To do this, add the following code before the line “machine_.start ();”:

Copy Source | Copy HTML ... /* adding animation */ QPropertyAnimation * an1 = new QPropertyAnimation (photo_, "geometry" ); machine_.addDefaultAnimation(an1); ... 

and do not forget to add

  #include <QPropertyAnimation>

at the beginning of the file.

Here, in principle, everything is clear: we create an animation to change the attribute “geometry” of the object “photo_” and add animation to the machine.

We collect, we start ...

So much better, right? The picture does not jump, but smoothly travels to a new place, changing in size.

You can change various parameters of the animation, in particular, set the duration and "acceleration curve." You can make the picture start moving quickly, and then slow down; it is possible, and vice versa, to start slowly, and then accelerate; and it is possible so that it starts slowly, accelerates, and then gradually brakes. There are several dozens of possible options (see the documentation ). I chose the option “acceleration - deceleration” with a cubic change in speed. Add the following lines after creating the animation:

Copy Source | Copy HTML ... /* customizing the animation */ an1->setEasingCurve(QEasingCurve::InOutCubic); an1->setDuration( 700 ); ... 

Well, now instead of a boring movement with constant speed, the picture moves smoothly and stately :)

As a matter of fact, on this my article comes to an end, and then the matter remains only after your imagination. Using this simple mechanism “we define a set of states - we assign properties of objects for each state - we define transitions between states - we set animations for transitions”, we can achieve impressive results.

And little wishes for last: remember that everything is good in moderation. A program overloaded with animation is far less pleasant to use than a program in which there is no animation at all, so I hope you use the knowledge gained for the benefit of it :)

Project sources can be taken here (66 KB).

Update: added another small project made on the basis of the first one (368 KB, mainly due to images, the code there is not much more).

Source: https://habr.com/ru/post/69316/

All Articles

Trying Qt 4.6: Qt Animations and State Machine

Qt 4.6 build

Customization

We try

Getting started!

More articles: