Skip to content

Commit 788bc9d

Browse files
CatchABusNathanWalker
CatchABus
authored and
NathanWalker
committed
ref: More improvements on rotate animation
1 parent 15a9c23 commit 788bc9d

File tree

2 files changed

+13
-35
lines changed

2 files changed

+13
-35
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: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -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 = {
@@ -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,7 +494,7 @@ export class Animation extends AnimationBase {
517494
}
518495

519496
private static _createGroupAnimation(args: AnimationInfo, animation: PropertyAnimation) {
520-
const animations = NSMutableArray.alloc<CAAnimation>().initWithCapacity(3);
497+
const animations = NSMutableArray.alloc<CAAnimation>().initWithCapacity(args.subPropertiesToAnimate.length);
521498
const groupAnimation = CAAnimationGroup.new();
522499
groupAnimation.duration = args.duration;
523500

@@ -946,9 +923,10 @@ function calculateTransform(view: View): CATransform3D {
946923
let expectedTransform = new CATransform3D(CATransform3DIdentity);
947924

948925
// Only set perspective if there is 3D rotation
949-
if (view.rotateX || view.rotateY) {
950-
expectedTransform.m34 = -1 / perspective;
951-
}
926+
// TODO: Add perspective property to transform animations (not just rotation)
927+
// if (view.rotateX || view.rotateY) {
928+
// expectedTransform.m34 = -1 / perspective;
929+
// }
952930

953931
expectedTransform = CATransform3DTranslate(expectedTransform, view.translateX, view.translateY, 0);
954932
expectedTransform = iosHelper.applyRotateTransform(expectedTransform, view.rotateX, view.rotateY, view.rotate);

0 commit comments

Comments
 (0)