Create a loading spinner animation using TextureMapper in TouchGFX.

[shebannavarmahantesh]

Hi,

How can we create a loading spinner using TextureMapper in TouchGFX. Currently we are using a Texture Mapper and in interactions for every tick rotating the texture mapper but not able to achieve the smoothness in rotation.

Can you please guide on how we can achieve the same and also explain how Linear Easing Options (LinearEaseIn, LinearEaseOut and LinearEaseInOut) work?

Attached is the expected result.

[Mohammad MORADI ESFAHANIASL]

Hello @shebannavarmahantesh ,
You can rotate the TextureMapper with more precision if you do it in code. I have added a simple code to show you how it is done. You need to know about handleTickEvent() function.
 

//In your loading screen
void LoadingScreenView::handleTickEvent()
{
    loadingSpinner.setZAngle(textureMapper1.getZAngle() + 0.020f);
    loadingSpinner.invalidate();
}

 You can read more about TextureMappers here:
https://support.touchgfx.com/docs/development/ui-development/ui-components/images/texture-mapper

About Linear Easing Option they are formulas used for animation that define the position of an object through the time, so you can achieve the desired animations. You can see the different Easing Equations and how they look like here:
https://easings.net/

I hope this helps you, don't hesitate to ask more questions