javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 10:01:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(shared-transition): pageOut option for more dynamic page animations (#10350)

Browse Source
This commit is contained in:
Nathan Walker
2023-07-26 18:12:49 -07:00
committed by GitHub
parent b93cb99479
commit 9f715c0c5f
2 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/core/ui/transition/shared-transition-helper.ios.ts
View File

@ -50,6 +50,7 @@ export class SharedTransitionHelper {
console.log(`2. Take snapshots of shared elements and position them based on presenting view:`);
}
const pageOut = state.pageOut;
const pageStart = state.pageStart;
const startFrame = getRectFromProps(pageStart, getPageStartDefaultsForType(type));
@ -273,6 +274,14 @@ export class SharedTransitionHelper {
const endFrame = getRectFromProps(pageEnd);
transition.presented.view.frame = CGRectMake(endFrame.x, endFrame.y, endFrame.width, endFrame.height);
if (pageOut) {
if (isNumber(pageOut.opacity)) {
transition.presenting.view.alpha = pageOut?.opacity;
}
const outFrame = getRectFromProps(pageOut);
transition.presenting.view.frame = CGRectMake(outFrame.x, outFrame.y, outFrame.width, outFrame.height);
}
// animate page properties to the following:
// https://stackoverflow.com/a/27997678/1418981
// In order to have proper layout. Seems mostly needed when presenting.
@ -368,6 +377,7 @@ export class SharedTransitionHelper {
console.log(`2. Add back previously stored sharedElements to dismiss:`);
}
const pageOut = state.pageOut;
const pageEnd = state.pageEnd;
const pageEndTags = pageEnd?.sharedTransitionTags || {};
const pageReturn = state.pageReturn;
@ -457,6 +467,14 @@ export class SharedTransitionHelper {
const endFrame = getRectFromProps(pageReturn, getPageStartDefaultsForType(type));
transition.presented.view.frame = CGRectMake(endFrame.x, endFrame.y, endFrame.width, endFrame.height);
if (pageOut) {
// always return to defaults if pageOut had been used
transition.presenting.view.alpha = 1;
const outFrame = getRectFromProps(null);
transition.presenting.view.frame = CGRectMake(0, 0, outFrame.width, outFrame.height);
}
for (const presenting of transition.sharedElements.presenting) {
iOSUtils.copyLayerProperties(presenting.snapshot, presenting.view.ios, presenting.propertiesToMatch as any);
presenting.snapshot.frame = presenting.startFrame;

8
packages/core/ui/transition/shared-transition.ts
View File

@ -104,13 +104,17 @@ export interface SharedTransitionConfig {
dismiss?: SharedTransitionInteractiveOptions;
};
/**
* View settings to start your transition with.
* View settings applied to the incoming page to start your transition with.
*/
pageStart?: SharedTransitionPageProperties;
/**
* View settings to end your transition with.
* View settings applied to the incoming page to end your transition with.
*/
pageEnd?: SharedTransitionPageWithDurationProperties;
/**
* View settings applied to the outgoing page in your transition.
*/
pageOut?: SharedTransitionPageWithDurationProperties;
/**
* View settings to return to the original page with.
*/