javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-26 19:20:18 +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

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

@ -477,11 +477,13 @@ export class Animation extends AnimationBase {
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 (args.propertyNameToAnimate && !args.propertyNameToAnimate.endsWith('Color')) {
if (nativeView.outerShadowContainerLayer) {
nativeView.outerShadowContainerLayer.addAnimationForKey(nativeAnimation, args.propertyNameToAnimate);
}
}
}
let callback = undefined;
if (index + 1 < propertyAnimations.length) {
callback = Animation._createiOSAnimationFunction(propertyAnimations, index + 1, playSequentially, valueSource, finishedCallback);
@ -594,7 +596,7 @@ export class Animation extends AnimationBase {
animation._originalValue = nativeView.layer.transform;
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) {
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) {
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 _isLaidOut = false;
private _hasTransform = false;
private _isTransformed = false;
private _privateFlags: number = PFLAG_LAYOUT_REQUIRED | PFLAG_FORCE_LAYOUT;
private _cachedFrame: CGRect;
private _suspendCATransaction = false;
@ -66,7 +66,7 @@ export class View extends ViewCommon implements ViewDefinition {
this._cachedFrame = null;
this._isLaidOut = false;
this._hasTransform = false;
this._isTransformed = false;
}
public requestLayout(): void {
@ -211,7 +211,7 @@ export class View extends ViewCommon implements ViewDefinition {
this._cachedFrame = frame;
let adjustedFrame = null;
let transform = null;
if (this._hasTransform) {
if (this._isTransformed) {
// Always set identity transform before setting frame;
transform = nativeView.layer.transform;
nativeView.layer.transform = CATransform3DIdentity;
@ -225,7 +225,7 @@ export class View extends ViewCommon implements ViewDefinition {
nativeView.frame = adjustedFrame;
}
if (this._hasTransform) {
if (this._isTransformed) {
// re-apply the transform after the frame is adjusted
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 = CATransform3DScale(transform, scaleX, scaleY, 1);
const needsTransform: boolean = !CATransform3DEqualToTransform(this.nativeViewProtected.layer.transform, transform) || (nativeView.outerShadowContainerLayer && !CATransform3DEqualToTransform(nativeView.outerShadowContainerLayer.transform, transform));
if (needsTransform) {
if (!CATransform3DEqualToTransform(this.nativeViewProtected.layer.transform, transform)) {
const updateSuspended = this._isPresentationLayerUpdateSuspended();
if (!updateSuspended) {
CATransaction.begin();
@ -424,7 +422,7 @@ export class View extends ViewCommon implements ViewDefinition {
if (nativeView.outerShadowContainerLayer) {
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);
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.transform = layer.transform;
outerShadowContainerLayer.anchorPoint = layer.anchorPoint;
outerShadowContainerLayer.position = nativeView.center;
outerShadowContainerLayer.zPosition = layer.zPosition;