Programming

Qt Animation

  1. 1. Qt Animation
    1. 1.1. QStateMachine
    2. 1.2. QPropertyAnimation
  2. 2. Key Words

Qt Animation

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

QStateMachine

QStateMachine

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

1
2
3
4
5
6
7
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間的切換

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

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

1
2
3
4
5
machine->addState(s1);
machine->addState(s2);
machine->addState(s3);
machine->setInitialState(s1);
machine->start();

QPropertyAnimation

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

1
2
3
4
5
6
7
8
9
10
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
舉例如下

1
2
3
4
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