@ QT status mechanism-animation interface implementation

As the name suggests, the state machine should have different statuses during switchover. In the above state machine diagram, we provide two states: state1 and state2. Status differentiation is described by State attributes, such as P1, P2... And so on. The transition from one State to another must be completed by the trigger condition. The transition from state1 to state2 is represented by transition1, and the transition from state2 to state1 is represented by transition2. If you want to see animations during state transition, you can add the animation effects animation1 and animation2 to transition1 and transition2. Finally, an initial State is required for the state machine to enter. We can set state1 as the initial state of the state machine. With the description of the state machine, we can look at the code with Qt-4.6, how to achieve the above functions. Create a state machine qstatemachine * Machine = new qstatemachine; create two States. The state attribute is determined by the location of a qpushbutton.

Qpushbutton * button = new qpushbutton ("animated button ");
Qstate * state1 = new qstate (MACHINE );
State1-> assignproperty (button, "geometry", qrect (0, 0,150, 30 ));
Qstate * state2 = new qstate (MACHINE );
State2-> assignproperty (button, "geometry", qrect (250,250,150, 30 ));

Set status 1 to the initial state machine-> setinitialstate (state1); Add the trigger condition from the trigger state 1 to the trigger state 2, The qpushbutton button is pressed, and the animation effect is calculated by addanimation () qsignaltransition * transition1 = state1-> addtransition (button, signal (clicked (), state2 );
Transition1-> addanimation (New qpropertyanimation (button, "geometry"); careful readers may find that setstartvalue () and setendvalue () of qpropertyanimation are not called. In fact, the initial and end states of the animation changes are determined by state1 and state2. In addition, if the animation duration is not set, the default value is 250 milliseconds. Similarly, a trigger condition from status 2 to status 1 is added, and the button is also pushed by qsignaltransition * transition2 = state2-> addtransition (button, signal (clicked (), state1 );
Transition2-> addanimation (New qpropertyanimation (button, "geometry"); the last step is to start the state machine, isn't it easy? Machine-> Start (); the complete code is down

 

# Include <qapplication>
# Include <qpushbutton>
# Include <qstatemachine>
# Include <qstate>
# Include <qsignaltransition>
# Include <qpropertyanimation>
Int main (INT argc, char * argv []) {
Qapplication app (argc, argv );
Qpushbutton * button = new qpushbutton ("animated button ");
Button-> show ();
Qstatemachine * Machine = new qstatemachine;
// Qstate * state1 = new qstate (machine-> rootstate ());
Qstate * state1 = new qstate (MACHINE );
State1-> assignproperty (button, "geometry", qrect (0, 0,150, 30 ));
Machine-> setinitialstate (state1 );
// Qstate * state2 = new qstate (machine-> rootstate ());
Qstate * state2 = new qstate (MACHINE );
State2-> assignproperty (button, "geometry", qrect (250,250,150, 30 ));
Qsignaltransition * transition1 = state1-> addtransition (button,
Signal (clicked (), state2 );
Transition1-> addanimation (New qpropertyanimation (button, "geometry "));
Qsignaltransition * transition2 = state2-> addtransition (button,
Signal (clicked (), state1 );
Transition2-> addanimation (New qpropertyanimation (button, "geometry "));
Machine-> Start ();
App.exe C ();
}

// This code comes from the animation index with the help of Qt-4.6 assistant, the rootstate () function of the original code is not available, it should be regarded as a bug :)

The above describes how to use the animation class of the Qt-4.6 to realize automatic change of position, sometimes some custom attribute change needs, such as color changes, and some non-numerical values directly related attributes, at this time, you can use custom variables for flexible control. Below I have implemented a very simple example to make the text on the label automatically make color changes, but it looks ugly, mainly to demonstrate the Function

In the previous article, sanfanling mentioned that you can use a similar method to change the color of the selected text in qtextbrowser. However, I think the easier way is to use timerevent, I wonder if sanfanling is the KDE celebrity three lapels of the cloud fan forum ?)
// This part of the code mainly uses inheritance to add a color attribute to the qlabel.
# Include <qapplication>
# Include <qlabel>
# Include <qpropertyanimation>

 

Class label: Public qlabel {
Q_object
Q_property (INT color read color write setcolor)
Public:
Label (const qstring & text, qlabel * p = 0): qlabel (text, p) {icolor = 0 ;};
Inline const Int & color () const {return icolor ;};
Void setcolor (const Int &);
PRIVATE:
Int icolor;
};

Void label: setcolor (const Int & rcolor ){
Qpalette pal;
Pal. setcolor (qpalette: foreground, rcolor );
Setpalette (PAL );
If (rcolor! = Icolor ){
Icolor = rcolor;
// 4 lines get "text"
Qstring color_str = qstring ("% 1"). Arg (icolor, 2, 16 );
Color_str + = qstring ("00") + color_str;
Qstring STR = qstring ("");
STR + = qstring ("http://www.cuteqt.com/blog") + qstring (">") + color_str;
Settext (STR );
}
Repaint ();
}

// Standard qpropertyanimation animation interface, which automatically changes with attribute color
Int main (INT argc, char * argv []) {
Qapplication app (argc, argv );
Label Label ("Hello, www.cuteqt.com/blog ");

Qpropertyanimation * anim = new qpropertyanimation (& label, "color ");
Anim-> setduration (1800 );
Anim-> setstartvalue (16 );
Anim-> setendvalue (0 xffffff );
Anim-> Start ();

Label. Show ();
Return app.exe C ();
}

# Include "Main. MOC"

 

]> Http://www.cuteqt.com/blog? Feed = RSS2 & P = 1146 3 http://www.cuteqt.com/blog? P = 1142 http://www.cuteqt.com/blog? P = 1142 # comments sat, 05 Dec 2009 11:20:40
+ 0000 bug http://www.cuteqt.com/blog? P = 1142 Qt-4.6 added the animation framework (animation framework), allowing us to easily write some vivid programs. Like in previous versions, all controls are boring and stay in the great and glorious qlayout. Maybe they can sing a song and dance.

 

I have previously written an article titled "qtimeline", the hero behind the QT animation effect, which describes how to use qtimeline to write an animation program. Today, I would like to reiterate the previous article that the so-called animation has different States at different time points within a period of time. As long as the State is defined, it is a matter of course to implement the animation. Of course to do this thing, the best use is the state machine, right Qt-4.6.0 provides the qstatemachine class, but today I want to talk about the three words should be simple.

First, qpropertyanimation

Qpropertyanimation is used to communicate with properties in qobject, such as qwidget size and coordinates. Look at the code

Qpropertyanimation * animation = new qpropertyanimation (mywidget, "geometry ");
Animation-> setduration (10000 );
Animation-> setstartvalue (qrect (0, 0,100, 30 ));
Animation-> setendvalue (qrect (250,250,100, 30 ));
Animation-> Start ();

The qpropertyanimation object created in the first line is associated with the geometric properties of the form of mywidget. The animation duration, start coordinate, and end coordinate are set in the following sentence. You just need to change the qproperanimation to do the rest. Call start () to start it. Yes, the five-line code completes a form that automatically moves from one coordinate point to another. Below is a code that can be run. It is a small animation that a bird moves from the animation to the middle. Of course, you have to prepare the image with the same name by yourself :)

# Include <qapplication>
# Include <qlabel>
# Include <qpixmap>
# Include <qpropertyanimation>

Int main (INT argc, char * argv []) {
Qapplication app (argc, argv );
Qwidget * w = new qwidget ();
W-> resize (1, 300,400 );

Qpixmap birdimg1_qpixmap(%twitter-bird.png "). Scaled (40, 40 );

Qlabel * bird_1 = new qlabel (w );
Bird_1-> setpixmap (birdimg );

Qpropertyanimation * anim1 = new qpropertyanimation (bird_1, "POS ");
Anim1-> setduration (2000 );
Anim1-> setstartvalue (qpoint (0,360 ));
Anim1-> setendvalue (qpoint (110,180 ));
Anim1-> Start ();
Bird_1-> move (-40,-40 );
W-> show ();
Return app.exe C ();
}

The above example uses the position attribute POS of the label. Of course, you can add other properties in your class, such as changing the color.

Decision 2: seteasingcurve

In the above example, the movement of the birds is linear, which is not too monotonous. The void seteasingcurve (const qeasingcurve & easing) function in qpropertyanimation is used to implement different curvature changes. The list of available parameters (including function curves) of qeasingcurve can be found in this document. Change the animation-related code section

Qpropertyanimation * anim1 = new qpropertyanimation (bird_1, "POS ");
Anim1-> setduration (2000 );
Anim1-> setstartvalue (qpoint (0,360 ));
Anim1-> setendvalue (qpoint (110,180 ));
Anim1-> seteasingcurve (qeasingcurve: outbounce );
Anim1-> Start ();

Note: The fourth sentence is added. Try other curve parameters and run them to see if the dynamic effects are different. If you are not satisfied with the existing curves in the list, you can inherit qeasingcurve to achieve the desired effect.

Conclusion 3: qanimationgroup

In the preceding example, only one animation is running. If you want to run multiple Animations together, you need to use the animation group qanimationgroup. The animation groups are serial and parallel, which correspond to the qsequentialanimationgroup and qparallelanimationgroup sub-classes of qanimationgroup. Its usage is simple.

Qsequentialanimationgroup group;
// Qparallelanimationgroup;
Group. addanimation (anim1 );
Group. addanimation (anim2 );
Group. Start ();

The above code runs anim2 only after anim1. In parallel, the two animations run simultaneously. If an animation group is added, you do not need to call a single anim1-> Start (), which is managed by the animation group. The following is a runable code. The two birds move from the upper left corner and the lower right corner of the form to the middle.

# Include <qapplication>
# Include <qwidget>
# Include <qlabel>
# Include <qpixmap>
# Include <qpropertyanimation>
# Include <qsequentialanimationgroup>
# Include <qparallelanimationgroup>

Int main (INT argc, char * argv []) {
Qapplication app (argc, argv );
Qwidget * w = new qwidget ();
W-> resize (1, 300,400 );

Qpixmap birdimg1_qpixmap(%twitter-bird.png "). Scaled (40, 40 );

Qlabel * bird_1 = new qlabel (w );
Bird_1-> setpixmap (birdimg );

Qpropertyanimation * anim1 = new qpropertyanimation (bird_1, "POS ");
Anim1-> setduration (2000 );
Anim1-> setstartvalue (qpoint (0,360 ));
Anim1-> setendvalue (qpoint (110,180 ));
// Anim1-> seteasingcurve (qeasingcurve: outbounce );
// Anim1-> Start ();

Qlabel * bird_2 = new qlabel (w );
Bird_2-> setpixmap (birdimg );

Qpropertyanimation * anim2 = new qpropertyanimation (bird_2, "POS ");
Anim2-> setduration (2000 );
Anim2-> setstartvalue (qpoint (0, 0 ));
Anim2-> setendvalue (qpoint (150,180 ));
Anim2-> seteasingcurve (qeasingcurve: outbounce );

Qsequentialanimationgroup group;
// Qparallelanimationgroup;
Group. addanimation (anim1 );
Group. addanimation (anim2 );
Group. Start ();

Bird_1-> move (-40,-40 );
Bird_2-> move (-40,-40 );
W-> show ();
Return app.exe C ();
}

In fact, the essence of an animation is to display an image at a certain interval. When the interval is short, the human eye will not feel it, and the animation will see continuous images. Qt provides a good time control class qtimeline for developers who develop animation effects.

 

The simplest usage of qtimeline is

1 qtimeline timeline = new qtimeline (1000 );
2 timeline-> setframerange (0,100 );
3 connect (timeline, signal (framechanged (INT), yourobj, slot (yourobjslot (INT )));
4 Timeline-> Start ();

Explanation:

1. The duration of the created timeline. The parameter value is the number of milliseconds, and 1000 is 1 second.

2. The range of output values created in this timeline. That is, the range of parameter values transmitted from the framechanged signal in the third line.

3. the default interval of qtimeline is 40 ms (that is, 25 frames per second). A framechanged () signal is sent at each interval, connect the signal to the object and slot where you can control the animation effect.

4. After timeline is started, the framechanged () signal at each interval can be sent normally.

Of course, there are some complicated parameter settings to better control your effect.

Setloopcount (INT count) This function controls the number of animation repetitions. The default value is 1. If it is set to 0, it indicates an infinite loop.

Setupdateinterval (INT interval) This function is used to control the interval of updating an animation.

After the duration set by qtimeline passes, a finished () signal will be sent accordingly. you can do some scanning after receiving this signal.

There is also a special option:

Setcurveshape (curveshape shape), which is used to control the variation of the output values at intervals. The existing options of curveshage are:

Qtimeline: easeincurve 0 the value starts growing slowly, then increases in speed.

Qtimeline: easeoutcurve 1 the value starts growing steadily, then ends slowly.

Qtimeline: easeinoutcurve 2 the value starts growing slowly, then runs steadily, then grows slowly again.

Qtimeline: linearcurve 3 the value grows linearly (e.g., if the duration is 1000 MS, the value at time 500 MS is 0.5 ).

Qtimeline: sinecurve 4 the value grows sinusoidally.

Qtimeline: cosinecurve 5 the value grows cosinusoidally.

2 is the default value. Even if this option is not available, if only the uniform number is output (option 3), we can perform secondary processing on the data by ourselves to generate the number of any rule we want.

Using qtimeline, we can easily achieve some image hiding effects. You only need to display a fixed position in different stages of the image hiding process after each interval. Here is a good example. In just over 300 lines, it may not take long for you to read

Http://qt.gitorious.org/qt-labs/graphics-dojo/trees/master/genie

We also offer a forum on www.cuteqt.com/blogto exchange ideas :)

Timeline-simple.tar

]> Http://www.cuteqt.com/blog? Feed = RSS2 & P = 509 5 http://www.cuteqt.com/blog? P = 276 http://www.cuteqt.com/blog? P = 276 # comments Mon, 01 Jun 2009 02:12:51
+ 0000 shiroki http://www.cuteqt.com/blog? P = 276 saw a qtcn on someone asking how to dynamically transform the display picture (http://www.qtcn.org/bbs/read.php? Tid = 18835), which is easy to implement. BasicallyQtimerThe series of classes to control the time. In addition, all the painting work starting from qt4 should be called in the paintevent function of the form subclass, in general, you need to derive the class for custom plotting and rewrite it.PainteventVirtual functions,
Call functions such as drawpixmap here. My example is a bit clever on the one hand. On the other hand, in order to be consistent with the question, I used a qlabel to display the image instead of deriving a subclass, you should pay attention to the code when reading the code.

 

The following is a brief introduction to the implementation of the program. It is very simple and clear in just a few words.
The main form of the program uses qframe. In fact, you can use any class, such as qwidget.
A layout is placed in the main form to control the layout of internal controls. Both the label control and Pushbutton are placed in this layout. For the convenience of displaying images, a fixed size is set for the label.
A constructor is used to create a layout, subcontrol, and timer, and connect signals and slots.

The main class defines two slot functions, one for responding to the timer and converting the image, and the other for responding to the user clicking the button and starting or stopping the timer.
Check the attachment in the Code. If you have any questions, leave a message on the BBS page.

The pattern for this example is tar.gz. Due to restrictions on Blog uploading, the suffix name has been tampered with. After downloading it, you can change it back. In addition, QT in Windows creates different directories for debug and release versions by default to store binary files. Therefore, the relative path used in the Code may not be found in windows, you can change it to mainwin. CPP, or place the image in the program startup directory. For example, if you run from the DEBUG directory, you need to put the image in the DEBUG directory, or if you run with debug \ ani.exe, the image should be placed in the debug parent directory.
In this way, the image will be displayed. Windows is so troublesome!
Download the example program: picanimation.tar.gz

]> Http://www.cuteqt.com/blog? Feed = RSS2 & P = 276 5

@ QT status mechanism-animation interface implementation