Skip to content

Commit f4b2722

Browse files
NathanWalkerNathanWalker
authored
feat(transitions): support zIndex on ios shared elements + support page props on android (#10261)
1 parent f8edee4 commit f4b2722

38 files changed

+739
-370
lines changed

‎apps/automated/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"nativescript-theme-core": "file:../../node_modules/nativescript-theme-core"
1212
},
1313
"devDependencies": {
14-
"@nativescript/android": "~8.4.0",
15-
"@nativescript/ios": "~8.4.0",
14+
"@nativescript/android": "~8.5.0",
15+
"@nativescript/ios": "~8.5.0",
1616
"@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
1717
"typescript": "~4.9.5"
1818
},

‎apps/automated/src/navigation/custom-transition.ios.ts

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { PageTransition, SharedTransition, SharedTransitionHelper, Transition } from '@nativescript/core';
1+
import { PageTransition, SharedTransition, SharedTransitionAnimationType, SharedTransitionHelper, Transition, Utils } from '@nativescript/core';
2+
import { CORE_ANIMATION_DEFAULTS } from '@nativescript/core/utils';
23

34
export class CustomTransition extends Transition {
45
constructor(duration: number, curve: any) {
@@ -72,9 +73,24 @@ class PageTransitionController extends NSObject implements UIViewControllerAnima
7273
transitionDuration(transitionContext: UIViewControllerContextTransitioning): number {
7374
const owner = this.owner.deref();
7475
if (owner) {
75-
return owner.getDuration();
76+
const state = SharedTransition.getState(owner.id);
77+
switch (state?.activeType) {
78+
case SharedTransitionAnimationType.present:
79+
if (Utils.isNumber(state?.pageEnd?.duration)) {
80+
return state.pageEnd?.duration / 1000;
81+
} else {
82+
return Utils.getDurationWithDampingFromSpring(state.pageEnd?.spring).duration;
83+
}
84+
85+
case SharedTransitionAnimationType.dismiss:
86+
if (Utils.isNumber(state?.pageReturn?.duration)) {
87+
return state.pageReturn?.duration / 1000;
88+
} else {
89+
return Utils.getDurationWithDampingFromSpring(state.pageReturn?.spring).duration;
90+
}
91+
}
7692
}
77-
return 0.35;
93+
return CORE_ANIMATION_DEFAULTS.duration;
7894
}
7995

8096
animateTransition(transitionContext: UIViewControllerContextTransitioning): void {

‎apps/automated/src/navigation/transition-tests.ts

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ export function test_Transitions() {
5252
// helper.navigateWithEntry({ create: mainPageFactory, clearHistory: true, animated: false });
5353
}
5454

55-
export function test_SharedElementTransitions() {
56-
helper.navigate(() => {
55+
export function test_SharedElementTransitions(done) {
56+
const mainPage = helper.navigate(() => {
5757
const page = new Page();
5858
page.id = 'SharedelementTransitionsTestPage_MAIN';
5959
page.style.backgroundColor = new Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
@@ -76,12 +76,12 @@ export function test_SharedElementTransitions() {
7676

7777
const navigationTransition = SharedTransition.custom(new CustomSharedElementPageTransition());
7878

79-
var testId = `SharedElementTransition[${JSON.stringify(navigationTransition)}]`;
79+
const testId = `SharedElementTransition[${JSON.stringify(navigationTransition)}]`;
8080
if (Trace.isEnabled()) {
8181
Trace.write(`Testing ${testId}`, Trace.categories.Test);
8282
}
83-
var navigationEntry: NavigationEntry = {
84-
create: function (): Page {
83+
const navigationEntry: NavigationEntry = {
84+
create(): Page {
8585
let page = new Page();
8686
page.id = testId;
8787
page.style.backgroundColor = new Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
@@ -99,11 +99,16 @@ export function test_SharedElementTransitions() {
9999
grid.addChild(sharedElement);
100100

101101
page.content = grid;
102+
103+
page.once('navigatedTo', () => {
104+
done();
105+
});
106+
102107
return page;
103108
},
104109
animated: true,
105110
transition: navigationTransition,
106111
};
107112

108-
helper.navigateWithEntry(navigationEntry);
113+
mainPage.frame.navigate(navigationEntry);
109114
}

‎apps/toolbox/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
"@nativescript/imagepicker": "^1.0.6"
1313
},
1414
"devDependencies": {
15-
"@nativescript/android": "~8.4.0",
16-
"@nativescript/ios": "~8.4.0",
15+
"@nativescript/android": "~8.5.0",
16+
"@nativescript/ios": "~8.5.0",
1717
"@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
1818
"typescript": "~4.9.5"
1919
}

‎apps/toolbox/src/pages/transitions/transition-example-detail.xml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@
66

77
<GridLayout>
88
<Button text="Close" tap="{{close}}" visibility="{{ isModal ? 'visible' : 'collapsed' }}" horizontalAlignment="left" verticalAlignment="top" marginTop="20" marginLeft="20" />
9-
<ContentView width="80%" height="300" borderRadius="20" backgroundColor="green" sharedTransitionTag="fab" horizontalAlignment="center" verticalAlignment="top" marginTop="100" visibility="{{ example1 ? 'visible' : 'collapsed' }}" />
9+
<ContentView width="80%" height="300" borderRadius="20" backgroundColor="green" sharedTransitionTag="fab" sharedTransitionIgnore="{{!example1}}" horizontalAlignment="center" verticalAlignment="top" marginTop="100" visibility="{{ example1 ? 'visible' : 'collapsed' }}" />
1010

1111
<GridLayout visibility="{{ example2 ? 'visible' : 'collapsed' }}">
12-
<ContentView width="200" height="200" borderRadius="100" backgroundColor="purple" sharedTransitionTag="shape1" verticalAlignment="top" horizontalAlignment="right" marginRight="20" marginTop="20" iosIgnoreSafeArea="true" />
13-
<ContentView width="80" height="80" borderRadius="40" backgroundColor="orange" sharedTransitionTag="shape2" verticalAlignment="top" horizontalAlignment="left" marginLeft="20" marginTop="20" iosIgnoreSafeArea="true" />
14-
<ContentView width="20" height="20" borderRadius="10" backgroundColor="brown" sharedTransitionTag="shape3" verticalAlignment="bottom" horizontalAlignment="right" marginRight="20" iosIgnoreSafeArea="true" />
15-
<ContentView width="150" height="150" borderRadius="75" backgroundColor="yellow" sharedTransitionTag="shape4" verticalAlignment="bottom" horizontalAlignment="left" marginLeft="20" iosIgnoreSafeArea="true" />
12+
<ContentView width="200" height="200" borderRadius="100" backgroundColor="purple" sharedTransitionTag="shape1" sharedTransitionIgnore="{{!example2}}" verticalAlignment="top" horizontalAlignment="right" marginRight="20" marginTop="20" iosIgnoreSafeArea="true" />
13+
<ContentView width="80" height="80" borderRadius="40" backgroundColor="orange" sharedTransitionTag="shape2" sharedTransitionIgnore="{{!example2}}" verticalAlignment="top" horizontalAlignment="left" marginLeft="20" marginTop="20" iosIgnoreSafeArea="true" />
14+
<ContentView width="20" height="20" borderRadius="10" backgroundColor="brown" sharedTransitionTag="shape3" sharedTransitionIgnore="{{!example2}}" verticalAlignment="bottom" horizontalAlignment="right" marginRight="20" iosIgnoreSafeArea="true" />
15+
<ContentView width="150" height="150" borderRadius="75" backgroundColor="yellow" sharedTransitionTag="shape4" sharedTransitionIgnore="{{!example2}}" verticalAlignment="bottom" horizontalAlignment="left" marginLeft="20" iosIgnoreSafeArea="true" />
1616
</GridLayout>
1717

1818
<GridLayout visibility="{{ example3 ? 'visible' : 'collapsed' }}">
19-
<ContentView width="80%" height="200" borderRadius="20" backgroundColor="purple" sharedTransitionTag="{{dynamicTag}}" verticalAlignment="top" horizontalAlignment="center" marginRight="20" marginTop="20" iosIgnoreSafeArea="true" />
19+
<ContentView width="80%" height="200" borderRadius="20" backgroundColor="purple" sharedTransitionTag="{{dynamicTag}}" sharedTransitionIgnore="{{!example3}}" verticalAlignment="top" horizontalAlignment="center" marginRight="20" marginTop="20" iosIgnoreSafeArea="true" />
2020
</GridLayout>
2121
</GridLayout>
2222
</Page>

‎apps/toolbox/src/pages/transitions/transition-example.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Observable, EventData, Page, ShowModalOptions, SharedTransition, ModalTransition, PageTransition, FadeTransition, SlideTransition, PropertyChangeData } from '@nativescript/core';
1+
import { Observable, EventData, Page, ShowModalOptions, SharedTransition, ModalTransition, PageTransition, FadeTransition, SlideTransition, PropertyChangeData, ListView } from '@nativescript/core';
22
let page: Page;
33
// SharedTransition.DEBUG = true;
44
export function navigatingTo(args: EventData) {
@@ -64,6 +64,24 @@ export class TransitionsModel extends Observable {
6464
finishThreshold: 0.5,
6565
},
6666
},
67+
pageEnd: {
68+
sharedTransitionTags: {
69+
shape1: {
70+
// purple should appear "below" other shapes during transition
71+
zIndex: 0,
72+
},
73+
shape2: {
74+
zIndex: 1,
75+
},
76+
shape3: {
77+
zIndex: 3,
78+
},
79+
shape4: {
80+
// yellow should appear "below" shape3
81+
zIndex: 2,
82+
},
83+
},
84+
},
6785
// pageEnd: {
6886
// duration: 3000
6987
// },

‎apps/toolbox/src/pages/transitions/transition-example.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</Page.actionBar>
66

77
<GridLayout rows="auto,*">
8-
<SegmentedBar sharedTransitionTag="segmentbar" horizontalAlignment="center" selectedIndex="{{ segmentSelectedIndex }}" marginTop="20">
8+
<SegmentedBar horizontalAlignment="center" selectedIndex="{{ segmentSelectedIndex }}" marginTop="20">
99
<SegmentedBarItem title="Example A" />
1010
<SegmentedBarItem title="Example B" />
1111
<SegmentedBarItem title="Example C" />

‎apps/ui/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"@nativescript/core": "file:../../packages/core"
1212
},
1313
"devDependencies": {
14-
"@nativescript/android": "~8.4.0",
15-
"@nativescript/ios": "~8.4.0",
14+
"@nativescript/android": "~8.5.0",
15+
"@nativescript/ios": "~8.5.0",
1616
"@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
1717
"typescript": "~4.9.5"
1818
},

‎package.json

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,21 @@
1818
"url": "https://github.com/NativeScript/NativeScript.git"
1919
},
2020
"dependencies": {
21-
"@nrwl/nx-cloud": "15.1.1",
21+
"@nrwl/nx-cloud": "15.3.5",
2222
"nativescript-theme-core": "^1.0.4"
2323
},
2424
"devDependencies": {
2525
"@nativescript/hook": "^2.0.0",
2626
"@nativescript/nx": "~4.2.0",
27-
"@nrwl/cli": "15.8.3",
28-
"@nrwl/eslint-plugin-nx": "15.8.3",
29-
"@nrwl/jest": "15.8.3",
30-
"@nrwl/node": "15.8.3",
31-
"@nrwl/workspace": "15.8.3",
27+
"@nrwl/cli": "15.9.2",
28+
"@nrwl/eslint-plugin-nx": "15.9.2",
29+
"@nrwl/jest": "15.9.2",
30+
"@nrwl/node": "15.9.2",
31+
"@nrwl/workspace": "15.9.2",
3232
"@nstudio/focus": "^15.0.0",
3333
"@nstudio/nps-i": "~2.0.0",
3434
"@prettier/plugin-xml": "^2.2.0",
35-
"@types/jest": "29.4.0",
35+
"@types/jest": "~29.5.0",
3636
"@types/node": "18.7.1",
3737
"@typescript-eslint/eslint-plugin": "^5.30.0",
3838
"@typescript-eslint/parser": "^5.30.0",
@@ -46,20 +46,20 @@
4646
"eslint-config-prettier": "^8.1.0",
4747
"gonzales": "^1.0.7",
4848
"husky": "^8.0.1",
49-
"jest": "29.4.3",
49+
"jest": "~29.5.0",
5050
"lint-staged": "^13.1.0",
5151
"module-alias": "^2.2.2",
52-
"nativescript": "~8.4.0",
52+
"nativescript": "~8.5.0",
5353
"nativescript-typedoc-theme": "1.1.0",
54-
"nx": "15.8.3",
54+
"nx": "15.9.2",
5555
"parse-css": "git+https://github.com/tabatkins/parse-css.git",
5656
"parserlib": "^1.1.1",
5757
"prettier": "^2.6.2",
5858
"reduce-css-calc": "~2.1.7",
5959
"sass": "^1.45.2",
6060
"shady-css-parser": "^0.1.0",
6161
"tree-kill": "^1.2.2",
62-
"ts-jest": "29.0.5",
62+
"ts-jest": "29.1.0",
6363
"ts-node": "10.9.1",
6464
"ts-patch": "^2.1.0",
6565
"tslib": "^2.5.0",

‎packages/core/index.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export type { InstrumentationMode, TimerInfo } from './profiling';
107107
export { encoding } from './text';
108108
export * from './trace';
109109
export * from './ui';
110-
import { GC, isFontIconURI, isDataURI, isFileOrResourcePath, executeOnMainThread, mainThreadify, isMainThread, dispatchToMainThread, executeOnUIThread, releaseNativeObject, getModuleName, openFile, openUrl, isRealDevice, layout, ad as androidUtils, iOSNativeHelper as iosUtils, Source, escapeRegexSymbols, convertString, dismissSoftInput, dismissKeyboard, queueMacrotask, queueGC, throttle, debounce, dataSerialize, dataDeserialize, copyToClipboard, getFileExtension, isEmoji } from './utils';
110+
import { GC, isFontIconURI, isDataURI, isFileOrResourcePath, executeOnMainThread, mainThreadify, isMainThread, dispatchToMainThread, executeOnUIThread, releaseNativeObject, getModuleName, openFile, openUrl, isRealDevice, layout, ad as androidUtils, iOSNativeHelper as iosUtils, Source, escapeRegexSymbols, convertString, dismissSoftInput, dismissKeyboard, queueMacrotask, queueGC, throttle, debounce, dataSerialize, dataDeserialize, copyToClipboard, getFileExtension, isEmoji, getDurationWithDampingFromSpring } from './utils';
111111
import { SDK_VERSION } from './utils/constants';
112112
import { ClassInfo, getClass, getBaseClasses, getClassInfo, isBoolean, isDefined, isFunction, isNullOrUndefined, isNumber, isObject, isString, isUndefined, toUIString, verifyCallback, numberHasDecimals, numberIs64Bit } from './utils/types';
113113
export declare const Utils: {
@@ -166,5 +166,6 @@ export declare const Utils: {
166166
dismissKeyboard: typeof dismissKeyboard;
167167
copyToClipboard: typeof copyToClipboard;
168168
isEmoji: typeof isEmoji;
169+
getDurationWithDampingFromSpring: typeof getDurationWithDampingFromSpring;
169170
};
170171
export { XmlParser, ParserEventType, ParserEvent } from './xml';

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy