javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): shared element transitions with api for ios

Browse Source
This commit is contained in:
Nathan Walker
2023-03-05 20:40:41 -08:00
parent 8f09e40e09
commit a29a809ad5
23 changed files with 638 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/toolbox/src/app-root.xml
View File

@@ -1,2 +1,2 @@
<Frame defaultPage="main-page">
<Frame defaultPage="pages/transitions">
</Frame>

1
apps/toolbox/src/main-page.xml
View File

@@ -20,6 +20,7 @@
<Button text="scroll-view" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="switch" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="touch-animations" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="transitions" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="vector-image" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="fs-helper" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

47
apps/toolbox/src/pages/transitions.ts Normal file
View File

@@ -0,0 +1,47 @@
import { Observable, EventData, Page, ShowModalOptions, SharedTransition, ModalTransition, TransitionType, Screen } from '@nativescript/core';
// import { DetailTransition } from './transitions/detail';
let page: Page;
export function navigatingTo(args: EventData) {
page = <Page>args.object;
page.bindingContext = new TransitionsModel();
}
// class SampleCustomModalTransition extends ModalTransition implements TransitionType {
// }
export class TransitionsModel extends Observable {
open() {
// const detailTransition = new DetailTransition(400, global.isIOS ? UIViewAnimationCurve.EaseInOut : null);
// detailTransition.page = page;
page.frame.navigate({
moduleName: `pages/transitions/transitions-detail`,
// transition: {
// instance: detailTransition,
// },
});
}
openModal() {
page.showModal('pages/transitions/transitions-modal', {
context: {},
transition: {
instance: SharedTransition.configure({
page,
instance: new ModalTransition(),
incomingViewStart: {
y: 200,
duration: 1000,
},
dismissViewEnd: {
y: 100,
duration: 500,
},
}),
},
closeCallback(args) {
console.log('close modal callback', args);
},
} as ShowModalOptions);
}
}

23
apps/toolbox/src/pages/transitions.xml Normal file
View File

@@ -0,0 +1,23 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page.actionBar>
<ActionBar title="Transitions" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<GridLayout rows="*,auto,auto,*">
<GridLayout row="1" rows="auto,auto" tap="{{ open }}">
<Image sharedTransitionTag="image" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" width="100" />
<Label row="1" text="Open Page" class="text-center" />
</GridLayout>
<GridLayout row="2" rows="auto,auto,auto,auto" tap="{{ openModal }}" marginTop="50">
<Image sharedTransitionTag="image-modal" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" width="100" />
<Label row="1" text="Open Modal" sharedTransitionTag="open-modal-label" class="text-center" />
<ContentView row="2" sharedTransitionTag="open-modal-box" marginTop="20" width="50" height="50" borderRadius="25" backgroundColor="purple" />
<ContentView row="3" sharedTransitionTag="open-modal-box2" marginTop="20" width="15" height="15" borderRadius="7" backgroundColor="orange" />
<ContentView row="3" sharedTransitionTag="open-modal-box3" marginTop="20" width="15" height="15" borderRadius="7" backgroundColor="red" horizontalAlignment="left" marginLeft="100" />
<ContentView row="4" sharedTransitionTag="open-modal-box4" marginTop="20" width="15" height="15" borderRadius="7" backgroundColor="pink" horizontalAlignment="right" marginRight="100" />
</GridLayout>
</GridLayout>
</Page>

10
apps/toolbox/src/pages/transitions/transitions-detail.ts Normal file
View File

@@ -0,0 +1,10 @@
import { Observable, EventData, Page } from '@nativescript/core';
let page: Page;
export function navigatingTo(args: EventData) {
page = <Page>args.object;
page.bindingContext = new TransitionsModel();
}
export class TransitionsModel extends Observable {}

10
apps/toolbox/src/pages/transitions/transitions-detail.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page.actionBar>
<ActionBar title="Transition Detail" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<GridLayout rows="*" columns="auto,*" verticalAlignment="top">
<Image row="0" sharedTransitionTag="image" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" width="100%" />
</GridLayout>
</Page>

24
apps/toolbox/src/pages/transitions/transitions-modal.ts Normal file
View File

@@ -0,0 +1,24 @@
import { Observable, ShownModallyData, LoadEventData, Page, ShowModalOptions } from '@nativescript/core';
let page: Page;
let closeCallback: Function;
export function onShownModally(args: ShownModallyData) {
console.log('page shown modally');
closeCallback = args.closeCallback;
if (args.context) {
args.context.shownModally = true;
}
}
export function onLoaded(args: LoadEventData) {
page = args.object as Page;
page.bindingContext = new TransitionModalPage();
}
export class TransitionModalPage extends Observable {
close() {
closeCallback();
}
}

16
apps/toolbox/src/pages/transitions/transitions-modal.xml Normal file
View File

@@ -0,0 +1,16 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded" shownModally="onShownModally">
<GridLayout rows="auto,auto,*" columns="*" verticalAlignment="top">
<Button text="Close" tap="{{close}}" horizontalAlignment="right" marginRight="10" />
<Image row="1" sharedTransitionTag="image-modal" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" height="230" verticalAlignment="top" marginTop="10" />
<GridLayout row="2" rows="auto,auto,auto">
<Label text="Opened Modal" verticalAlignment="top" marginTop="20" class="text-center" fontSize="28" color="black" />
<ContentView row="1" sharedTransitionTag="open-modal-box2" marginTop="20" width="75" height="75" borderRadius="37" backgroundColor="orange" />
<ContentView row="2" sharedTransitionTag="open-modal-box" marginTop="20" width="200" height="200" borderRadius="100" backgroundColor="purple" />
<ContentView row="2" sharedTransitionTag="open-modal-box3" marginTop="20" width="30" height="30" borderRadius="15" backgroundColor="red" horizontalAlignment="right" marginRight="50" />
<ContentView row="1" sharedTransitionTag="open-modal-box4" marginTop="20" width="30" height="30" borderRadius="15" backgroundColor="pink" horizontalAlignment="left" marginLeft="50" />
</GridLayout>
</GridLayout>
</Page>