Detailed QT animation frame (2)---realize netease cloud music tag Switch

In the detailed QT animation Framework (a) introduced some basic knowledge of the QT animation framework, in this section, will actually see the implementation of the animation framework, the case is mainly to achieve the specific NetEase cloud music tag switch, NetEase cloud music in the switch:

The method described in this paper can also achieve the simple effect of this switch.

• Designing animation Frames

First we need to design for the animation frame, what is the desired animation effect? For, what we need is three tags can be switched on and off, can be abstracted to the left and right, that is, a tag from a rectangular region, moving to another rectangular region, then the bearer of the tag is more appropriate to choose why? Because we only need the display of the picture, so Qlabel introduced enough, and Qlabel inherit from the Qframe (inherited from Qwidget), so has the Geometry property, precisely its type is qrect , so you can achieve all the requirements of the animation effect, without the need foradditional custom attributes.

• Animation implementation

After designing the animation frame, you can start the code to implement all the actions. The following is the declaration definition for the header file:

#ifndef mainwindow_h#define mainwindow_h#include <QMainWindow> #include <vector>using namespace Std;class Qlabel;class qtoolbar;class qpropertyanimation;class mainwindow:public qmainwindow{    Q_OBJECTprotected Slots:    void Ontriggeraction (qaction *);p ublic:    MainWindow (Qwidget *parent = 0);    ~mainwindow ();p rivate:    void MoveLeft ();    void MoveRight ();    Qrect Center_rect;    Qrect Left_rect;    Qrect Right_rect;    Qlabel *center_label;    Qlabel *left_label;    Qlabel *right_label;    Qpropertyanimation *moveanimation;    Qpropertyanimation *moveanimation_left;    Qpropertyanimation *moveanimation_right;    int maincnt;    Below the 2 horizontal line controls    Qtoolbar *transferbar;    Vector<qpixmap> Label_group;}; #endif//Mainwindow_h

Code Analysis :

• First, the horizontal line control is to define the start of the left and right movements, which are the two button controls that belong to Qtoolbar, the Transferbar. Three Qlabel is the carrier of the action, that is target. It is required for qpropertyanimation construction.
• Then there is the definition of three rectangles, which is defined as the starting position of the animation switch.
• Next is the definition of three qpropertyanimation, which controls the movement of three Qlabel.
• The final maincnt is for good real-time positioning to the tag switch to the location, thus controlling the effect of animation.

then the concrete implementation, first look at the initialization:

