Xamarin.forms 从右向左或从左向右设置页面动画？

在我的应用程序中，我使用PushModalAsync和PopModalAsync进行页面导航，但页面动画分别从下到上和从上到下显示。是否有其他选项可以从右向左或从左向右设置页面动画？

欢迎使用SO

如果使用pushmodelsync，则有一种解决方法可以实现该效果

在iOS解决方案中为第二页创建：

[assembly: ExportRenderer(typeof(PageTwo), typeof(CustomPageRenderer))]
namespace XamarinMoelNavigationStyle.iOS
{
    public class CustomPageRenderer :PageRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            var transition = CATransition.CreateAnimation();
            transition.Duration = 0.5f;
            transition.Type = CAAnimation.TransitionPush;
            transition.Subtype = CAAnimation.TransitionFromRight;
            View.Layer.AddAnimation(transition, null);

            base.ViewWillAppear(animated);
        }

    }
}

public class CustomPageRenderer : PageRenderer
{
    public CustomPageRenderer(Context context) : base(context)
    {
    }

    protected override void OnAttachedToWindow()
    {

        var metrics = Resources.DisplayMetrics;
        Android.Views.Animations.Animation translateAnimation = new TranslateAnimation(metrics.WidthPixels, 0, 0, 0);
        translateAnimation.Duration = 500;
        Animation = translateAnimation;
        translateAnimation.Start();

        base.OnAttachedToWindow();
    }
}

我们将在

viewwillbeen

方法中添加动画

当弹出到上一个

主页

时，我们可以在ContentPage中进行如下处理：

private void Button_Clicked(object sender, EventArgs e)
{

    PageTwoView.TranslateTo(300, 0, 500);

    Device.StartTimer(TimeSpan.FromSeconds(0.5), () =>
    {
        // Do something

        Navigation.PopModalAsync(false);

        return false; // True = Repeat again, False = Stop the timer
    });

}

此处

PageTwoView

是从Xaml定义的：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Name="PageTwoView"
             x:Class="XamarinMoelNavigationStyle.PageTwo">
     ...
</ContentPage>

其效果是：

=================================================更新#1==============================

还可以在Android解决方案中为PageTwo创建一个自定义页面渲染器：

[assembly: ExportRenderer(typeof(PageTwo), typeof(CustomPageRenderer))]
namespace XamarinMoelNavigationStyle.iOS
{
    public class CustomPageRenderer :PageRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            var transition = CATransition.CreateAnimation();
            transition.Duration = 0.5f;
            transition.Type = CAAnimation.TransitionPush;
            transition.Subtype = CAAnimation.TransitionFromRight;
            View.Layer.AddAnimation(transition, null);

            base.ViewWillAppear(animated);
        }

    }
}

public class CustomPageRenderer : PageRenderer
{
    public CustomPageRenderer(Context context) : base(context)
    {
    }

    protected override void OnAttachedToWindow()
    {

        var metrics = Resources.DisplayMetrics;
        Android.Views.Animations.Animation translateAnimation = new TranslateAnimation(metrics.WidthPixels, 0, 0, 0);
        translateAnimation.Duration = 500;
        Animation = translateAnimation;
        translateAnimation.Start();

        base.OnAttachedToWindow();
    }
}

其效果是：

====================================================更新#2=================================

如果有许多

ContentPage

s需要导航，您可以修改

CustomPageRenderer

以用于所有ContentPage。详情如下:

[assembly: ExportRenderer(typeof(ContentPage), typeof(CustomPageRenderer))]
...

然后使用在表单中设置flag并获取flag以了解是否需要动画

private void Button_Clicked(object sender, EventArgs e)
{

    PageTwo pageTwo = new PageTwo();
    // set a flag here
    Preferences.Set("ModelAnimation", true);

    Navigation.PushModalAsync(pageTwo, false);
}

现在，渲染器将知道何时需要动画：

//Android
protected override void OnAttachedToWindow()
{
    var myValue = Preferences.Get("ModelAnimation", false);
    if (myValue)
    {
        var metrics = Resources.DisplayMetrics;
        Android.Views.Animations.Animation translateAnimation = new TranslateAnimation(metrics.WidthPixels, 0, 0, 0);
        translateAnimation.Duration = 500;
        Animation = translateAnimation;
        translateAnimation.Start();
    }

    base.OnAttachedToWindow();
}

//iOS
public override void ViewWillAppear(bool animated)
{
    var myValue = Preferences.Get("ModelAnimation", false);
    if (myValue)
    {
        var transition = CATransition.CreateAnimation();
        transition.Duration = 0.5f;
        transition.Type = CAAnimation.TransitionPush;
        transition.Subtype = CAAnimation.TransitionFromRight;
        View.Layer.AddAnimation(transition, null);
    }
    base.ViewWillAppear(animated);
}

滑动完成后，第一页作为弹出窗口打开，看起来不像第一页到第二页的动画

---

关于这个问题，你可以分享一些代码和

.gif

来解释。

请帮助我们以正常和简单的方式从右到左或从左到右的幻灯片动画视图导航到第二页。你可以检查这一点，但我从不使用任何视图和视图模型，我只创建一个简单的应用程序。因此，请在没有MVVM类型的情况下提供帮助您不需要MVVM，因为您的项目没有在我的电脑上运行，显示出一些错误。所以请建议我该动画需要哪些cs文件。我需要ios和android…请建议我在每个页面中使用哪些cs文件，以便为每个页面创建自定义渲染器？有任何解决方案可以从一个渲染器在多页中工作吗？@KumarJit-Okey还可以创建一个自定义

PageRenderer

来实现这一点。我已经更新了答案。你可以看看这个。你可以写一个类似[assembly:ExportRenderer（typeof（PageTwo），typeof（CustomPageRenderer））]的引用，但是当我用于多页时，我在referencePageTwoView.TranslateTo（300，0，500）中的typeof（）下使用了哪个页面名；此行将显示错误……TranslateTo属性不存在