How to change two images at same interval in toucghGFX Animation?

[jsalg.1]

HI ,

I have one requirement, i.e I need to implement animation using touchGFX tool. I have 7 images as part animation each image has to change in different interval. challenge here is below each image there is one more image which indicates the progress of animation. meaning I have image below that image there is dot(.) image. it's like Bold dot and normal dot (. .). as above image changes below dot image (bold dot) also must change. basically, image and bold dot has to change at same instant.

I tried my best but there is always some lag between main image and dot image. 

could anybody help me that how can i synchronise this so that user can feel both main image and dot change at same instant(meaning at same time)

Regrds,

jsalg

[Osman SOYKURT]

Hello @jsalg.1 ,

To make it synchronized, you have to make sure you invalidate your top and bottom images at the same time. How do you implement your animation? Do you use an animated image widget or a single image with multiple with multiple bitmaps , or maybe something else?

[jsalg.1]

Hi @Osman SOYKURT 

First of all, thank you so much for your response. I have multiple images. Image1 to Image6 (to display on top) first image has to display 1200ms, from image2 to image5 800ms each and image6 has to display 2000ms.

and below I have two images say belowImage1 (with two dots first dot is bold . .)) belowImage2 (with 2 dots here second dot is bold . .)

requirement is top images from image1 to image3 should sync with belowimage1 and image4 to image6 should sync with belowimage2.

currently what happening is after image3 there is some lag between top image and below image meaning image4 and belowimage2 are not rendering at same time. there is some lag.

[Osman SOYKURT · Accepted solution]

Hi @jsalg.1 ,

My first tip would be to use a single animated image widget instead of multiple image widgets for your top image, it gonna make your code more simple and easier to read. It will also avoid you from rendering 2 or more time your top image.
Then, in a handleTickEvent, you can try to check if image1 is Visible, then show belowimage1 , and if image 4 is visible, show belowImage2.
Something like :

void Screen1View::handleTickeEvent()
{
    if (animatedImage1.getBitmapId() >= BITMAP_IMAGE_01_ID && animatedImage1.getBitmapId() <= BITMAP_IMAGE_03_ID)
    {  
        belowImage1.setVisible(true);
        belowImage1.invalidate();
        belowImage2.setVisible(false);
        belowImage2.invalidate();
    }
    else if (animatedImage1.getBitmapId() >= BITMAP_IMAGE_04_ID && animatedImage1.getBitmapId() <= BITMAP_IMAGE_06_ID)
    {  
        belowImage1.setVisible(false);
        belowImage1.invalidate();
        belowImage2.setVisible(true);
        belowImage2.invalidate();
    }
}

[jsalg.1]

Awesome!!!!!!!.

@Osman SOYKURT  Thank you so much.

Best suggestion. I tried it, it is working fine.

Good Luck.