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

时间:2017-04-14 20:00:31

标签: angular nativescript angular2-nativescript

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

我快速了解了预期的界面,更清楚:

Transition explanation

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

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

我的两个问题很简单:

- 在NativeScript中实现这种转换是一种更好,更惯用的方法吗?

- 如果没有,那么你会使用哪些UI元素 - 考虑到用户不应该自己滚动。滚动由应用程序处理。

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

感谢。

1 个答案:

答案 0 :(得分:1)

在NS中,您可以为transform: translate(x and y)制作动画。您可以利用角度动画来实现2种状态:空闲和项目选择。您甚至可以显示一个后退按钮返回视图。

对于手机上的屏幕项目,您可以只为每个视图使用组件并在每个屏幕上单独安装它们,您可以使用不同的平台布局来实现这一点。

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