40.QT-QPropertyAnimationdong和QParallelAnimationGroup動畫實現

 

• 簡述:QPropertyAnimation (動畫類,用來向QObject對象添加動畫)

該類的繼承框圖以下所示:

 

1.QAbstractAnimation(全部動畫的抽象基類)

該抽象類爲QPropertyAnimation提供了動畫播放,暫停,中止,持續時間,循環週期等抽象函數.

其中經常使用的成員函數以下所示:

int   currentLoop() const                   //獲取當前動畫已經循環了幾個週期了

int   currentTime() const                     //獲取當前動畫已經啓動了多少時間

void   setLoopCount(int loopCount);           //設置動畫循環次數,默認爲1(表示動畫運行1次就中止),若是爲-1,則表示動畫一直循環,直到調用stop()爲止.

void  setDirection(Direction direction);     //設置動畫方向,默認爲QAbstractAnimation::Forward(表示從起始點到結束點),也能夠設置爲QAbstractAnimation::Backward.

經常使用信號函數以下所示:

void   currentLoopChanged(int currentLoop);      //動畫運行週期信號函數,當週期進行新的循環時,則會發出這個信號

void   finished();                    //當動畫完成後,則會發出這個信號

void  stateChanged(QAbstractAnimation::State newState, QAbstractAnimation::State oldState);   
 //當動畫發生改變(中止/暫停/運行)時,則會發出這個信號, newState表示動畫改變後的狀態, oldState表示動畫改變前的狀態

void  directionChanged(QAbstractAnimation::Direction newDirection);//當動畫發生方向改變時,這會發出這個信號,

經常使用槽函數以下所示:

void  pause();                          //暫停動畫

void  resume();                       //恢復動畫

void  setCurrentTime(int msecs);   //直接更改當前動畫的進度時間,能夠經過currentTime()函數來獲取改的值

void  setPaused(bool paused);   //和pause()相似,可是有個參數,若是paused爲真則暫停動畫,不然就是恢復動畫

void  start(QAbstractAnimation::DeletionPolicy policy = KeepWhenStopped);   //啓動動畫
                                                     //默認參數爲KeepWhenStopped,表示中止動畫時,保持當前狀態
                                                     //若是改成DeleteWhenStopped,則表示中止動畫時,自動刪除


void  stop();               //中止動畫

2.QVariantAnimation (動畫的多樣類)

該QVariantAnimation類主要是爲QPropertyAnimation類提供動畫起始結束的位置,方向,運動等機制

該類經常使用函數以下所示:

void         setStartValue(const QVariant &value);           //設置動畫啓動的位置
void         setEndValue(const QVariant &value);             //設置動畫結束的位置
void         setDuration(int msecs);                         //設置動畫運行一次須要的時間,單位爲毫秒

QEasingCurve         easingCurve() const;                     //返回EasingCurve曲線的設置(EasingCurve:能夠設置動畫運動曲線的動做)

void         setEasingCurve(const QEasingCurve &easing);       //設置動畫運動時的EasingCurve曲線

void         setKeyValueAt(qreal step, const QVariant &value);       //設置動畫在不一樣時間幀時所在的位置
 //step(0~1): 時間幀,0表示爲開始的幀,1表示結束的幀,0.5表示在中間的時間幀
 // value:表示對應的step時間幀所在的動畫位置(好比設置抖動,則會用到該函數)

QVariant  keyValueAt(qreal step) const;      //返回step時間幀所在的動畫位置

該類經常使用信號函數以下所示:

void         valueChanged(const QVariant &value);
                          //當運行的動畫位置在改變時,則會發出這個信號

 

3.QPropertyAnimation (用來向QObject對象添加動畫屬性)

該類的構造函數以下所示:

QPropertyAnimation(QObject *target, const QByteArray &propertyName, QObject *parent = Q_NULLPTR);
// target:要實現動畫的目標對象
// propertyName:動畫屬性名稱
// parent:該動畫的父類,通常設爲this

 

4.示例1-界面實現降低動畫

效果以下:

PS:因爲GIF錄製沒法錄製帶陰影的界面,因此將界面陰影屏蔽掉了.

PS:若是動畫啓動失敗,則看看父界面是否佈局了.

代碼以下:

void loginwindow::initAnimation()                 //在構造函數裏調用該函數
{
    DownAnimation = new QPropertyAnimation(this,"geometry",this);
    DownAnimation->setDuration(300);             //設置動畫時間
    QDesktopWidget* desktop = qApp->desktop();
    DownAnimation->setStartValue(QRect((desktop->width() -this->width())/2,(desktop->height() -this->height())/2,this->width(),0));        //起始位置
    DownAnimation->setEndValue(QRect((desktop->width() -this->width())/2,(desktop->height() -this->height())/2,this->width(),this->height()));            //結束位置
     DownAnimation->start();              //啓動動畫
}

這個咱們只是實現單個動畫,若是該動畫後面還要實現其它動畫,則須要信號槽機制來實現.

 

5.示例2-經過信號槽機制實現多個動畫串行運行

啓動界面時,經過降低動畫結束後,再來繼續實現logo向上浮的動畫(參考的QQ啓動畫面)

效果以下所示:

代碼以下:

