NativeScript:如何在视图之间共享和动画组件?

问题描述:

我需要用NativeScript + Angular开发一个平板应用程序,它将在两个视图之间共享一个组件。组件应该保持在屏幕上,并在视图间的过渡期间进行动画处理。NativeScript:如何在视图之间共享和动画组件?

我做出的预期界面的快速图像,更清晰:

Transition explanation

我与NativeScript开始。我所理解的是,在地图和细节视图中设置相同的组件不会按照我想要的方式进行动画处理。

对于一个Web应用程序,我只是使用水平视图溢出屏幕与适当的CSS动画进行转换。我可以尝试用NativeScript模仿它。

我的两个问题是简单的:

- 它是实现NativeScript这个过渡更好,更地道的方式?

- 如果不是,您将使用哪些UI元素 - 考虑到用户不应该自己滚动。该卷轴由应用程序照顾。

我可能会添加一些复杂性,说明地图,列表和项目详细信息是手机上的三个不同屏幕,以及从手机上查看的Web应用程序。计算机的网络应用程序看起来像在平板电脑上。使我能够在所有平台上使用相同代码的解决方案会更好。

谢谢。

在NS中,您可以动画transform: translate(x and y)。你可以利用角动画来做到这两种状态:空闲和项目选择。你甚至可以显示一个后退按钮返回到视图。

对于要在手机上显示屏幕的项目,您可以为每个视图使用组件,并将它们分别安装在每个屏幕上,并且可以使用不同的平台布局来实现。

项目: https://github.com/vjoao/ns-animation-example

+1

完美的作品,谢谢! – Pierre