WPF: Translating a Canvas at an angle

Answer 1

To help with the math:

If you want to move d pixel distances in t seconds then you will need to move on average x/t (pixels/seconds).

For this you will need to store the start time of your animation (start_time).

In every timer tick, compute the percentage of animation completed:

percent_complete= (now - start_time) / t

Multiply percent_complete by the distance you want to move to get the distance you should be from where you started (d_now). Remember to keep track of the start distance when you start the animation.

d_now = percent_complete * d

The robot's x and y for the current timer tick can then be computed by:

x = d_now * cos(heading) + start.x
y = d_now * sin(heading) + start.y

You may need to tweak the signs of things but that's the gist of it. Math aside, aren't basic animation routines already provided for you in WPF? I've never used it but that was my impression. Link.

Answer 2

I would suggest at least one attempt using a DoubleAnimation/DoubleAnimationUsingPath or a PointAnimation/PointAnimationUsingPath (I'm not sure which is easier to animate the location of a Canvas). This way you're not (necessarily) duplicating effort that WPF perhaps does better. It may end up that manipulating storyboards is more expensive than custom animations, and thus you should go with @colithium's solution with one addition: logic to not move anywhere if it is at its destination, and perhaps decouple the animation if that occurs (to save on computation time).

Answer 3

Solution

Thanks to the help of both Andy Mikula and Cameron MacFarland, it is finally working as intended.

And here is the working code:

double headingRadians = Heading * (Math.PI / 180);

Animator_Body_X.From = Translate_Body.X;
Animator_Body_X.To = Math.Sin(headingRadians) * pix + Translate_Body.X;
Translate_Body.BeginAnimation(TranslateTransform.XProperty, Animator_Body_X);

Animator_Body_Y.From = Translate_Body.Y;
Animator_Body_Y.To = ((Math.Cos(headingRadians) * pix) * -1) + Translate_Body.Y;
Translate_Body.BeginAnimation(TranslateTransform.YProperty, Animator_Body_Y);