RadSideDrawerトランジション

RadSideDrawerを開いた状態と閉じた状態を切り替えるときに、 ドロワーとメインコンテンツペインをアニメーション化するために使用される、いくつかの事前定義されたトランジションが付属しています。 次のリストは、事前定義された遷移を示しています。

• "FadeTransition" - 表示されたドロワーコンテンツのフェードアニメーションを提供します。
• "PushTransition" - サイドコンテンツによって押し出されるメインコンテンツを示すアニメーションを提供します。
• "RevealTransition" - サイドコンテンツを明らかにするメインコンテンツを示すアニメーションを提供します。
• "ReverseSlideOutTransition" - ドロワーコンテンツがメインコンテンツから逆にスライドする様子を示すアニメーションを提供します。
• "ScaleDownPusherTransition" - ドロワーコンテンツの縮小アニメーションを提供します。
• "ScaleUpTransition" - メインコンテンツの下からドロワーコンテンツのスケールアップアニメーションを提供します。
• "SlideAlongTransition" - メインコンテンツに沿ってスライドするサイドコンテンツのアニメーションを提供します。
• "SlideInOnTopTransition" - メインコンテンツの上にスライドするサイドコンテンツのアニメーションを提供します。

トランジションを使用するには、 そのインスタンスをRadSideDrawerインスタンスの "drawerTransition"プロパティに設定する必要があります。

public onSlideInOnTopTransitionTap(args) {
    this.setDrawerTransition(new drawerModule.SlideInOnTopTransition());
    this.openSideDrawer();
}

public openSideDrawer(args?: observableModule.EventData) {
    let drawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>Frame.topmost().getViewById("sideDrawer");
    drawer.showDrawer();
}

public closeDrawer(args?: observableModule.EventData) {
    let drawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>Frame.topmost().getViewById("sideDrawer");
    drawer.closeDrawer();
}

private setDrawerTransition(transition: drawerModule.DrawerTransitionBase) {
    let drawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>Frame.topmost().getViewById("sideDrawer");
    drawer.drawerTransition = transition;
}

参考文献

このシナリオの実際を見たいですか？ GitHubでSDKサンプルリポジトリを確認してください。NativeScript UIを使用した、これと他の多くの実用的な例があります。

• 遷移の例