8000 fix(ios): corrected rotate animation (#10676) · NativeScript/NativeScript@e545f58 · GitHub
[go: up one dir, main page]
Skip to content

Commit e545f58

Browse files
CatchABusCatchABus
authored
fix(ios): corrected rotate animation (#10676)
[skip ci]
1 parent a531232 commit e545f58

File tree

2 files changed

+36
-43
lines changed

2 files changed

+36
-43
lines changed

‎apps/automated/src/ui/animation/animation-tests.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export function test_PlayRejectsWhenAlreadyPlayingAnimation(done) {
7979
if (e === 'Animation is already playing.') {
8080
done();
8181
}
82-
}
82+
},
8383
);
8484
}
8585

@@ -164,8 +164,8 @@ export function test_ChainingAnimations(done) {
164164
.then(() => label.animate({ translate: { x: 0, y: 0 }, duration: duration }))
165165
.then(() => label.animate({ scale: { x: 5, y: 5 }, duration: duration }))
166166
.then(() => label.animate({ scale: { x: 1, y: 1 }, duration: duration }))
167-
.then(() => label.animate({ rotate: 180, duration: duration }))
168-
.then(() => label.animate({ rotate: 0, duration: duration }))
167+
.then(() => label.animate({ rotate: { x: 90, y: 0, z: 180 }, duration: duration }))
168+
.then(() => label.animate({ rotate: { x: 0, y: 0, z: 0 }, duration: duration }))
169169
.then(() => {
170170
//console.log("Animation finished");
171171
// >> (hide)
@@ -610,7 +610,7 @@ export function test_PlayPromiseIsResolvedWhenAnimationFinishes(done) {
610610
function onRejected(e) {
611611
TKUnit.assert(false, 'Animation play promise should be resolved, not rejected.');
612612
done(e);
613-
}
613+
},
614614
);
615615
}
616616

@@ -627,7 +627,7 @@ export function test_PlayPromiseIsRejectedWhenAnimationIsCancelled(done) {
627627
function onRejected(e) {
628628
TKUnit.assert(animation.isPlaying === false, 'Animation.isPlaying should be false when animation play promise is rejected.');
629629
done();
630-
}
630+
},
631631
);
632632

633633
animation.cancel();

‎packages/core/ui/animation/index.ios.ts

