Uncknowed Delay in Fade in/ou animation with QPropertyAnimation

mrjj

hi
Look here
https://evileg.com/en/post/423/

Bascially you can just add what you have to the group
animationGroup->addAnimation(fadeEffect );

and then use
https://doc.qt.io/qt-5/qsequentialanimationgroup.html#addPause
in to add pause in between between

eyllanesc

    QGraphicsOpacityEffect *fadeEffect = new QGraphicsOpacityEffect(this);
    m_ui->ui_graphicsView->setGraphicsEffect(fadeEffect);

    QPropertyAnimation *anim1 = new QPropertyAnimation(fadeEffect, "opacity");
    anim1->setDuration(7000);
    anim1->setStartValue(0.0);
    anim1->setEndValue(1.0);
    anim1->setEasingCurve(QEasingCurve::InBack);

    QPropertyAnimation *anim2 = new QPropertyAnimation(fadeEffect, "opacity");
    anim2->setDuration(7000);
    anim2->setStartValue(1.0);
    anim2->setEndValue(0.0);
    anim2->setEasingCurve(QEasingCurve::OutBack);

    QSequentialAnimationGroup *group = new QSequentialAnimationGroup;
    group->addAnimation(anim1);
    group->addAnimation(anim2);
    group->start(QPropertyAnimation::DeleteWhenStopped);

Side note: If you want to display images in QGraphicsView IMO it is better to use a single QGraphicsPixmapItem and then switch QPixmaps when necessary.

jawad_soft

@eyllanesc said in Uncknowed Delay in Fade in/ou animation with QPropertyAnimation:

QSequentialAnimationGroup

@mrjj @eyllanesc ,

Even with QSequentialAnimationGroup , any animation are blocked with the duration that i chose, it's switch directly to next diplayed think i have in my app, this is why i have used "Delay_MSec(7000);" and also after every "fade out animation " i have to disable one qlabel and activate another !!!

I never use QGraphicsPixmapItem !!

mrjj

hi
but for the same effect as
Delay_MSec(7000);
you need to use the addPause

Did you do that ?

jawad_soft

@mrjj @eyllanesc

The addPause doesn't change anything, the animation style none blocking and the delay are always present bettwen each animation!

                    fadeEffect = new QGraphicsOpacityEffect(this);
                    m_ui->ui_graphicsView->setGraphicsEffect(fadeEffect);   
               
                    // ****************************  logo fade in*******************************
                    animLogo0 = new QPropertyAnimation(fadeEffect,"opacity");
                    animLogo0->setDuration(8000);
                    animLogo0->setStartValue(0.0);
                    animLogo0->setEndValue(1.0);
                    animLogo0->setEasingCurve(QEasingCurve::InBack);


                    // ****************************  logo fade out*******************************
    
                    animLogo1 = new QPropertyAnimation(fadeEffect,"opacity");
                    animLogo1->setDuration(8000);
                    animLogo1->setStartValue(0.0);
                    animLogo1->setEndValue(1.0);
                    animLogo1->setEasingCurve(QEasingCurve::OutBack);

                    // ****************************  logo fade in*******************************

                    animLogo2 = new QPropertyAnimation(fadeEffect,"opacity");
                    animLogo2->setDuration(8000);
                    animLogo2->setStartValue(0.0);
                    animLogo2->setEndValue(1.0);
                    animLogo2->setEasingCurve(QEasingCurve::InBack);


                    // ****************************  logo fade out*******************************

                    animLogo3 = new QPropertyAnimation(fadeEffect,"opacity");
                    animLogo3->setDuration(8000);
                    animLogo3->setStartValue(1.0);
                    animLogo3->setEndValue(0);
                    animLogo3->setEasingCurve(QEasingCurve::OutBack);


                    group->addAnimation(animLogo0);
                    group->addPause(8000);
                    group->addAnimation(animLogo1);
                    group->addPause(8000);
                    group->addAnimation(animLogo2);
                    group->addPause(8000);
                    group->addAnimation(animLogo3);
                    group->addPause(8000);
                    group->start(QPropertyAnimation::DeleteWhenStopped);

                   QTextStream(stdout) <<"Animation End"<< endl;

I try also to put all the group->addPause(8000) => group->addPause(100) but that not block anything !
the " QTextStream(stdout) <<"Animation End"<< endl;" should be executed after the end of all animation, but it's not what happen

mrjj

@jawad_soft
Hi
well it won't block anything (as blocking is bad in event-driven apps)
but should run them in order.

Yes "Animation End" will show at once as they
do not block and its expected to use signal and slot
for such things.

Are you saying that addPause Does not add a pause between the animations ?

jawad_soft

@mrjj ,

My fault, the addPause add effectively a pause between the animations, but the dealy are alway present !

I decide to use QAbstractAnimation::finished signal and private slots for every animation to debug the problem and understand exactly when the delay that i want to remove are present, and it's appear that this delay are present in the end of every animation, maybe because i'm increasing/ decresing opacity of the widget and it's take to long time to get opacity(0) maybe. there is any function that make me to dispaly the actual opacity of the widget ?

Thanks again for your support !

mrjj

@jawad_soft
Hi
Good work.
There is only the getter for opacity and I'm pretty sure it will report the value you just set.

if you make the span less 1.0 -> 0.5
does this pause till happens?

jawad_soft

yeah i try this trick ! and the opacity of the widget pause on 0.5 i think, but still the delay present ! maybe playing with the opacity of all the widget is not good idea !

My goal is simple ! fade in/ou two image in the beging of my app, but it's morte complicated that it's appear hahaha

i creat timer slot that print in the actual opacity every 20Ms, and it's look like good, it's increas/decreas normally

Chris Kawa

There was a similar question recently where someone wanted to animate a gif in a graphics item. Like there - using widgets for animation, much so with their opacity, is a very heavy thing to do.
A much simpler approach is to make a custom graphics item that just uses painter to draw two images over each other using setOpacity().
You can use QTimeline to animate it and repaint on its frameChanged signal.

Here's the custom class that draws gif: https://forum.qt.io/topic/123784/animated-gif-in-qgraphicsscene-qgraphicsview/4
Should be easy enough to change to drawing two images with a timeline.

jawad_soft

@Chris-Kawa Thanks for suggestion , i will try this !