Xamarin窗体视图动画

我的屏幕上有两个按钮。。按钮A和按钮B。。默认情况下，将选择按钮A，并在其下方显示与按钮A相关的所有详细信息的视图。当用户单击按钮B时，视图将移到左侧，具有与按钮B相关详细信息的新视图将从右侧显示淡入淡出动画

当前状态-我可以通过隐藏一个按钮并取消隐藏另一个按钮来更改按钮单击时的视图。。但是我被动画困住了

你能帮我一下吗。

首先，在你的页面上

private readonly ScreenMetrics _metrics;
private readonly int _formsWidth;
private readonly int _formsHeight;

public MainPage()
{
    InitializeComponent();

    //calculate screen size, to use in animations
    _metrics = DeviceDisplay.ScreenMetrics;
    _formsWidth = Convert.ToInt32(_metrics.Width / _metrics.Density);
    _formsHeight = Convert.ToInt32(_metrics.Height / _metrics.Density);
}

在OnAppearing中，将需要的元素翻译到屏幕外

 protected override async void OnAppearing()
        {
            base.OnAppearing();

            await Task.WhenAll(
                //translate to the left side of the device, negative
                YourViewLeftSide.TranslateTo(_formsWidth, 0, 0, null),
                //translate to the right side of the device, negative
                YourViewRightSide.TranslateTo(-_formsWidth, 0, 0, null)
            );
        }

在设置左视图动画的按钮上

async void OnButton1Clicked(object sender, EventArgs args)
{
    //animate left side 
    YourViewLeftSide.TranslateTo(0, 0, 400, Easing.CubicInOut),
}

在为右视图设置动画的按钮上

async void OnButton2Clicked(object sender, EventArgs args)
{
    //animate right side 
    YourViewRightSide.TranslateTo(0, 0, 400, Easing.CubicInOut),
}

---

现在，您可以根据自己的需要进行调整和定制

您可以使用基于父/子动画来控制幻灯片和淡入淡出，并使它们正确同步

void RunAnim(Color disableColor, Color backgroundColor, bool disable)
{
    new Animation
    {
        { 0, 1, new Animation (v => view1.Opacity = v, disable ? 1 : 0, disable ? 0 : 1) },
        { 0, 1, new Animation (v => view1.TranslationX = v,  disable ? 0 : -view1.Width, disable ? -view1.Width : 0) },
        { 0, 1, new Animation (v => view2.TranslationX = v, disable ? view1.Width : 0, disable ? 0 : view1.Width) },
        { 0, 1, new Animation (v => view2.Opacity = v, disable ? 0 : 1, disable ? 1 : 0) },
    }.Commit(this, "viewAnim", 16, 1000, Easing.CubicInOut, (v, c) =>
    {
        physicalButton.IsEnabled = !disable;
        physicalButton.BackgroundColor = disableColor;
        networkButton.IsEnabled = disable;
        networkButton.BackgroundColor = backgroundColor;
    });
}

void Physical_Clicked(object sender, EventArgs e)
{
    var disableColor = Color.Navy;
    var backgroundColor = Color.Transparent;
    var disable = true;

    RunAnim(disableColor, backgroundColor, disable);
}

void Network_Clicked(object sender, EventArgs e)
{
    var disableColor = Color.Transparent;
    var backgroundColor = Color.Navy;
    var disable = false;

    RunAnim(disableColor, backgroundColor, disable);
}

---

注意：gif看起来很僵硬，但动画很流畅…

最后我使用CarouseView实现了这一功能

听起来好像你在尝试实现一个选项卡式页面。你看过Xamarin的吗？我们可以在Xamarin表单中自定义选项卡栏吗？是的，使用

TabbedRenderer

可以做到这一点。（）我不能使用选项卡页面，因为这些按钮在ContentPage中，有一些其他选项。我会尝试一下，让你知道。。谢谢