使用Xamarin.Forms在iOS上过渡动画

Xamarin.Forms允许开发人员立即编写漂亮的移动和桌面应用程序。 可以一次创建组件,一次布局组件,仅一次动画组件! 它的性能和稳定性得到了改善,因此几乎是完美的! 只有很少的棘手的事情真的很难使用此框架来实现。 最需要的一种是页面之间的过渡动​​画。

甚至可以用Xamarin.Forms编写这样的东西吗? 当然! 如果您真的不耐烦,只需从此仓库中获取源代码即可:

OlexaLe / BeatleApp
通过在GitHub上创建一个帐户为BeatleApp开发做出贡献。 github.com

在iOS上,默认演示文稿动画看起来像是从当前页面到新页面的从右到左的简单幻灯片 。 不幸的是,我们不能做很多事情。 您可以尝试模仿具有Views的Pages并为它们之间的动画设置过渡,但是实际上并不需要这样 (相信我,我在那里)。 尽管您可以使用Page的OnAppearing / OnDisappearing 生命周期方法来模拟过渡动画,然后再进行一次-为Pages中的View设置动画。 Xamarin论坛上介绍了此解决方案的实现,但是还有另一种方法- 本机动画

让我们来编写一个应用

让我们从Wikipedia中获取图像和文本,并为披头士乐队的粉丝创建一个简单的应用程序。 它将只有2页。 第一个将包含一个带有音乐家照片和姓名的网格。 第二页将显示所选披头士的简短简介。 您可以从https://github.com/OlexaLe/BeatleApp/tree/master/BeatlesApp-start获取入门项目。

在设备上运行它时,您将看到以下内容:

简单动画

那么如何降低它的标准性呢?

模态和常规导航的行为不同,因此其自定义也不同。 现在让我们专注于常规导航

在本机iOS中,您可以通过2个步骤实现自定义过渡动画:

  1. 实现采用UIViewControllerAnimatedTransitioning协议的动画对象
  2. 采用UINavigationControllerDelegate协议返回动画对象

我们的第一个自定义过渡动画将非常简单。 让我们从导航中删除此从右到左的过渡,并以透明效果在当前上方显示新页面。

为了做到这一点,让我们遵循最初的计划并实现animator对象:

Niiii​​ce,但您可以发挥自己的想象力,创建更精彩的动画师类。 例如,让我们添加一个缩放效果!

高级动画

首先,我们需要知道用户点击了哪个图像,因此让我们为图像分配唯一的标识符。 我们可以通过多种方式做到这一点。 正确的方法可能是使用TransitionId字段( 继承或救援的附加属性 )扩展UI组件,但只是为了向您说明模式,我将使用Effect分配UIKit的UIKit的Tag字段。

该应用程序的核心部分几乎没有更改,主要的复杂性仍在动画对象中,但是您可以编写一次,将其包装在库中,然后在其他项目中重用。

结论

Xamarin.iOS项目中创建复杂的动画很容易,但是正如您在Xamarin中所看到的那样, 窗体的开销确实很大。 另一方面,创建普通动画非常容易,因此这可能是轻松改善应用UX的好方法。