Mainwindow::mainwindow (Qwidget *parent): Qmainwindow (parent) {resize (1000,400);    maincnt=3;        Draw three rectangles on the widget for animation switching, the first size is & 540 and the size of the two sides is 188*110 for (int label_num=0;label_num<3;label_num++) {        Qpixmap Temp_label=qpixmap (":/images/" +qstring::number (label_num+1) + ". png");    Label_group.push_back (Temp_label);    } int width=this->width ();    int height=this->height ();/** sets the position and size of the center control */INT pos_x= (width-center_width)/2;    int pos_y= (height-center_hieght)/2;    Center_rect.setrect (Pos_x,pos_y,center_width,center_hieght);    Center_label =new Qlabel (this);    Center_label->setpixmap (Label_group[0]);    Center_label->setscaledcontents (TRUE); Center_label->setgeometry (pos_x,pos_y,center_width,center_hieght);//---------------------------------------       ------------------------------------------///** sets the toolbar properties for the bottom window conversion */Transferbar = new Qtoolbar (this); Transferbar->setgeometry (Pos_x+center_width/2-40,pos_y+center_hieght+20,90,10);       Transferbar->setstylesheet ("Background:transparent");       Transferbar->seticonsize (Qsize (20,5)); for (int actions_num=0;actions_num<2;actions_num++) {qaction *action=new qaction (Qicon (":/images/line.pn          G ")," ", Transferbar);          Action->setdata (Actions_num);       Transferbar->addaction (action); Connect (transferbar,signal (actiontriggered (qaction *)), This,slot (Ontriggeraction (qaction*))); /** set the position and size of the right control */Right_rect.setrect (pos_x+center_width,pos_y+ (center_hieght-margin_height), Margin_width,margin    _height);    Right_label =new Qlabel (this);    Right_label->setpixmap (label_group[1]);    Right_label->setscaledcontents (TRUE); Right_label->setgeometry (pos_x+center_width,pos_y+ (center_hieght-margin_height), margin_width,margin_height)  ;    /** set the position and size of the left control */pos_x= (pos_x-margin_width);    pos_y=pos_y+ (Center_hieght-margin_height); Left_rect.setrect (Pos_x,pos_y,margin_width,margin_heiGht);    Left_label =new Qlabel (this);    Left_label->setpixmap (label_group[2]);    Left_label->setscaledcontents (TRUE);    Left_label->setgeometry (Pos_x,pos_y,margin_width,margin_height); Center_label->raise ();//------------------------------------------------------------------------------//}

Code Analysis：

1, the first is to locate the position of three rectangular box , in order to achieve and netease effect, deliberately measure the size, defined as follows:

#define Center_width 540#define center_hieght 200#define margin_width 110#define margin_height 188

SAO years, if interested, you can sketch out, you can know the above about the three rectangular box position calculation method is how to get. Of course, this is just my calculation method, can not be picked up, hehe.

2, followed by positioning three Qlabel position , the initial time, with three rectangular boxes consistent.

3, finally is the bottom button design , mainly is the icon's design and the position, also has the toolbar response event.

The key code is the design of the response event, which is two functions moveLeft() and moveright();

#define TOLEFT 0#define ToRight 1

void Mainwindow::ontriggeraction (Qaction *action) {int action_num=action->data (). ToInt ();   if (action_num==toleft) moveLeft (); else if (action_num==toright) MoveRight ();}    void Mainwindow::moveleft () {maincnt+=1;    Moveanimation_left=new qpropertyanimation (Left_label, "geometry");    Moveanimation_left->setduration (200);    Moveanimation_left->setstartvalue (Left_rect);    Moveanimation_left->setendvalue (Right_rect);    Moveanimation_left->seteasingcurve (qeasingcurve::linear);    Moveanimation_left->start ();    Moveanimation=new qpropertyanimation (Center_label, "geometry");    Moveanimation->setduration (200);    Moveanimation->setstartvalue (Center_rect);    Moveanimation->setendvalue (Left_rect);    Moveanimation->seteasingcurve (qeasingcurve::linear);    Moveanimation->start ();    Moveanimation_right=new qpropertyanimation (Right_label, "geometry");    Moveanimation_right->setduration (200); Moveanimation_right->setstartvalue (right_reCT);    Moveanimation_right->setendvalue (Center_rect);    Moveanimation_right->seteasingcurve (qeasingcurve::linear);    Moveanimation_right->start ();    /** direction and label move in the opposite direction */Qrect rect (right_rect);    Right_rect=center_rect;    Center_rect=left_rect;    Left_rect=rect;    if (maincnt==6) maincnt=3;    if (maincnt==4) {right_label->raise ();    } else if (maincnt==5) {left_label->raise ();    } else if (maincnt==1) {center_label->raise ();    }}void mainwindow::moveright () {maincnt-=1;    Moveanimation_left=new qpropertyanimation (Left_label, "geometry");    Moveanimation_left->setduration (200);    Moveanimation_left->setstartvalue (Left_rect);    Moveanimation_left->setendvalue (Center_rect);    Moveanimation_left->seteasingcurve (qeasingcurve::linear);    Moveanimation_left->start ();    Moveanimation=new qpropertyanimation (Center_label, "geometry");    Moveanimation->setduration (200); MoveanimatIon->setstartvalue (Center_rect);    Moveanimation->setendvalue (Right_rect);    Moveanimation->seteasingcurve (qeasingcurve::linear);    Moveanimation->start ();    Moveanimation_right=new qpropertyanimation (Right_label, "geometry");    Moveanimation_right->setduration (200);    Moveanimation_right->setstartvalue (Right_rect);    Moveanimation_right->setendvalue (Left_rect);    Moveanimation_right->seteasingcurve (qeasingcurve::linear);    Moveanimation_right->start ();    /** direction and label move in the opposite direction */Qrect rect (left_rect);    Left_rect=center_rect;    Center_rect=right_rect;    Right_rect=rect;    if (maincnt==-1) maincnt=3;    if (maincnt==2) {left_label->raise ();    } else if (maincnt==1) {right_label->raise ();    } else if (maincnt==0) {center_label->raise (); }}

Code Analysis :

1, the first is the animation structure and initialization :

Moveanimation_left is to control the animation of the Left_label, the left is moved from Left_rect to Right_rect position, the control property is geometry, the movement of the curve is straight type.

Moveanimation_center is the control of the Center_label animation, the left shift is moved from the Center_rect position to the location of the Left_rect

Moveanimation_right is the control of the Right_label animation, and the left shift is moved from the Right_rect position to the center_rect position.

2, the next is the need to set the position of the rectangle, its setting effect is to achieve with the label synchronization, at the same time to achieve a circular palace effect. This is a key point to understand.

3,maincnt control, when the maximum number of mobile pictures, need to start again, at the same time in different mobile, the need for label display effect, that is, the top effect, raise ();

The result of the final implementation is as follows:

Detailed QT animation frame (2)---realize netease cloud music tag Switch