Animating Label Color Changes In Codename One

Question

I have an indicator in my app, which has an icon (label) with a numeric value overlaid on it.

I want to bring attention to the fact the value changed, by changing the color of the label icon. I can do this by swapping out a different image made using a different color.

But I would like to return it back to its original color, and still see the color change and change back on the screen. I thought I might be able to use animation to do this, but I can't figure out how.

Update:

Applying Francesco's suggestion, like so:

replace(labelstd, labelhlt, CommonTransitions.createFade(500));
replace(labelhlt, labelstd, CommonTransitions.createFade(500));

I find that it does not fade to the highlight color, and then fade back, as I would like. It fades to the highlight color then instantly flips back. I assume that this is because the fades are actually happening in parallel.

Do I need to use threads to handle this, or is there another way to do this?

Label.setIcon(...) is not enough? Do you want something like a fade effect? In that case, there is Container.replace(Component current, Component next, Transition t) that you can use to switch two Labels. As transition, you can use CommonTransitions.createFade(int duration) or any other transition provided by that class. — Francesco Galgani
yes, the problem with setIcon is that it makes a permanent change, where I am looking to change it then change it back, like a glow effect. I have just played a bit with the replace function and Fade transition - it looks like this is exactly what I am looking for - thanks! — Ken Clark

Ken Clark Ken Clark · Accepted Answer · 2020-02-07T22:22:35

Thanks to @Francesco for the suggestion. Here is how I made this work to create a "pulse" type graphic effect:

   public void fade()
   {
      replace(imageLabel, fadeImage, CommonTransitions.createFade(300), () -> reverseFade(), 0);
   }

   private void reverseFade()
   {
      replace(fadeImage, imageLabel, CommonTransitions.createFade(250));
   }

Animating Label Color Changes In Codename One

1 Answers