body0314的部落格

這幾天在跟同事討論前端設計時，無意間發覺原來QT有動畫模式!

終於可以不用QTimer去移動元件拉

以下是使用QPropertyAnimation方法去移動和縮放button的簡單範例

記得要#include<QPropertyAnimation>

先在.h檔地方宣告

QPropertyAnimation*animation;

以下是.cpp部分

AnimationTest::AnimationTest(QWidget*parent):

QMainWindow(parent),

ui(new Ui::AnimationTest)

{

    ui->setupUi(this);

    Istmp=true;

    animation=new QPropertyAnimation(ui->pushButton,"geometry");

}

new一個QPropertyAnimation，第一格參數填入要做動畫的元件，第二格填入name。

voidAnimationTest::on_pushButton_clicked()

{

  if(Istmp)

  {

    animation->setDuration(800);

    animation->setKeyValueAt(0,QRect(0,0,40,40));

    animation->setKeyValueAt(0.2,QRect(10,10,20,20));

    animation->setKeyValueAt(1,QRect(0,0,this->width(),this->height()));

    //    animation->setStartValue(QRect(10, 10, 100, 30));

    //    animation->setEndValue(QRect(250, 250, 50, 30));

    animation->start();

    Istmp=false;

  }

  else

  {

    animation->setDuration(800);

    animation->setKeyValueAt(0,QRect(0,0,this->width(),this->height()));

    animation->setKeyValueAt
   (0.2,QRect(10,01,this->width()-20,this->height()-20));

    animation->setKeyValueAt(1,QRect(0,0,40,40));

    //    animation->setStartValue(QRect(10, 10, 100, 30));

    //    animation->setEndValue(QRect(250, 250, 50, 30));

    animation->start();

    Istmp=true;

  }

}

click功能縮小時按下會放大，放大時按下會縮小。

setDuration(800)
是動畫的總時間

setKeyValueAt(0,QRect(0,0,40,40))
第一格參數則是總時間的0%時做的動畫，
以此類推如果填入0.5則是總時間的50%時會做的動畫。

QRect(0,0,40,40)則是此動畫button的位置與大小。
在這裡分三段動畫進行是想說按下去後有被按壓的感覺再放大，
不過效果不是很好XD，畢竟是動畫新手還要改善。

animation->start()
開始動畫。

也可使用setStartValue和setEndValue，動畫開始與動畫結束功能完成一連串動畫。


還有很多種動畫方法~就繼續研究吧!