Qt window adds zoom animation for the first time the window will flicker

Nan Feng

Hi, I use QPropertyAnimation to act on the geometry property of Form A. When I start the animation through the button in Form B, Form A will flicker for the first time when it starts animating, and then start multiple animations again. It won’t flicker, why is that?

mrjj

Hi
When you restart the animations, is the formA then in exact same position/size as before?

Nan Feng

Hi, I am very happy to get your reply. The position of form A is calculated relative to the position of the parent form and always appears in the upper left corner of the parent form. What I am changing through animation is the width of form A.
In order not to delay your precious time and solve the problem quickly, I recorded a 30-second video to explain my problem quickly (video link: http://qxgtityw1.hn-bkt.clouddn.com/demo.mp4 ), in the video, the program starts to trigger the animation through an event, the form A (green background) will flash once, and then the animation is all normal after multiple startups, even if the position of the form B is moved, it is still normal, but I don’t understand that the song flashes once What is the situation? When I tested it, there was a very small probability that this would not happen.

mrjj

Hi
Super with video. 😋
It looks like it's briefly shown with another size before the animation starts and sets the size for the first "key".
Do you set an initial very small size for it like
resize(0,0);

I think this effect comes from the fact that final size calculations are postponed to when it's shown.

so I assume you call show() and that animation->start()

and I think in that brief moment we see the sliding window with a bigger size than
it will get from PropAnim's first value. Then after that its all aligned and show as expected.

Ps. that App looks awesome.

Nan Feng

Hi, my code is as follows
In the constructor of the parent form:

 _jrsSetting = new JRSSetting(); // The window with green background in the video, the default size is 250x545
 _jrsSettingAniSize = new QPropertyAnimation(_jrsSetting, "geometry", this); // the animation of the form

Animation start code:

     _jrsSetting->move(x(), y()); // Move the green background form to the upper left corner of the parent form
     _jrsSettingAniSize->setStartValue(QRect(x(), y(), 0, 545));
     _jrsSettingAniSize->setEndValue(QRect(x(), y(), 250, 545));
     _jrsSettingAniSize->setDuration(500);
     _jrsSettingAniSize->setEasingCurve(QEasingCurve::InOutExpo);
     _jrsSettingAniSize->start();

     _jrsSetting->show();

Still no solution, hell. . . .

mrjj

@Nan-Feng
Hi
try to insert
jrsSetting->move(x(), y()); // Move the green background form to the upper left corner of the parent form
jrsSetting->resize(0,0); // new.. set init size to zero to sync with anim start value
....

Nan Feng

Hi, the charming me has appeared again. The animation thing uses resize(0, 0); it will still flicker. Put this aside, I will study it carefully when I have time. Now there is another question, I am also drunk. When setting the style sheet of the control, using the constructor's setStyleSheet(); unexpectedly some controls do not take effect, and the method of using a single control setting does not take effect (ui->btn01->setStyleSheet();), but in the .ui file Right-clicking a certain control in the designer to set the style sheet does not have this problem. What may be the reason for this phenomenon?

mrjj

@Nan-Feng
Hi.
Well programming when drunk is always fun :)

It normally just work regardless how you call setStyleSheet() but sheets are cascading, meaning it will affects the children also so
it can be another stylesheet on the button's parent that interfere.

However, from experience I have learn the best way to have a global stylesheet is to assign it to the Qapplication via
https://doc.qt.io/qt-5/qapplication.html#styleSheet-prop
as it then applies to all windows and widgets.

With a global stylesheet make sure you flag all Qss with class type to avoid overlap/clashes

Like

QPushButton { <<<< tell its for PushButton
order: 2px solid #8f8f91;
    border-radius: 6px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #f6f7fa, stop: 1 #dadbde);
    min-width: 80px;
}

Nan Feng

Hi, I probably found the reason for the flickering problem. The first reason is that it is affected by the style sheet (this I am blinded, what does this have to do with the style sheet...). There is also a second reason that this problem will also occur when the animation is started indirectly by receiving the signal (still under test). I recorded a short video to explain to you (video address: http://qxgtityw1.hn-bkt.clouddn.com/anidemo.mp4).
You can see that there is a button on the main program window, the background color is set to red in the constructor, but it is in a commented state.

When I start the program and click the button to start the animation, the first time there is no flicker, the second time it flickers, and the flicker is not used many times afterwards.
Cancel the red background style annotation of the button, start the program, click the button to start the animation, only once there is no flicker, and all the remaining tests flicker.

What's the situation with this?

mrjj

@Nan-Feng
Hi
I also did play around with it.
I still think it's just a bit random and we for a split second see the sliding form in its initial size and then
the animations control it.
In any case, this is why QML is good at animations and QWidgets not si much:)

J.Hilk

@Nan-Feng said in Qt window adds zoom animation for the first time the window will flicker:

What may be the reason for this phenomenon?

what version of Qt do you use? there was a bug, that when a stylesheet was set via Designer and changed via code at runtime, that changes were not applied correctly. :(

To the flickering problem, have you tried, moving it way off screen ? ( a million pixels away e.g) show() it, and then moving it into position ?

I remember a workaround, where I did it that way.