Animate a button along a circular path in Xamarin Forms

Question

I am trying to make a button move on to a Xamarin Forms page along a circular path. The button should start in the lower left of the screen then progress up the screen moving to the right, then the left in a circular motion, as if tracing a half circle on the left of the screen. The button would then come to stop at a point on that path. The button needs to stay horizontal throughout the movement (so can’t rotate) as if sliding up the path.

I have played about with the TranslateTo method, making it move from bottom to top, and from left to right, then right to left with a SinOut/SinIn easing function which comes close, but doesn’t give me a circular path.

I also tried rotating it in with a negative anchor point which kind of works, but the button rotates and I can’t make it counter rotate as I can only set the anchor point once.

I figured that if I could use an animation loop then I could increment the Y position each loop, and make the x position follow a sin wave value to get the circle (or something similar to that - forgive my out of date maths skills) but I can only see the Translate, Rotate, Fade, etc. functions available on Xamarin forms.

Does anybody have any experience with this, or any suggestions on how I can go about achieving this effect?

Thanks in advance for any suggestions or help.

Best Regards, Al.

using two separate animations is a good move and you should stick with it. however, you're right, it won't make the button move in a perfect circle that's because there is no appropriate easing. you'll have to write a custom animation with custom easing using this for both movements, along X axis and Y axis. you'll need some high school math. — nicks
paint exactly what kind of movement you're trying to achieve and i'll help you with easing functions. — nicks
Thanks for the reply Nika. I’m trying to achieve an affect like the one shown in this link. I am going to use a button to replace each of the images (formatted to look like an image) and will have a number of them come in one after another stopping at different points along the circular path. I’ll go through the link that you kindly provided and any help would be very much appreciated. Thanks, Al. — Alan Kell
it isn't easy. lots of math. I'll post the answer during next 12 hours. — nicks

Stephane Delcroix Stephane Delcroix · Accepted Answer · 2016-10-05T09:29:07

The simplest solution would be to use 2 Rotation animations. The first drawing the path, the second keeping the object leveled.

As both animation needs different AnchorX and AnchorY, you'll have to wrap you object in a ContentView and have the "path" animation on that one.

BEWARE: the following part might not work, or not provide the results you want, but it will be a fun experiment.

The other approach is abusing the TranslateTo and define your own Easing. Easing functions are defined for (0,1) but you want to animate on (-pi/2,pi/2), so that should looks like this:

var yEasing = new Easing(r=>Math.Sin(r * Math.PI - Math.PI/2));
var xEasing = new Easing(r=>Math.Cos(r * Math.PI - Math.PI/2));

This is serious abusing of the Easing functions, as the xEasing values are going 0->1->0 instead of 0->1, and the object could jump all the way to the right at the end of the animation; and the yEasing starts at -1, and the object could jump at the beginning of the animation, but this is something you can tweak by adding a +1 and a /2 on the yEasing. Have fun.

UPDATE

But if you define your animation in 2 steps (move from bottom-left to middle-right, then middle-right to top-left), you can have valid easing. I'm quite sure you can compute the Easing methods on your own, by changing sign and factors from the one provided upper.

Animate a button along a circular path in Xamarin Forms

1 Answers