//設置圖標
void loginwindow::setIconPix(QLabel *l,const QString & name,QSize size)
{
    QPixmap pix(name);
    pix = pix.scaled(size,Qt::IgnoreAspectRatio);
    l->setPixmap(pix);
    l->setFixedSize(size);
}
//初始化動畫
void loginwindow::initAnimation()
{
    QSize size(110,110);
    logo = new QLabel(this);
    setIconPix(logo,":logo",size);                //設置logo圖標
    logo->move(this->width()/2-size.width()/2,142);    
    logo->hide();                                  //先隱藏

    //設置圖標上浮動畫
    LogoAnimation = new QPropertyAnimation(logo,"geometry",this);
    LogoAnimation->setDuration(200);
    LogoAnimation->setStartValue(QRect(this->width()/2-size.width()/2,142,100,100));
    LogoAnimation->setEndValue(QRect(this->width()/2-size.width()/2,107,100,100));

     //設置界面降低動畫
    DownAnimation = new QPropertyAnimation(this,"geometry",this);
    DownAnimation->setDuration(300);
    QDesktopWidget* desktop = qApp->desktop();
    DownAnimation->setStartValue(QRect((desktop->width() -this->width())/2,(desktop->height() -this->height())/2,this->width(),0));
    DownAnimation->setEndValue(QRect((desktop->width() -this->width())/2,(desktop->height() -this->height())/2,this->width(),this->height()));
    DownAnimation->start();

    //鏈接槽函數
    connect(DownAnimation,SIGNAL(finished()),this,SLOT(DownAnimationOnfinished()));
}

//槽函數,用來啓動圖標上浮動畫
void loginwindow::DownAnimationOnfinished()
{
    logo->show();
    LogoAnimation->start();
}

6.示例3-界面關閉時實現居中關閉

效果以下:

 

PS：GIF錄製的幀數不達標,有點延遲.

關閉居中的代碼以下:

//初始化動畫
void loginwindow::initAnimation()
{
  //... ... 省略其它動畫初始化
  CloseAnimation = new QPropertyAnimation(this,"geometry",this);
  CloseAnimation->setDuration(150);

  connect(ui->title_close,SIGNAL(clicked()),this,SLOT(CloseAnimationOnStart()));
  connect(CloseAnimation,SIGNAL(finished()),this,SLOT(close()));
};

//關閉槽函數,因爲界面隨時會在任意XY位置,因此須要在關閉時,再來初始化CloseAnimation的起始和結束的動畫位置
void loginwindow::CloseAnimationOnStart()
{
    CloseAnimation->setStartValue(QRect(this->geometry()));
    CloseAnimation->setEndValue(QRect(this->x(),this->y()+this->height()/4-2,this->width(),4));
    CloseAnimation->start();
}

7.QParallelAnimationGroup並行動畫組

該QParallelAnimationGroup類主要是用來封裝多個QPropertyAnimation動畫類,從而實現並行運行多個動畫

來個示例,當咱們點擊登陸按鈕時,同時的將logo向降低,而且將stackedWidget登陸窗口也向降低,再從新升起stackedWidget下的第二個校驗登陸窗口.

效果以下:

 

實現的代碼以下:

void loginwindow::initAnimation()
{
    QSize logoSize(110,110);

   //此處忽略其它動畫... ...


    //圖標下浮動畫
    LogoDownAnimation = new QPropertyAnimation(logo,"geometry",this);
    LogoDownAnimation->setDuration(200);
    LogoDownAnimation->setEndValue(QRect(this->width()/2-logoSize.width()/2,160,logoSize.width(),logoSize.height()));
    LogoDownAnimation->setStartValue(QRect(this->width()/2-logoSize.width()/2,107,logoSize.width(),logoSize.height()));

    //stackedWidget窗口下浮動畫
    LogoInDownAnimation = new QPropertyAnimation(ui->stackedWidget,"geometry",this);
    LogoInDownAnimation->setDuration(400);
    LogoInDownAnimation->setStartValue(QRect(0,ui->widget_title->height(),ui->stackedWidget->width(),ui->stackedWidget->height()));   //從title界面的高度起點
    LogoInDownAnimation->setKeyValueAt(0.6,QRect(0,ui->window->height(),ui->stackedWidget->width(),ui->stackedWidget->height()));     //到主界面底部
    LogoInDownAnimation->setEndValue(QRect(0,logoSize.height()/2+140,ui->stackedWidget->width(),ui->stackedWidget->height()));      //到150的高處

    //設置並行動畫組
    LoginGroup = new QParallelAnimationGroup;
    LoginGroup->addAnimation(LogoDownAnimation);
    LoginGroup->addAnimation(LogoInDownAnimation);


    connect(ui->login,SIGNAL(clicked()),LoginGroup,SLOT(start()));                                                 
    connect(ui->cancelLogin,SIGNAL(clicked()),LoginGroup,SLOT(start()));
    connect(LoginGroup,SIGNAL(finished()),this,SLOT(goCheckorLoginFinished()));
}

void loginwindow::goCheckorLoginFinished()
{
    if(LoginGroup->direction() == QAbstractAnimation::Forward)  
    {
        ui->stackedWidget->setCurrentIndex(1);         
        LoginGroup->setDirection(QAbstractAnimation::Backward);
    }
    else
    {
        ui->stackedWidget->setCurrentIndex(0);     
        LoginGroup->setDirection(QAbstractAnimation::Forward);
    }
}