xaml - Xamarin.Forms:动画页面/布局过渡

Question

假设我在 Xamarin.Forms 应用程序中有一个具有以下布局的 MainPage:

+------------------------------+
|                              |
|     +-------+  +-------+     |
|     |       |  |       |     |
|     |Button1|  |Button2|     |
|     |       |  |       |     |
|     +-------+  +-------+     |
|                              |
+------------------------------+

现在，在用户点击 Button1 后，我希望页面转换为以下布局:

+------------------------------+
|---+                          |
||B1|   +-------+  +-------+   |
+---+   |       |  |       |   |
|       |Button3|  |Button4|   |
+---+   |       |  |       |   |
||B2|   +-------+  +-------+   |
|---+                          |
+------------------------------+

棘手的部分是，我想要一个漂亮的动画过渡，其中:

• 按钮 3 和 4 从最右侧滑动
• 按钮 1 和 2 可以轻松移动和缩放到左侧的目标位置。

有没有办法在 xamarin.forms xaml 中实现这种行为？

我现在能想到的唯一方法是使用 AbsoluteLayout 并为按钮初始位置(或其容器)设置以像素为单位的绝对值。并通过使用适当的参数调用每个元素的 TranslateTo 和 ScaleTo 方法来设置目标布局来进行转换。

但是，如果我想要更多的布局和它们之间的转换，并支持更多的屏幕分辨率，我想这种方法很快就会变得难以维护。

如果我将这些布局放在单独的页面上，并在页面之间进行此类自定义转换，我想如果可能的话，它会变得更加困难。

有什么建议可以解决这个问题吗？

Answer 1

在 NavigationPage 容器中从第 1 页导航到第 2 页时，您可以使用共享元素转换来移动内容。

我制作了一个nuget包来在xamarin表单xaml中使用共享动画过渡，这里是源代码:

https://github.com/Evolutionlab/Xamarin.Plugin.SharedTransitions

这里是 Nuget 包:

https://www.nuget.org/packages/Xamarin.Plugin.SharedTransitions/