Fade in / Fade-out Images by PySide


In previous article, I described how to slide the image by using animation. This time, let’s challenge to how to fade in / fade out the image. In addition, I also discussed how to connect multiple animations.

As ever, I have been verified by Python3.3 any code.

Put the Basic Image

As usual, I’ll make the first skeleton. As easy to see how the fade-in, let’s display image “fuga.jpg”, slightly larger, as an image of the background.

When you run, it is as follows.
bg

Then, over this background, try to display the image “hoge.jpg”, small a little. Add the following code.

When you run, “hoge.jpg” will be displayed in the upper left corner over the “fuga.jpg” as follows.
bg_fg

Note the first line of the [Code 2]. I’m giving as an argument, “blabel” when generating the “flabel”. In this way, “flabel” is treated as a child of “blabel”. (The parent of “flabel” is “blabel”) In the way, “flabel” is displayed in the interior of the “blabel”.

Set the Opacity Effect

You were ready for basic part so far. So you’ll think about the realization of fade-in. To fade in the “hoge.jpg”, the file should be transparent in advance, and be opaque gradually. This, the effects “opaque”, you can represent in “QGraphicsOpacityEffect” object. You can set the opacity effects to “hoge.jpg”, do the following.

Initial value of opacity of “QGraphicsOpacityEffect” is 70%. You can change this value in the method “setOpacity”. It is as follows when displayed at 50%.
OpacityEffect

Realize Fade-in

Because “opacity” is a “property”, it can be realized fade-in if animated using “QPropertyAnimation”. The method that returns the fade-in animation, you can be defined as follows.

You will give “target” to “QGraphicsOpacityEffect” object to be animated. And give “duration” to the time spent in the animation in msec. You can fade in view in the following manner.

It is as follows when you run.

There is one caveat here. The animation object, you must choose not to be destroyed until the end of the animation. It is for this reason to make โ€‹โ€‹up the method “fadein()” to return the animation object. You do not get the effect of animation if “fadein()” performs the method “start()” on the inside and not return the animation object. Because the animation objects is destroyed when returned from “fadein()”.

Define the Fade-out

After understand “Fade-in”, “Fade-out” is obvious. You can define the method by the following. You only need to replace the end value as the initial value of the animation.

Connect Fade-in and Fade-out

Now, try to fade out after fade in. Code 5 is rewritten as follows.

With “QAnimationGroup”, you can treat multiple animations together as a single animation. In a derived class of “QAnimationGroup”, “QSequentialAnimationGroup” allows you to connect to order multiple animations. As described above, and then run the animation in the order in which they were added in “addAnimation()”. “addPause()” make a suspended state between animation and animation.

In addition, “QParallelAnimationGroup” is also derived class “QAnimationGroup”. This can be done at the same time the animation that you have registered. You can be realized, such as fade-in while slide. Look at the reference of each class that came out in this article, please try to adjust the detailed settings.

In addition, I have provided in here the complete code.
[Referenced Site]
PySide_Pitfalls | Qt Wiki | Qt Project

[Related Site]
junf/PySideSamples ยท GitHub

[Related Article]

  1. To Display Images in Full-Screen by PySide | DeVlog – Fly With Your Devil’s Wings –
  2. Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings –
  3. Realize Zoom-in and Zoom-out the Image in PySide | DeVlog – Fly With Your Devil’s Wings –

Hamza Cavus

Awesome. Helped me alot since there was no pyside tutorial for fading in and out. Works like a charm ๐Ÿ˜€
Thanks.

Hamza Cavus

One mor thing I think is useful is to destroy the widget after fading is done.
In my case I was fading out a splash screen but was unable to click on the widgets behind later. Because the Image is still there just not visible.
So in case someone has same problem just add this:

self.an.finished.connect(self.splash.deleteLater)

Your email address will not be published.