Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to sequentially animate through different QStates after single button click



  • I have an image displayed on a QGraphicsView and I'm trying to make it move using a state machine. After clicking the image I want it to move down by 200px and then across to the right another 200px. This is the code I have so far but the issue is that instead of the image moving in the L shape as desired it moves diagonally i.e. instead of the animation transitioning from state 1 to state 2 and then to state 3, the animation transitions state 1 to state 3 skipping state 2.

    @stateMachine = new QStateMachine(this);

    QState *state_01 = new QState(stateMachine);
    QState *state_02 = new QState(stateMachine);
    QState *state_03 = new QState(stateMachine);

    state_01->assignProperty(pixmap, "pos", QPointF(0, 0));
    state_02->assignProperty(pixmap, "pos", QPointF(0, 200));
    state_03->assignProperty(pixmap, "pos", QPointF(200, 200));

    QAbstractTransition *transition_01 = state_01->addTransition(pixmap, SIGNAL(pixmapPressed()), state_02);
    QAbstractTransition *transition_02 = state_02->addTransition(state_03);

    transition_01->addAnimation(new QPropertyAnimation(pixmap, "pos"));
    transition_02->addAnimation(new QPropertyAnimation(pixmap, "pos"));

    stateMachine->setInitialState(state_01);
    stateMachine->start();@

    I think I'm probably misusing the statement for the transition of state 2 to state 3 but I've tried other methods without success. The only other idea I haven't tried would be to check if the image has reached it's position for state 2 and somehow emit a signal to start the next transition to state 3 but I feel that maybe what I'm asking for can all be done with the state machine framework. How can I get the image to animate through the 3 states after clicking on the image only once to start the entire process?


  • Qt Champions 2017

    Welcome to the forum.

    You need to make the two animations separately for L shape movement. Create one animation to move down and another animation to move right. Place these animations in QSequentialAnimationGroup.

    @QSequentialAnimationGroup *group = new QSequentialAnimationGroup;

    group->addAnimation(anim1);
    group->addAnimation(anim2);@

    Regarding the transition to state 3, you have added unconditional transition from State 2 to State 3. What is the trigger for State2 and State 3. If you have add the appropriate trigger like Signal, then it will work.


Log in to reply