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