Animate along a path

[KrisLau]

So I use runTiming to animate my Canvas elements and it works great but I was trying to figure out if there's a way to animate along a path. For example, regardless of the initial position of the element, i want to be able to pass the new location and have the element move along the path (the red lines).

Something like this:

Where if I try to move the element from position 1 to 3 like this:

runTiming(cx, x3, duration, callback)
runTiming(cy, y3, duration, callback)

it will not go there straight but instead move along the red lines

I know I can chain a bunch of runTiming calls but I was wondering if there's a better way to do so

[wcandillon]

you can have a value that goes from 0 to 1 and get the position for each value.
You can get the total length of a path, and get each position, for instance at 20% (0.2).
We showcase how to get the total path length and the position for any length position in this tutorial: https://www.youtube.com/watch?v=7SCzL-XnfUU

[uwemneku]

Thanks. This was super helpful

[KrisLau]

Hi @wcandillon now that runTiming has been deprecated how do i migrate it? Is there a upgrade guide?

I looked through the doc for animations but didn't see a 1 to 1 replacement. Here is an example of how I use runTiming:

function changeBallPosition(cx, cy, newX, newY, callback) {
    const duration = 200;
    runTiming(cx, newX, {duration}, callback);
    runTiming(cy, newY, {duration}, callback);
    setIsBallMoved(true);
}