Showing results for 
Search instead for 
Did you mean: 

How to move a dot along a specified path?



In my demo project I have to move a dot along a L-shaped path continuously i.e. start over from beginning once the dot reaches end of the path. I would appreciate if you could point me to an example that explains hot to achieve this.

Thank you in advance.

ST Employee


Are you looking for something like the project shared ? I used a circle widget instead of a button. You could use a shape widget instead. I would suggest having a deeper look at the moveAnimator functionality to understand how to work with it.


Sergey Bogaev
Associate II

I would create an object (box for example) that will move and add MoveAnimator attribute to it.


Then I would use this set of functions to move the object in the desired direction. (you can simply generate the object's movement in TouchGFX Designer Interactions and see an example of the generated code in xxxBase.cpp file)

To loop the movement I would use the handleTickEvent() function (this is a function that is called periodically), which you can override in your view file.

In this function, I would check the state of the animation and restart it when the movement finishes.

But perhaps there is a smarter solution :smirking_face:

Hi @Romain DIELEMAN​ , Thank you for the perfect example. It helps.

Thank you @Sergey Bogaev​. I appreciate it.

You can also assign an animation ended callback handler to bring the animation back to beginning and start it again. I discussed it in this thread.

The startMoveAnimation() function accepts only end points. It simply moves the object in straight line. What would you recommend if the path is curved, say L-joint is curved and right angle?

There are no widgets or functions within TouchGFX Designer. It would be quite complex to create a universal function that does this exactly the way people want it, so you need to do this yourself through code by using whatever mathematical equation fitting the curve mouvement you desire.