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

chore: cleanup android page transition

Browse Source
This commit is contained in:
Igor Randjelovic
2023-03-17 18:04:48 +01:00
committed by Nathan Walker
parent 9b399b89f8
commit 1e72b89b7e
3 changed files with 48 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/toolbox/src/pages/transitions.ts
View File

@@ -1,4 +1,4 @@
import { Observable, EventData, Page, ShowModalOptions, SharedTransition, ModalTransition, PageTransition, Screen } from '@nativescript/core';
import { Observable, EventData, Page, ShowModalOptions, SharedTransition, ModalTransition, PageTransition } from '@nativescript/core';
let page: Page;
export function navigatingTo(args: EventData) {

13
apps/toolbox/src/pages/transitions.xml
View File

@@ -7,20 +7,17 @@
<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" />
<Label row="1" text="Open Page" class="text-center" color="black" />
</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="NativeScript Rocks!" sharedTransitionTag="open-modal-label" class="text-center" color="black" />
<ContentView row="2" sharedTransitionTag="open-modal-box1" borderWidth="5" borderColor="yellow" marginTop="20" width="50" height="50" borderRadius="100" backgroundColor="purple" />
<ContentView row="3" sharedTransitionTag="open-modal-box2" marginTop="20" width="15" height="15" borderRadius="100" backgroundColor="orange" />
<ContentView row="3" sharedTransitionTag="open-modal-box3" marginTop="20" width="15" height="15" borderRadius="100" backgroundColor="red" horizontalAlignment="left" marginLeft="100" />
<ContentView row="4" sharedTransitionTag="open-modal-box4" marginTop="20" width="15" height="15" borderRadius="100" backgroundColor="pink" horizontalAlignment="right" marginRight="100" />
<ContentView row="2" sharedTransitionTag="open-modal-box1" borderWidth="5" borderColor="yellow" marginTop="20" width="50" height="50" borderRadius="999" backgroundColor="purple" />
<ContentView row="3" sharedTransitionTag="open-modal-box2" marginTop="20" width="20" height="20" borderRadius="999" backgroundColor="orange" />
<ContentView row="3" sharedTransitionTag="open-modal-box3" marginTop="20" width="20" height="20" borderRadius="999" backgroundColor="red" horizontalAlignment="left" marginLeft="100" />
<ContentView row="4" sharedTransitionTag="open-modal-box4" marginTop="20" width="20" height="20" borderRadius="999" backgroundColor="pink" horizontalAlignment="right" marginRight="100" />
</GridLayout>
<ContentView sharedTransitionTag="astronaut" rowSpan="4" translateY="600" opacity="0" isUserInteractionEnabled="false" />
</GridLayout>
</Page>

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

@@ -1,87 +1,73 @@
import { ViewBase } from '../core/view-base';
import { BackstackEntry } from '../frame';
import { SharedTransition } from './shared-transition';
// import { SlideTransition } from './slide-transition';
import { FadeTransition } from './fade-transition';
import { SharedTransition } from './shared-transition';
@NativeClass
class CustomInterpolator extends android.view.animation.AnticipateOvershootInterpolator {
getInterpolation(input: number) {
// HACK: we speed up the interpolation by 10% to fix the issue with the transition not being finished
// and the views shifting from their intended final position...
// this is really just a hack and should be fixed properly once we
// can figure out the root cause of the issue.
const res = super.getInterpolation(input) * 1.1;
if (res > 1) {
return float(1);
}
return float(res);
}
}
function setTransitionName(view: ViewBase) {
if (!view.sharedTransitionTag) {
return;
}
try {
androidx.core.view.ViewCompat.setTransitionName(view.nativeView, view.sharedTransitionTag);
} catch (err) {
// ignore
}
}
export class PageTransition extends FadeTransition {
//SlideTransition
constructor() {
super(500);
// when extending slide:
// super('left', 500);
constructor(duration?: number, curve?: any) {
// 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.');
}
super(duration);
}
// when extending slide:
// createAndroidAnimator(transitionType: string) {
// // console.log('HELLO PageTransition', transitionType);
// if (
// [
// Transition.AndroidTransitionType.enter,
// Transition.AndroidTransitionType.popEnter,
// Transition.AndroidTransitionType.popExit,
// // When extending SlideTransition, disable exit
// // This causes back navigation shared elements position to be off
// // Transition.AndroidTransitionType.exit,
// ].includes(transitionType)
// ) {
// return super.createAndroidAnimator(transitionType);
// }
// }
androidFragmentTransactionCallback(fragmentTransaction: androidx.fragment.app.FragmentTransaction, currentEntry: BackstackEntry, newEntry: BackstackEntry) {
const fromPage = currentEntry.resolvedPage;
const toPage = newEntry.resolvedPage;
const currentFragment: androidx.fragment.app.Fragment = currentEntry ? currentEntry.fragment : null;
const newFragment: androidx.fragment.app.Fragment = newEntry.fragment;
const { sharedElements, presented, presenting } = SharedTransition.getSharedElements(fromPage, toPage);
// fragmentTransaction.addSharedElement();
const { presented, presenting } = SharedTransition.getSharedElements(fromPage, toPage);
toPage.on('loaded', () => {
presented.forEach((v) => {
console.log({
presentedSharedElements: true,
nativeView: !!v.nativeView,
sharedTransitionTag: v.sharedTransitionTag,
});
androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag);
});
// setTimeout(() => {
toPage.once('loaded', () => {
presented.forEach(setTransitionName);
newFragment.startPostponedEnterTransition();
// }, 2000)
});
presenting.forEach((v) => {
console.log({
presentingSharedElements: true,
nativeView: !!v.nativeView,
sharedTransitionTag: v.sharedTransitionTag,
});
androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag);
});
presenting.forEach((v) => {
setTransitionName(v);
fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag);
});
fragmentTransaction.setReorderingAllowed(true);
const transitionSet = new androidx.transition.TransitionSet();
transitionSet.setDuration(500);
transitionSet.setDuration(this.getDuration());
transitionSet.addTransition(new androidx.transition.ChangeBounds());
transitionSet.addTransition(new androidx.transition.ChangeTransform());
// transitionSet.addTransition(new androidx.transition.ChangeClipBounds());
transitionSet.setInterpolator(new CustomInterpolator());
// postpone enter until we call "loaded" on the new page
newFragment.postponeEnterTransition();
newFragment.setSharedElementEnterTransition(transitionSet);
newFragment.setSharedElementReturnTransition(transitionSet);
// newFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds());
// currentFragment.setSharedElementEnterTransition(new androidx.transition.ChangeBounds());
// currentFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds());
}
}