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

fix(ios): prevent animator from animating colors on shadow layer (#10686)

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2025-02-02 17:20:02 +02:00
committed by GitHub
parent 966dccd0f9
commit 79a0306f32
3 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/core/ui/animation/index.ios.ts
View File

@ -477,9 +477,11 @@ export class Animation extends AnimationBase {
this.animateNestedLayerSizeUsingBasicAnimation(nativeView, args.toValue.CGRectValue, animation, args, nativeAnimation); this.animateNestedLayerSizeUsingBasicAnimation(nativeView, args.toValue.CGRectValue, animation, args, nativeAnimation);
} }
// Shadow layers do not inherit from animating view layer // Shadow container layer belongs to the parent view layer, so animate all its properties (except for colors) separately
if (nativeView.outerShadowContainerLayer) { if (args.propertyNameToAnimate && !args.propertyNameToAnimate.endsWith('Color')) {
nativeView.outerShadowContainerLayer.addAnimationForKey(nativeAnimation, args.propertyNameToAnimate); if (nativeView.outerShadowContainerLayer) {
nativeView.outerShadowContainerLayer.addAnimationForKey(nativeAnimation, args.propertyNameToAnimate);
}
} }
} }
let callback = undefined; let callback = undefined;
@ -594,7 +596,7 @@ export class Animation extends AnimationBase {
animation._originalValue = nativeView.layer.transform; animation._originalValue = nativeView.layer.transform;
nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate); nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
// Shadow layers do not inherit from animating view layer // Shadow container layer belongs to the parent view layer, so animate its transform separately
if (nativeView.outerShadowContainerLayer) { if (nativeView.outerShadowContainerLayer) {
nativeView.outerShadowContainerLayer.setValueForKey(args.toValue, args.propertyNameToAnimate); nativeView.outerShadowContainerLayer.setValueForKey(args.toValue, args.propertyNameToAnimate);
} }
@ -859,7 +861,7 @@ export class Animation extends AnimationBase {
} }
} }
// Shadow layers do not inherit from animating view layer // Shadow container layer belongs to the parent view layer, so animate its properties separately
if (nativeView.outerShadowContainerLayer) { if (nativeView.outerShadowContainerLayer) {
const shadowClipMask = nativeView.outerShadowContainerLayer.mask; const shadowClipMask = nativeView.outerShadowContainerLayer.mask;

14
packages/core/ui/core/view/index.ios.ts
View File

@ -41,7 +41,7 @@ export class View extends ViewCommon implements ViewDefinition {
*/ */
private _modalAnimatedOptions: Array<boolean>; private _modalAnimatedOptions: Array<boolean>;
private _isLaidOut = false; private _isLaidOut = false;
private _hasTransform = false; private _isTransformed = false;
private _privateFlags: number = PFLAG_LAYOUT_REQUIRED | PFLAG_FORCE_LAYOUT; private _privateFlags: number = PFLAG_LAYOUT_REQUIRED | PFLAG_FORCE_LAYOUT;
private _cachedFrame: CGRect; private _cachedFrame: CGRect;
private _suspendCATransaction = false; private _suspendCATransaction = false;
@ -66,7 +66,7 @@ export class View extends ViewCommon implements ViewDefinition {
this._cachedFrame = null; this._cachedFrame = null;
this._isLaidOut = false; this._isLaidOut = false;
this._hasTransform = false; this._isTransformed = false;
} }
public requestLayout(): void { public requestLayout(): void {
@ -211,7 +211,7 @@ export class View extends ViewCommon implements ViewDefinition {
this._cachedFrame = frame; this._cachedFrame = frame;
let adjustedFrame = null; let adjustedFrame = null;
let transform = null; let transform = null;
if (this._hasTransform) { if (this._isTransformed) {
// Always set identity transform before setting frame; // Always set identity transform before setting frame;
transform = nativeView.layer.transform; transform = nativeView.layer.transform;
nativeView.layer.transform = CATransform3DIdentity; nativeView.layer.transform = CATransform3DIdentity;
@ -225,7 +225,7 @@ export class View extends ViewCommon implements ViewDefinition {
nativeView.frame = adjustedFrame; nativeView.frame = adjustedFrame;
} }
if (this._hasTransform) { if (this._isTransformed) {
// re-apply the transform after the frame is adjusted // re-apply the transform after the frame is adjusted
nativeView.layer.transform = transform; nativeView.layer.transform = transform;
} }
@ -410,9 +410,7 @@ export class View extends ViewCommon implements ViewDefinition {
transform = iosUtils.applyRotateTransform(transform, this.rotateX, this.rotateY, this.rotate); transform = iosUtils.applyRotateTransform(transform, this.rotateX, this.rotateY, this.rotate);
transform = CATransform3DScale(transform, scaleX, scaleY, 1); transform = CATransform3DScale(transform, scaleX, scaleY, 1);
const needsTransform: boolean = !CATransform3DEqualToTransform(this.nativeViewProtected.layer.transform, transform) || (nativeView.outerShadowContainerLayer && !CATransform3DEqualToTransform(nativeView.outerShadowContainerLayer.transform, transform)); if (!CATransform3DEqualToTransform(this.nativeViewProtected.layer.transform, transform)) {
if (needsTransform) {
const updateSuspended = this._isPresentationLayerUpdateSuspended(); const updateSuspended = this._isPresentationLayerUpdateSuspended();
if (!updateSuspended) { if (!updateSuspended) {
CATransaction.begin(); CATransaction.begin();
@ -424,7 +422,7 @@ export class View extends ViewCommon implements ViewDefinition {
if (nativeView.outerShadowContainerLayer) { if (nativeView.outerShadowContainerLayer) {
nativeView.outerShadowContainerLayer.transform = transform; nativeView.outerShadowContainerLayer.transform = transform;
} }
this._hasTransform = this.nativeViewProtected && !CATransform3DEqualToTransform(this.nativeViewProtected.transform3D, CATransform3DIdentity); this._isTransformed = this.nativeViewProtected && !CATransform3DEqualToTransform(this.nativeViewProtected.transform3D, CATransform3DIdentity);
CATransaction.setDisableActions(false); CATransaction.setDisableActions(false);
if (!updateSuspended) { if (!updateSuspended) {

1
packages/core/ui/styling/background.ios.ts
View File

@ -1114,6 +1114,7 @@ function drawBoxShadow(view: View): void {
} }
outerShadowContainerLayer.bounds = bounds; outerShadowContainerLayer.bounds = bounds;
outerShadowContainerLayer.transform = layer.transform;
outerShadowContainerLayer.anchorPoint = layer.anchorPoint; outerShadowContainerLayer.anchorPoint = layer.anchorPoint;
outerShadowContainerLayer.position = nativeView.center; outerShadowContainerLayer.position = nativeView.center;
outerShadowContainerLayer.zPosition = layer.zPosition; outerShadowContainerLayer.zPosition = layer.zPosition;