沿Xamarin形式的圆形路径动画一个按钮形式

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

我玩过TranslateTo方法，使它从底部到顶部，从左到右，然后从右向左移动，使用SinOut/SinIn缓动功能，但它并没有给我一个圆形路径。

我也尝试旋转它与负面的锚点这种工作，但按钮旋转，我不能让它反转，因为我只能设置锚点一次。

我想如果我可以使用动画循环，那么我可以在每个循环中增加Y位置，并使x位置跟随正弦波值来获得圆圈（或类似的东西 - 原谅我过期数学技能），但我只能看到Xamarin表单上可用的Translate，Rotate，Fade等功能。

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

在此先感谢您的任何建议或帮助。

最好的问候，铝。

来源

2016-10-04 Alan Kell

使用两个单独的动画是一个很好的举措，你应该坚持下去。然而，你是对的，它不会让按钮移动到一个完美的圆圈，这是因为没有适当的宽松。您必须使用[this]（https://developer.xamarin.com/guides/xamarin-forms/user-interface/animation/）为自己的运动编写自定义动画，沿着X轴和Y轴。你需要一些高中数学。 – nicks

准确地描绘出你想要达到什么样的动作，并且我会帮你解除功能。 – nicks

感谢您的回复尼卡。我正在尝试实现此[链接]中显示的效果（https://s-media-cache-ak0.pinimg.com/originals/7b/c3/cc/7bc3cc61ff0b090fbd937e12d8d2a9af.gif）。我将使用一个按钮来替换每个图像（格式化看起来像一个图像），并且会有一些按钮在沿着圆形路径的不同点停下来。我会通过您提供的链接进行浏览，并且非常感谢您提供任何帮助。谢谢，Al。 –

最简单的解决方案是使用2个旋转动画。第一次绘制路径，第二次保持对象平整。由于两个动画需要不同的AnchorX和AnchorY，因此您必须将对象包装到ContentView中，并在该对象上具有“路径”动画。

请注意：以下部分可能无法正常工作，或者未提供您想要的结果，但这将是一个有趣的实验。

另一种方法是滥用TranslateTo并定义您自己的Easing。缓解功能为（0,1）定义，但要动画上（-pi/2，π/ 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开始，并且该对象可以在动画开始时跳跃，但这可以通过在yEasing上添加+1和/2来调整。玩的开心。

UPDATE

但是，如果你定义2步动画（从移动左下到右中，然后右中侧顶部左），你可以有有效的缓解。我很确定你可以自己计算Easing方法，通过改变上方提供的符号和因子。

来源

2016-10-05 09:29:07

感谢您的建议Stephane。我设法使用Nika在上面的链接中建议的自定义动画扩展方法创建效果（[link]（https://developer.xamarin.com/guides/xamarin-forms/user-interface/animation/custom/））。我得到了数学基础上从这个[链接]（http://stackoverflow.com/questions/11462239/how-to-move-point-along-circle）的一个圆圈更新的位置，这一切都很好地合在一起。 –

沿Xamarin形式的圆形路径动画一个按钮形式

回答

相关问题