How to animate Rectangle2D opacity?

[lihis]

Hello.

I tried animating Rectangle2D size and it was kind of ok, but not great. Then i tried animating scaling instead of size and it was better, but still not quite there yet. I think a "fade in" effect is needed, but i don't know how to do that.

Also tried animating Text2D font color, but i couldn't do that either. Apparently node.getScene is not a function. I don't know man.

Thanks for reading.

[iiceman]

Hi there,

a playground is always helpful to show what you have already tired and people are more likely to help you out when there is a playground to play around with  Here is a playground that shows how to animate the opacity thrown together from the Canvas2D (https://doc.babylonjs.com/tutorials/Using_the_Canvas2D) and the Animations tutorials (https://doc.babylonjs.com/tutorials/Animations): http://babylonjs-playground.com/#272WI1#72

In the same way you can add other animations. Animating the color of the text might be a bit more complicated since you have to animate the hex value as far as I can tell. Maybe somebody else has a good idea how to do that easily.

[lihis]

@iiceman

Hey.

Thanks for playground example.

So, i tried looking in ( http://doc.babylonjs.com/classes/2.4/Rectangle2D ) and then in Shape2D and then RenderablePrim2D and so forth and i did not actuallysee any mention of opacity property so i was trying to animate the fill property not the opacity value since i didn't know such thing actually existed. I still would like to know how to animate the color, or border color, or text color. That still remains a mystery.
Actually, i did try to animate opacity value one time. And alpha value also. But i tried to do it with CreateAndStartAnimation ( http://babylonjs-playground.com/#272WI1#73 ) which does not seem to work?

Anyway, thanks again!

[iiceman]

Yeah, seems like the CreateAndStartAnimation only works for Meshes but not for the Rectangel2D.

About the Color: basically you can animate them like that: http://babylonjs-playground.com/#272WI1#74

But I only managed to increase a certain value so far... I am sure you can find out how to do transitions between color values when you search online. 

[lihis]

Okay, yep yep, something like that does work.

http://babylonjs-playground.com/#272WI1#76 here for example i animated some text. So you can use Color4:s.

But it's too difficult for me, that's not a convenient way to animate in my opinion. Maybe someday i'll see someone using the animation system to animate those.

[iiceman]

Your are right. It is a bit too complicated. There might be other options that I just don't know about. Lets ask @Nockawa if he has a better solution for you!

Anyway, even if there is nothing better yet: thanks to the open source nature of BabylonJs you can always decide to create a Pull Request and add something yourself!

[Nockawa]

@lihis Hi, can you summarize what you're trying to do please, I got lost in the whole discussion thread.

Thanks