javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 19:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(android): RootLayout shade cover unexpected delay (#10752)

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2025-06-28 22:03:48 +03:00
committed by GitHub
parent 242c3ae03f
commit 2da4170c5a
1 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/core/ui/layouts/root-layout/index.android.ts
View File

@ -4,6 +4,7 @@ import { RootLayoutBase, defaultShadeCoverOptions } from './root-layout-common';
import { TransitionAnimation, ShadeCoverOptions } from '.'; import { TransitionAnimation, ShadeCoverOptions } from '.';
import { parseLinearGradient } from '../../../css/parser'; import { parseLinearGradient } from '../../../css/parser';
import { LinearGradient } from '../../styling/linear-gradient'; import { LinearGradient } from '../../styling/linear-gradient';
import { layout } from '../../../utils';
export * from './root-layout-common'; export * from './root-layout-common';
@ -38,11 +39,20 @@ export class RootLayout extends RootLayoutBase {
} }
protected _initShadeCover(view: View, shadeOptions: ShadeCoverOptions): void { protected _initShadeCover(view: View, shadeOptions: ShadeCoverOptions): void {
const initialState = <TransitionAnimation>{ const options = <TransitionAnimation>{
...defaultShadeCoverOptions.animation.enterFrom, ...defaultShadeCoverOptions.animation.enterFrom,
...shadeOptions?.animation?.enterFrom, ...shadeOptions?.animation?.enterFrom,
}; };
this._playAnimation(this._getAnimationSet(view, initialState)); const nativeView: android.view.View = view?.nativeViewProtected;
if (nativeView) {
nativeView.setAlpha(options.opacity);
nativeView.setScaleX(float(options.scaleX));
nativeView.setScaleY(float(options.scaleY));
nativeView.setTranslationX(layout.toDevicePixels(options.translateX));
nativeView.setTranslationY(layout.toDevicePixels(options.translateY));
nativeView.setRotation(float(options.rotate));
}
} }
protected _updateShadeCover(view: View, shadeOptions: ShadeCoverOptions): Promise<void> { protected _updateShadeCover(view: View, shadeOptions: ShadeCoverOptions): Promise<void> {
@ -51,6 +61,20 @@ export class RootLayout extends RootLayoutBase {
...shadeOptions, ...shadeOptions,
}; };
const duration = options.animation?.enterFrom?.duration || defaultShadeCoverOptions.animation.enterFrom.duration; const duration = options.animation?.enterFrom?.duration || defaultShadeCoverOptions.animation.enterFrom.duration;
const isBackgroundGradient = options.color && options.color.startsWith('linear-gradient');
if (isBackgroundGradient) {
if (view.backgroundColor) {
view.backgroundColor = undefined;
}
const parsedGradient = parseLinearGradient(options.color);
view.backgroundImage = LinearGradient.parse(parsedGradient.value);
} else {
if (view.backgroundImage) {
view.backgroundImage = undefined;
}
}
return this._playAnimation( return this._playAnimation(
this._getAnimationSet( this._getAnimationSet(
view, view,
@ -62,7 +86,7 @@ export class RootLayout extends RootLayoutBase {
rotate: 0, rotate: 0,
opacity: options.opacity, opacity: options.opacity,
}, },
options.color, isBackgroundGradient ? null : options.color,
), ),
duration, duration,
); );
@ -77,31 +101,17 @@ export class RootLayout extends RootLayoutBase {
} }
private _getAnimationSet(view: View, shadeCoverAnimation: TransitionAnimation, backgroundColor?: string): Array<android.animation.Animator> { private _getAnimationSet(view: View, shadeCoverAnimation: TransitionAnimation, backgroundColor?: string): Array<android.animation.Animator> {
const isBackgroundGradient = backgroundColor && backgroundColor.startsWith('linear-gradient'); const animationSet = Array.create(android.animation.Animator, backgroundColor ? 7 : 6);
animationSet[0] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'translationX', [layout.toDevicePixels(shadeCoverAnimation.translateX)]);
const animationSet = Array.create(android.animation.Animator, !backgroundColor || isBackgroundGradient ? 6 : 7); animationSet[1] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'translationY', [layout.toDevicePixels(shadeCoverAnimation.translateY)]);
animationSet[0] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'translationX', [shadeCoverAnimation.translateX]);
animationSet[1] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'translationY', [shadeCoverAnimation.translateY]);
animationSet[2] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'scaleX', [shadeCoverAnimation.scaleX]); animationSet[2] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'scaleX', [shadeCoverAnimation.scaleX]);
animationSet[3] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'scaleY', [shadeCoverAnimation.scaleY]); animationSet[3] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'scaleY', [shadeCoverAnimation.scaleY]);
animationSet[4] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'rotation', [shadeCoverAnimation.rotate]); animationSet[4] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'rotation', [shadeCoverAnimation.rotate]);
animationSet[5] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'alpha', [shadeCoverAnimation.opacity]); animationSet[5] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'alpha', [shadeCoverAnimation.opacity]);
if (isBackgroundGradient) {
if (view.backgroundColor) {
view.backgroundColor = undefined;
}
const parsedGradient = parseLinearGradient(backgroundColor);
view.backgroundImage = LinearGradient.parse(parsedGradient.value);
} else {
if (view.backgroundImage) {
view.backgroundImage = undefined;
}
if (backgroundColor) { if (backgroundColor) {
animationSet[6] = this._getBackgroundColorAnimator(view, backgroundColor); animationSet[6] = this._getBackgroundColorAnimator(view, backgroundColor);
} }
}
return animationSet; return animationSet;
} }