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(android): allow shared element transitions to work with ListView/CollectionView/Pager (#10411)

Browse Source
This commit is contained in:
farfromrefuge
2023-10-24 00:47:23 +00:00
committed by GitHub
parent 22c21b7e06
commit e8c093d7a2
2 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/core/ui/transition/page-transition.android.ts
View File

@ -77,7 +77,7 @@ function setTransitionName(view: ViewBase) {
}
export class PageTransition extends Transition {
constructor(duration?: number, curve?: any) {
constructor(duration?: number, curve?: any, private pageLoadedTimeout: number = 0) {
// disable custom curves until we can fix the issue with the animation not completing
if (curve) {
console.warn('PageTransition does not support custom curves at the moment. The passed in curve will be ignored.');
@ -178,12 +178,10 @@ export class PageTransition extends Transition {
const state = SharedTransition.getState(this.id);
const pageEnd = state.pageEnd;
const { sharedElements, presented, presenting } = SharedTransition.getSharedElements(fromPage, toPage);
const sharedElementTags = sharedElements.map((v) => v.sharedTransitionTag);
if (SharedTransition.DEBUG) {
console.log(` Page: ${state.activeType === SharedTransitionAnimationType.present ? 'Present' : 'Dismiss'}`);
console.log(`1. Found sharedTransitionTags to animate:`, sharedElementTags);
}
//we can't look for presented right now as the toPage might not be loaded
// and thus some views like ListView/Pager... might not have loaded their "children"
// presented will be handled in loaded event of toPage
const { presenting } = SharedTransition.getSharedElements(fromPage, toPage);
// Note: we can enhance android more over time with element targeting across different screens
// const pageStart = state.pageStart;
@ -215,16 +213,15 @@ export class PageTransition extends Transition {
// independentView.opacity = 0;
// }
// }
toPage.once('loaded', () => {
presented.filter((v) => sharedElementTags.includes(v.sharedTransitionTag)).forEach(setTransitionName);
newFragment.startPostponedEnterTransition();
});
sharedElements.forEach((v) => {
setTransitionName(v);
fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag);
});
const onPageLoaded = () => {
// add a timeout so that Views like ListView / CollectionView can have their children instantiated
setTimeout(() => {
const { presented } = SharedTransition.getSharedElements(fromPage, toPage);
// const sharedElementTags = sharedElements.map((v) => v.sharedTransitionTag);
presented.forEach(setTransitionName);
newFragment.startPostponedEnterTransition();
}, this.pageLoadedTimeout);
};
fragmentTransaction.setReorderingAllowed(true);
@ -252,6 +249,16 @@ export class PageTransition extends Transition {
newFragment.postponeEnterTransition();
newFragment.setSharedElementEnterTransition(transitionSet);
newFragment.setSharedElementReturnTransition(transitionSet);
presenting.forEach((v) => {
setTransitionName(v);
fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag);
});
if (toPage.isLoaded) {
onPageLoaded();
} else {
toPage.once('loaded', onPageLoaded);
}
}
}

4
packages/core/ui/transition/page-transition.d.ts vendored
View File

@ -1,2 +1,4 @@
import { Transition } from '.';
export declare class PageTransition extends Transition {}
export declare class PageTransition extends Transition {
constructor(duration?: number, nativeCurve?: any /* UIViewAnimationCurve | string | CubicBezierAnimationCurve | android.view.animation.Interpolator | android.view.animation.LinearInterpolator */, pageLoadedTimeout?: number);
}