Lines changed: 31 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ class AnimationDelegateImpl extends NSObject implements CAAnimationDelegate {
7979
targetStyle[setLocal ? widthProperty.name : widthProperty.keyframe] = value;
8080
break;
8181
case Properties.scale:
82-
targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = value.x === 0 ? 0.001 : value.x;
83-
targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = value.y === 0 ? 0.001 : value.y;
82+
targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = value.x === 0 ? 1e-6 : value.x;
83+
targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = value.y === 0 ? 1e-6 : value.y;
8484
break;
8585
case _transform:
8686
if (value[Properties.translate] !== undefined) {
@@ -95,8 +95,8 @@ class AnimationDelegateImpl extends NSObject implements CAAnimationDelegate {
9595
if (value[Properties.scale] !== undefined) {
9696
const x = value[Properties.scale].x;
9797
const y = value[Properties.scale].y;
98-
targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = x === 0 ? 0.001 : x;
99-
targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = y === 0 ? 0.001 : y;
98+
targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = x === 0 ? 1e-6 : x;
99+
targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = y === 0 ? 1e-6 : y;
100100
}
101101
break;
102102
}
@@ -309,7 +309,6 @@ export class Animation extends AnimationBase {
309309
const parent = view.parent as View;
310310

311311
let propertyNameToAnimate = animation.property;
312-
let subPropertyNameToAnimate;
313312
let toValue = animation.value;
314313
let fromValue;
315314
if (nativeView) {
@@ -347,30 +346,9 @@ export class Animation extends AnimationBase {
347346
style[setLocal ? rotateYProperty.name : rotateYProperty.keyframe] = value.y;
348347
};
349348

350-
propertyNameToAnimate = 'transform.rotation';
351-
subPropertyNameToAnimate = ['x', 'y', 'z'];
352-
fromValue = {
353-
x: nativeView.layer.valueForKeyPath('transform.rotation.x'),
354-
y: nativeView.layer.valueForKeyPath('transform.rotation.y'),
355-
z: nativeView.layer.valueForKeyPath('transform.rotation.z'),
356-
};
357-
358-
if (animation.target.rotateX !== undefined && animation.target.rotateX !== 0 && Math.floor(toValue / 360) - toValue / 360 === 0) {
359-
fromValue.x = (animation.target.rotateX * Math.PI) / 180;
360-
}
361-
if (animation.target.rotateY !== undefined && animation.target.rotateY !== 0 && Math.floor(toValue / 360) - toValue / 360 === 0) {
362-
fromValue.y = (animation.target.rotateY * Math.PI) / 180;
363-
}
364-
if (animation.target.rotate !== undefined && animation.target.rotate !== 0 && Math.floor(toValue / 360) - toValue / 360 === 0) {
365-
fromValue.z = (animation.target.rotate * Math.PI) / 180;
366-
}
367-
368-
// Respect only value.z for back-compat until 3D rotations are implemented
369-
toValue = {
370-
x: (toValue.x * Math.PI) / 180,
371-
y: (toValue.y * Math.PI) / 180,
372-
z: (toValue.z * Math.PI) / 180,
373-
};
349+
propertyNameToAnimate = 'transform';
350+
fromValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
351+
toValue = NSValue.valueWithCATransform3D(iosHelper.applyRotateTransform(nativeView.layer.transform, toValue.x, toValue.y, toValue.z));
374352
break;
375353
case Properties.translate:
376354
animation._originalValue = {
@@ -387,10 +365,10 @@ export class Animation extends AnimationBase {
387365
break;
388366
case Properties.scale:
389367
if (toValue.x === 0) {
390-
toValue.x = 0.001;
368+
toValue.x = 1e-6;
391369
}
392370
if (toValue.y === 0) {
393-
toValue.y = 0.001;
371+
toValue.y = 1e-6;
394372
}
395373
animation._originalValue = { x: view.scaleX, y: view.scaleY };
396374
animation._propertyResetCallback = (value, valueSource) => {
@@ -473,7 +451,6 @@ export class Animation extends AnimationBase {
473451
return {
474452
propertyNameToAnimate: propertyNameToAnimate,
475453
fromValue: fromValue,
476-
subPropertiesToAnimate: subPropertyNameToAnimate,
477454
toValue: toValue,
478455
duration: duration,
479456
repeatCount: repeatCount,
@@ -517,8 +494,10 @@ export class Animation extends AnimationBase {
517494
}
518495

519496
private static _createGroupAnimation(args: AnimationInfo, animation: PropertyAnimation) {
497+
const animations = NSMutableArray.alloc<CAAnimation>().initWithCapacity(args.subPropertiesToAnimate.length);
520498
const groupAnimation = CAAnimationGroup.new();
521499
groupAnimation.duration = args.duration;
500+
522501
if (args.repeatCount !== undefined) {
523502
groupAnimation.repeatCount = args.repeatCount;
524503
}
@@ -528,7 +507,6 @@ export class Animation extends AnimationBase {
528507
if (animation.curve !== undefined) {
529508
groupAnimation.timingFunction = animation.curve;
530509
}
531-
const animations = NSMutableArray.alloc<CAAnimation>().initWithCapacity(3);
532510

533511
args.subPropertiesToAnimate.forEach((property) => {
534512
const basicAnimationArgs = { ...args, duration: undefined, repeatCount: undefined, delay: undefined, curve: undefined };
@@ -671,16 +649,30 @@ export class Animation extends AnimationBase {
671649
}
672650

673651
if (value[Properties.scale] !== undefined) {
674-
const x = value[Properties.scale].x;
675-
const y = value[Properties.scale].y;
676-
result = CATransform3DScale(result, x === 0 ? 0.001 : x, y === 0 ? 0.001 : y, 1);
652+
const x = value[Properties.scale].x || 1e-6;
653+
const y = value[Properties.scale].y || 1e-6;
654+
result = CATransform3DScale(result, x, y, 1);
655+
}
656+
657+
if (value[Properties.rotate] !== undefined) {
658+
const x = value[Properties.rotate].x;
659+
const y = value[Properties.rotate].y;
660+
const z = value[Properties.rotate].z;
661+
const perspective = animation.target.perspective || 300;
662+
663+
// Set perspective in case of rotation since we use z
664+
if (x || y) {
665+
result.m34 = -1 / perspective;
666+
}
667+
668+
result = iosHelper.applyRotateTransform(result, x, y, z);
677669
}
678670

679671
return result;
680672
}
681673

682674
private static _isAffineTransform(property: string): boolean {
683-
return property === _transform || property === Properties.translate || property === Properties.scale;
675+
return property === _transform || property === Properties.translate || property === Properties.scale || property === Properties.rotate;
684676
}
685677

686678
private static _canBeMerged(animation1: PropertyAnimation, animation2: PropertyAnimation) {
@@ -947,7 +939,8 @@ function calculateTransform(view: View): CATransform3D {
947939
// Order is important: translate, rotate, scale
948940
let expectedTransform = new CATransform3D(CATransform3DIdentity);
949941

950-
// Only set perspective if there is 3D rotation
942+
// TODO: Add perspective property to transform animations (not just rotation)
943+
// Set perspective in case of rotation since we use z
951944
if (view.rotateX || view.rotateY) {
952945
expectedTransform.m34 = -1 / perspective;
953946
}

0 commit comments

Comments
 (0)
0