从右到左或从左到右动画页面？

如何解决从右到左或从左到右动画页面？

在我的应用程序中，我使用PushModalAsync和PopModalAsync进行页面导航，但是页面动画分别从底部顶部和顶部至底部显示。还有其他选项可以从右到左或从左到右制作页面动画吗？

解决方法

欢迎您！

如果使用 PushModelAsync ，则有一种解决方法来实现该效果。

在 iOS 解决方案中为PageTwo创建 CustomPageRenderer ：

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

    }
}

我们将在ViewWillAppear方法内添加动画。

当弹出上一个MainPage时，我们可以在ContentPage中进行如下处理：

private void Button_Clicked(object sender,EventArgs e)
{

    PageTwoView.TranslateTo(300,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>

注意：当MainPage导航到PageTwo时，需要禁用动画。

例如：

private void Button_Clicked(object sender,EventArgs e)
{
    Navigation.PushModalAsync(new PageTwo(),false);
}

效果：

==============================更新＃1 ============= =================

还为 Android 解决方案中的PageTwo创建 CustomPageRenderer ：

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);
        translateAnimation.Duration = 500;
        Animation = translateAnimation;
        translateAnimation.Start();

        base.OnAttachedToWindow();
    }
}

效果：

==============================更新＃2 ============= ===================

如果需要导航的ContentPage太多，则可以修改CustomPageRenderer以用于所有ContentPage。如下：

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

然后使用 Preferences 在Forms中设置标志并获取标志以了解是否需要动画。

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);
        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进行解释。