2017-04-14 6 views
0

2つのビューの間でコンポーネントを共有するNativeScript + Angularタブレットアプリケーションを開発する必要があります。コンポーネントは画面上に残り、ビュー間の遷移中にアニメートされます。NativeScript:ビュー間でコンポーネントを共有したりアニメーション化する方法は?

私はより明確にするために、意図したインタフェースの迅速なイメージを作った:

Transition explanation

私はNativeScript始まりますよ。私が理解していることは、マップビューとディテールビューの両方で同じコンポーネントを設定すると、必要な方法でアニメーション化されないことです。

ウェブアプリケーションでは、トランジションのために適切なCSSアニメーションで画面をオーバーフローさせた水平ビューを使用します。私はNativeScriptと同じことを模倣しようとする可能性があります。

私の二つの質問は簡単になります:

- それはNativeScriptでこの移行を達成するためのより良い、より多くの慣用的な方法は何ですか?

- そうでない場合は、ユーザーがそれ自身でスクロールできないように考慮して、そのUI要素を使用します。スクロールはアプリケーションによって処理されます。

マップ、リスト、アイテムの詳細が電話では3つの画面になり、電話から表示されるウェブアプリでは複雑さが増します。コンピュータ用のウェブアプリはタブレットのように見えます。私がすべてのプラットフォームで同じコードを使用できるようにするソリューションは、さらに優れています。

ありがとうございました。

答えて

1

NSでは、transform: translate(x and y)をアニメーション化することができます。あなたはアングルアニメーションを利用してアイドル状態とアイテム選択状態の2つの状態でそれを行うことができます。ビューに戻るために戻るボタンを表示することもできます。

電話機の画面を表示するには、各ビューにコンポーネントを使用し、それぞれの画面で個別にマウントするだけで、さまざまなプラットフォームのレイアウトを使用できます。

プロジェクト: https://github.com/vjoao/ns-animation-example

完璧に動作
+1

、ありがとう! – Pierre

関連する問題