2015-02-11-Qt-Animation

Qt Animation

利用QStateMachine 管理 QPropertyAnimation Sample可以參考Sample code 另外可以參考官方文件

---

QStateMachine

首先利用 QState::assignProperty 設定想要的屬性 (ex:button title, geometry)

machine = new QStateMachine(this);
QState *s1 = new QState();
s1->assignProperty(iButton, "text", "S1");
QState *s2 = new QState();
s2->assignProperty(iButton, "text", "S2");
QState *s3 = new QState();
s3->assignProperty(iButton, "text", "S3");

接著可利用 QState::addTransition做state machine間的切換

s1->addTransition(iButton, SIGNAL(clicked()), s2);
s2->addTransition(iButton, SIGNAL(clicked()), s3);
s3->addTransition(iButton, SIGNAL(clicked()), s1);

然後很自然地把state加入state machine後就可start machine

machine->addState(s1);
machine->addState(s2);
machine->addState(s3);
machine->setInitialState(s1);
machine->start();

---

QPropertyAnimation

最後替QState之間加上動畫效果 可以如sampleconnect QState signal跟animation行為

void StateMachineQt::animate2()
{
    animation = new QPropertyAnimation(iButton, "geometry");
        animation->setDuration(5000);
        animation->setStartValue(QRect(310,135, iButton->width(),iButton-> height()));
        animation->setEndValue(QRect(160,440, iButton->width(),iButton->height()));
        animation->setEasingCurve(QEasingCurve::OutBounce);

        animation->start();
}

也可以利用前面s2->addTransition(iButton, SIGNAL(clicked()), s3); return的QSignalTransition做QSignalTransition::addAnimation即可 其中可針對前面assign過的屬性new QPropertyAnimation做addAnimation 舉例如下

s1->assignProperty(iButton, "pos", qpoint1);
s2->assignProperty(iButton, "pos", qpoint2);
QAbstractTransition *t =  s1->addTransition(iButton, SIGNAL(clicked()), s2);
t->addAnimation(new QPropertyAnimation(iButton, "pos"));

---

Key Words

• QStateMachine
• QState
• QSignalTransition
• QPropertyAnimation