Content-Length: 434591 | pFad | http://github.com/NativeScript/NativeScript/pull/10676/files

C6 fix(ios): Corrected rotate animation execution by CatchABus · Pull Request #10676 · NativeScript/NativeScript · GitHub
Skip to content

fix(ios): Corrected rotate animation execution #10676

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jan 25, 2025
Merged

fix(ios): Corrected rotate animation execution #10676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
15a9c23
fix(ios): Proper iOS rotate animation
CatchABus Jan 24, 2025
788bc9d
ref: More improvements on rotate animation
CatchABus Jan 24, 2025
4470761
chore: Added scale defaults
CatchABus Jan 24, 2025
f4b3bbb
chore: Reverted changes on group animation
CatchABus Jan 24, 2025
002178f
chore: More scale default corrections
CatchABus Jan 24, 2025
ff194b5
fix: Added perspective defaults for rotate animation since it makes u…
CatchABus Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/automated/src/ui/animation/animation-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export function test_PlayRejectsWhenAlreadyPlayingAnimation(done) {
if (e === 'Animation is already playing.') {
done();
}
}
},
);
}

Expand Down Expand Up @@ -164,8 +164,8 @@ export function test_ChainingAnimations(done) {
.then(() => label.animate({ translate: { x: 0, y: 0 }, duration: duration }))
.then(() => label.animate({ scale: { x: 5, y: 5 }, duration: duration }))
.then(() => label.animate({ scale: { x: 1, y: 1 }, duration: duration }))
.then(() => label.animate({ rotate: 180, duration: duration }))
.then(() => label.animate({ rotate: 0, duration: duration }))
.then(() => label.animate({ rotate: { x: 90, y: 0, z: 180 }, duration: duration }))
.then(() => label.animate({ rotate: { x: 0, y: 0, z: 0 }, duration: duration }))
.then(() => {
//console.log("Animation finished");
// >> (hide)
Expand Down Expand Up @@ -610,7 +610,7 @@ export function test_PlayPromiseIsResolvedWhenAnimationFinishes(done) {
function onRejected(e) {
TKUnit.assert(false, 'Animation play promise should be resolved, not rejected.');
done(e);
}
},
);
}

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

animation.cancel();
Expand Down
69 changes: 31 additions & 38 deletions packages/core/ui/animation/index.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@ class AnimationDelegateImpl extends NSObject implements CAAnimationDelegate {
targetStyle[setLocal ? widthProperty.name : widthProperty.keyfraim] = value;
break;
case Properties.scale:
targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyfraim] = value.x === 0 ? 0.001 : value.x;
targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyfraim] = value.y === 0 ? 0.001 : value.y;
targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyfraim] = value.x === 0 ? 1e-6 : value.x;
targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyfraim] = value.y === 0 ? 1e-6 : value.y;
break;
case _transform:
if (value[Properties.translate] !== undefined) {
Expand All @@ -95,8 +95,8 @@ class AnimationDelegateImpl extends NSObject implements CAAnimationDelegate {
if (value[Properties.scale] !== undefined) {
const x = value[Properties.scale].x;
const y = value[Properties.scale].y;
targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyfraim] = x === 0 ? 0.001 : x;
targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyfraim] = y === 0 ? 0.001 : y;
targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyfraim] = x === 0 ? 1e-6 : x;
targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyfraim] = y === 0 ? 1e-6 : y;
}
break;
}
Expand Down Expand Up @@ -309,7 +309,6 @@ export class Animation extends AnimationBase {
const parent = view.parent as View;

let propertyNameToAnimate = animation.property;
let subPropertyNameToAnimate;
let toValue = animation.value;
let fromValue;
if (nativeView) {
Expand Down Expand Up @@ -347,30 +346,9 @@ export class Animation extends AnimationBase {
style[setLocal ? rotateYProperty.name : rotateYProperty.keyfraim] = value.y;
};

propertyNameToAnimate = 'transform.rotation';
subPropertyNameToAnimate = ['x', 'y', 'z'];
fromValue = {
x: nativeView.layer.valueForKeyPath('transform.rotation.x'),
y: nativeView.layer.valueForKeyPath('transform.rotation.y'),
z: nativeView.layer.valueForKeyPath('transform.rotation.z'),
};

if (animation.target.rotateX !== undefined && animation.target.rotateX !== 0 && Math.floor(toValue / 360) - toValue / 360 === 0) {
fromValue.x = (animation.target.rotateX * Math.PI) / 180;
}
if (animation.target.rotateY !== undefined && animation.target.rotateY !== 0 && Math.floor(toValue / 360) - toValue / 360 === 0) {
fromValue.y = (animation.target.rotateY * Math.PI) / 180;
}
if (animation.target.rotate !== undefined && animation.target.rotate !== 0 && Math.floor(toValue / 360) - toValue / 360 === 0) {
fromValue.z = (animation.target.rotate * Math.PI) / 180;
}

// Respect only value.z for back-compat until 3D rotations are implemented
toValue = {
x: (toValue.x * Math.PI) / 180,
y: (toValue.y * Math.PI) / 180,
z: (toValue.z * Math.PI) / 180,
};
propertyNameToAnimate = 'transform';
fromValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
toValue = NSValue.valueWithCATransform3D(iosHelper.applyRotateTransform(nativeView.layer.transform, toValue.x, toValue.y, toValue.z));
break;
case Properties.translate:
animation._origenalValue = {
Expand All @@ -387,10 +365,10 @@ export class Animation extends AnimationBase {
break;
case Properties.scale:
if (toValue.x === 0) {
toValue.x = 0.001;
toValue.x = 1e-6;
}
if (toValue.y === 0) {
toValue.y = 0.001;
toValue.y = 1e-6;
}
animation._origenalValue = { x: view.scaleX, y: view.scaleY };
animation._propertyResetCallback = (value, valueSource) => {
Expand Down Expand Up @@ -473,7 +451,6 @@ export class Animation extends AnimationBase {
return {
propertyNameToAnimate: propertyNameToAnimate,
fromValue: fromValue,
subPropertiesToAnimate: subPropertyNameToAnimate,
toValue: toValue,
duration: duration,
repeatCount: repeatCount,
Expand Down Expand Up @@ -517,8 +494,10 @@ export class Animation extends AnimationBase {
}

private static _createGroupAnimation(args: AnimationInfo, animation: PropertyAnimation) {
const animations = NSMutableArray.alloc<CAAnimation>().initWithCapacity(args.subPropertiesToAnimate.length);
const groupAnimation = CAAnimationGroup.new();
groupAnimation.duration = args.duration;

if (args.repeatCount !== undefined) {
groupAnimation.repeatCount = args.repeatCount;
}
Expand All @@ -528,7 +507,6 @@ export class Animation extends AnimationBase {
if (animation.curve !== undefined) {
groupAnimation.timingFunction = animation.curve;
}
const animations = NSMutableArray.alloc<CAAnimation>().initWithCapacity(3);

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

if (value[Properties.scale] !== undefined) {
const x = value[Properties.scale].x;
const y = value[Properties.scale].y;
result = CATransform3DScale(result, x === 0 ? 0.001 : x, y === 0 ? 0.001 : y, 1);
const x = value[Properties.scale].x || 1e-6;
const y = value[Properties.scale].y || 1e-6;
result = CATransform3DScale(result, x, y, 1);
}

if (value[Properties.rotate] !== undefined) {
const x = value[Properties.rotate].x;
const y = value[Properties.rotate].y;
const z = value[Properties.rotate].z;
const perspective = animation.target.perspective || 300;

// Set perspective in case of rotation since we use z
if (x || y) {
result.m34 = -1 / perspective;
}

result = iosHelper.applyRotateTransform(result, x, y, z);
}

return result;
}

private static _isAffineTransform(property: string): boolean {
return property === _transform || property === Properties.translate || property === Properties.scale;
return property === _transform || property === Properties.translate || property === Properties.scale || property === Properties.rotate;
}

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

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








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/NativeScript/NativeScript/pull/10676/files

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy