Drawing glow pulsing image animation

Marek Belisko

Hi,

I'm trying to draw glow image on top of background image. Code looks like (called when some even occur):

 QImage image = QImage();
 image.load("image1.png");

 QPainter p;
 if (!p.begin(&image)) {
       qDebug() << "Cannot begin painter";
 }
 p.drawImage(QRect(120, 120, 240, 240), QImage("image_center.png"));
  
...

So basically I have image in center of other image. Question is how to implement some animation (pulsing center image) for center image. I was looking into QPropertyAnimation but I'm unsure how to do it in this case when one image is overlay to other ones. Thanks a lot for any pointers.

jsulm

@Marek-Belisko If this animation is static you could simply use an animated GIF.

"QPropertyAnimation but I'm unsure how to do it in this case when one image is overlay to other ones" - ell, since you're rewriting the whole image in each iteration it should work. I just don't know what exactly you want to animate (the size of the second image?).

Marek Belisko

I'll try to use animated gif file.
My intention is to be able to change frequency of breathing in animation and not update gif file all the time.
I'm rewriting image only when some event happens -> it can be 3-4 secs but breathing should be in 1sec or so. Can I hook QPropertyAnimation to QPainter when I'm writing center image?

What I'm trying to achieve is something like: https://drive.google.com/file/d/1jwSo2i09wJQM1oEoFWY9qJVA3uyI0ZDP/view?usp=sharing

Thanks.

jsulm

@Marek-Belisko said in Drawing glow pulsing image animation:

Can I hook QPropertyAnimation to QPainter when I'm writing center image?

You could add a custom property to your class and in its set method do the drawing of the image and then call update() which triggers paintEvent where you show the image :-)

Marek Belisko

I have pushed my code which I'm using for testing here: https://github.com/nandra/qml-test/blob/master/imageprocessor.cpp.
My idea is to have background image changed based on event and also in middle have breathing glow. I tried to add gif image but it's static only and no animation is performed. I pushed more less whole code. Is my approach correct or am I completely on wrong track? Thanks.

jsulm

@Marek-Belisko There is no animation, right?

p.drawImage(QRect(120, 120, 240, 240), QImage(GLOW_IMAGE_PATH)); // Fix numbers here

Marek Belisko

Yes this is actual code I have now without animation. I'm unsure how to add animation to that :)

jsulm

@Marek-Belisko I already gave you a hint.