Qt World Summit: Register Today!

[Solved] How to set Qt QStateMachine animation duration

  • I'm trying to learn the Qt framework. My QStateMachine code does the correct thing (pressing the button makes the chat window popup change size). I can't change the speed of the animation to get a nice visual transition. Any suggestions?

    Here's the code:

    widget.setupUi( this );

    // chat window - Chat button opens
    ChatWindowClosedState = new QState();
    ChatWindowOpenState = new QState();

    ChatWindowOpenGeometry = widget.groupBox->geometry();
    ChatWindowClosedGeometry = widget.pushButton->geometry();
    ChatWindowClosedGeometry.translate( -ChatWindowClosedGeometry.width(), 0 );

    ChatWindowClosedState->assignProperty( widget.groupBox, "geometry", ChatWindowClosedGeometry );
    ChatWindowOpenState->assignProperty( widget.groupBox, "geometry", ChatWindowOpenGeometry );

    ChatWindowCloseTransition = ChatWindowClosedState->addTransition( widget.pushButton, SIGNAL( clicked() ), ChatWindowOpenState );
    ChatWindowCloseAnimation = new QPropertyAnimation( widget.pushButton, "geometry" );
    ChatWindowCloseAnimation->setDuration( 5000 );
    ChatWindowCloseTransition->addAnimation( ChatWindowCloseAnimation );

    ChatWindowOpenTransition = ChatWindowOpenState->addTransition( widget.pushButton, SIGNAL( clicked() ), ChatWindowClosedState );
    ChatWindowOpenAnimation = new QPropertyAnimation( widget.pushButton, "geometry" );
    ChatWindowOpenAnimation->setDuration( 5000 );
    ChatWindowOpenTransition->addAnimation( ChatWindowOpenAnimation );

    machine = new QStateMachine( this );
    machine->addState( ChatWindowClosedState );
    machine->addState( ChatWindowOpenState );
    machine->setInitialState( ChatWindowClosedState );

  • At first glnce it looks as if this should work. Can you post enough code so that I can compile it and try it here please? Preferably as minimal as you can get it.

  • I'll cut it down to a minimal program and post it. Thanks

  • ok, I've created a small "netbeans project":http://jsprenkle.reddawn.net/qttest.zip that duplicates the error. It contains all the source code and a compiled executable. It's compiled on ubuntu 10.04 Linux using gcc. Nothing particularly special about the environment.

  • OK I have figured it out after staring the problem in the face for a while. You have set the QPropertyAnimations to animate the wrong widget. You have:

    ChatWindowCloseAnimation = new QPropertyAnimation( widget.pushButton, "geometry" );
    ChatWindowOpenAnimation = new QPropertyAnimation( widget.pushButton, "geometry" );

    which tells it to animate the pushbutton not the groupbox as you intended. Simply change these two lines to:

    ChatWindowCloseAnimation = new QPropertyAnimation( widget.groupBox, "geometry" );
    ChatWindowOpenAnimation = new QPropertyAnimation( widget.groupBox, "geometry" );

    and it works as expected.

  • LOL! That was a pretty stupid mistake. I looked right past it myself.
    Thanks very much for the help.

    Ultimately I want to create visual transitions for changes to the GUI controls.
    Should I be using QTimeLine instead?

    I've also seen transitions that used 3d effects.
    (A window grows and rotates about all three axes as it opens).
    Are there classes that let me provide my own interpolation methods for animations?
    Perhaps I can inherit from the Qt classes and replace the interpolation algorithm?

    Thanks again!

  • I would carry on using QPropertyAnimation if I were you. It performs the donkey work for you.

    To provide your own interpolation methods (if none of the many pre-defined ones suit your use case) then you should provide a custom "EasingFunction":http://doc.qt.nokia.com/latest/qeasingcurve.html#EasingFunction-typedef and set this on your QEasingCurve via the "setCustomType()":http://doc.qt.nokia.com/latest/qeasingcurve.html#setCustomType function. Then set this easing curve onto your QPropertyAnimation.

    To do the "3D" effects you probably want to be using QGraphicsView and animating rotations about the x and y axis instead of the usual z-axis. The same state machine and animation framework applies equally well there.

  • Thanks Zap!
    You really know your stuff.

  • Ha, lol! Some of it. Still always more to learn :-)

Log in to reply