Question

我试图让一个按钮沿着圆形路径移动到Xamarin Forms页面。按钮应从屏幕的左下角开始，然后向上移动屏幕向右移动，然后向左移动，如同在屏幕左侧跟踪半圈一样。然后按钮将停在该路径上的某个点。按钮需要在整个运动过程中保持水平（因此不能旋转），就像在路径上滑动一样。

我玩过TranslateTo方法，让它从下往上移动，从左到右，然后从右到左移动SinOut / SinIn缓动函数，它接近但不会给我一条圆形路径

我也试过用一个负点定位点旋转它，但按钮旋转，我不能让它反转，因为我只能设置一次定位点。

我想如果我可以使用动画循环，那么我可以增加每个循环的Y位置，并使x位置跟随一个sin波值来获得圆圈（或类似的东西 - 原谅我的过时数学技能）但我只能在Xamarin表格上看到翻译，旋转，淡入等功能。

有没有人对此有任何经验，或者有关如何实现这一效果的任何建议？

提前感谢任何建议或帮助。

最诚挚的问候，人

Answer 1

最简单的解决方案是使用2个旋转动画。第一个绘制路径，第二个保持对象平整。

由于两个动画需要不同的AnchorX和AnchorY，因此您必须将对象包装在ContentView中并在该视图上包含“路径”动画。

当心：以下部分可能不起作用，或者没有提供您想要的结果，但这将是一个有趣的实验。

另一种方法是滥用TranslateTo并定义自己的Easing。缓动函数是为（0,1）定义的，但你想在（-pi / 2，pi / 2）上设置动画，所以它应该是这样的：

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));

这是严重滥用缓和功能，因为xEasing值为0-> 1-> 0而不是0-> 1，并且对象可以一直跳到右边在动画结束时;并且yEasing从-1开始，并且对象可以在动画的开头跳转，但是您可以通过在{{上添加+1和/2进行调整。 1}}。玩得开心。

更新

但是如果您分两步定义动画（从左下角移动到右中角，然后从中间向右移动到左上角），则可以进行有效的缓动。我很确定你可以自己计算yEasing方法，方法是改变上面提供的符号和因子。