feat: Add 3D rotation to view - takeover of PR# 5950 #8136

rynop · 2019-11-25T22:06:17Z

PR Checklist

The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages.
There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
You have signed the CLA.
All existing tests are passing: https://github.com/NativeScript/NativeScript/blob/master/DevelopmentWorkflow.md#running-unit-tests.
Tests for the changes are included - https://github.com/NativeScript/NativeScript/blob/master/WritingUnitTests.md.

What is the current behavior?

This is an attempted takeover for stalled #5950 . Until this PR, NS only supported rotation around the Z axis.

What is the new behavior?

View can now rotate around x, y or z axis.

Fixes/Implements/Closes #5950

BREAKING CHANGES:

spring animation no longer supported with rotate.

I need HELP with the following

3d graphics is not my area of expertise, so I need help with the following:

This constructor call is invalid. needs to pass an obj with an o attribute of type NSCoder. I have no idea how to do this, please help...
quick code review to make sure I didn't mess something up in merging Add 3d rotation to View #5950
E2E Test cases
Testing

rynop · 2019-11-25T22:09:26Z

Whew this was a doozie. Lots of merge conflicts that had to be manually merged.

Please take a look at "I need HELP with the following" above, as my expertise on graphics is almost non-existent and my time is limited ATM.

rynop · 2019-11-25T22:10:43Z

nativescript-core/ui/animation/animation.ios.ts

@@ -497,9 +558,6 @@ export class Animation extends AnimationBase {
                            animation.target[animation.property] = value;
                        };
                        break;
-                    case Properties.rotate:


Spring was removed here - I think this makes sense w/r/t a 3d rotation. If not could use some help from the community implementing.

rynop · 2019-11-25T22:13:23Z

nativescript-core/ui/animation/animation.ios.ts

@@ -454,6 +477,44 @@ export class Animation extends AnimationBase {
        }
    }

+    private static _createGroupAnimation(args: AnimationInfo, animation: PropertyAnimation) {
+        let groupAnimation = new CAAnimationGroup();


This constructor call is invalid. needs to pass an obj with an o attribute of type NSCoder. I have no idea how to do this, please help...

vakrilov · 2019-11-26T16:20:37Z

Hey @rynop
I'm really glad you decided to takeover @hamdiwanis's awesome work.
I've fixed some of the build error in your branch (couple of typings and the constructor issue).

About testing - there is a test project in e2e/animations. The last button deals with 3D transforms (make sure you run npm run setup in the root of the repo first).
Also making sure all the tests in the unit-test app are green looks like a logical next step.

rynop · 2019-11-26T16:45:18Z

Thanks so much @vakrilov . Also thanks for fixing the new CAAnimationGroup() call.

I was aware of the 3d rotation button in the test project, just didn't know if it was a NS PR requirement to have an automated test.

You see the error in the continuous-integration/travis-ci/pr ? based on the comment in the CSS it looks like its testing an invalid CSS comment, and therefore should fail. Do you concur? I don't see how this PR would trigger this CI error, so I'm guessing its coming from upstream master....

I'll run the tests in the unit-test app and report back.

rynop · 2019-11-26T23:10:07Z

I verified all E2E tests (css animations, xyz rotation from code) and tested for regression bugs on existing rotate (round z axis) on both iOS (v13.2.2) and Android (v8.0.0 OnePlus 3).

Updated unit tests. Android unit tests passing. I'm stuck on iOS tests, could use some help. The 7 tests that fail are all related:

ANIMATION.test_AnimatingProperties FAILED: View and Native transforms do not match. View: [-2, 2.4492935982947064e-16, -2.4492935982947064e-16, -2, 100, 100]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimatingMultipleViews FAILED: View and Native transforms do not match. View: [1, 0, 0, 1, 200, 200]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimateTranslate FAILED: View and Native transforms do not match. View: [1, 0, 0, 1, 100, 200]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimateScale FAILED: View and Native transforms do not match. View: [2, 0, 0, 3, 0, 0]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimateRotate FAILED: View and Native transforms do not match. View: [-0.54463903501502708, 0.83867056794542405, -0.83867056794542405, -0.54463903501502708, 0, 0]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimateTranslateScaleAndRotateSimultaneously FAILED: View and Native transforms do not match. View: [-1.0892780700300542, 1.6773411358908481, -2.5160117038362722, -1.6339171050450814, 100, 200]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimateTranslateScaleAndRotateSequentially FAILED: View and Native transforms do not match. View: [1, 0, 0, 1, 100, 200]; Native: [1, 0, 0, 1, 0, 0]

They all occur in _getTransformMismatchErrorMessage I'm guessing on this line. Any idea what needs to be changed?

Lastly, unit tests don't pass for iOS on current master (5b647bd ATM), so therefore do not pass on rynop:master. Not sure how to proceed.

Here are failures, again iOS only:

TAB-VIEW.testSelectedIndexBecomesUndefinedWhenItemsSetToNull FAILED: null is not an object (evaluating 'items.length')
LISTVIEW.test_scrollToIndex_should_coerce_larger_index_to_last_item_index FAILED: last element is visible Actual: <false>(boolean). Expected: <true>(boolean)

vakrilov · 2019-11-27T08:28:25Z

Hey @rynop
The css warning is not the problem - it is expected.
I thing this is the reason for the failing travis:

ERROR in Detected 65 cycles which differs configured limit of 66.
Webpack compilation complete.
The command "node_modules/.bin/webpack --env.android" exited with 2.

Here is the related place in the code.

About the unit tests - they seem to be OK in master. About the failing ANIMATION tests - they might indicate a real problem. Maybe some of the transformation matrix calculations are not in tact.

rynop · 2019-11-27T15:49:05Z

Yup the CSS msg was my mistake, was not causing failure.

Re: your error - looks like you ran on Android. Did you try with my latest commits? I fixed test cases and everything passes on Android for me. This is further confirmed by continuous-integration/travis-ci/pr is now passing.

@PanayotCankov would you be able to provide some help here? I know its been 3 years since you touched this code but your the only active Github acct I can find that has modified this method...

One iOS unit test failure is preventing this PR from merge. This PR adds rotation around x and y axis - the existing rotation (around z axis) should be unchanged. The unit test errors are raised in _getTransformMismatchErrorMessage I'm guessing on this line. Any idea what needs to be changed? I'm having trouble figuring it out. New rotateX and rotateY properties were added., which I'm guessing is causing the problem, however I have no clue how to update _getTransformMismatchErrorMessage to accommodate these new props.

To save you some time re-producing here is a copy/paste:

git clone https://github.com/rynop/NativeScript.git ns-rynop-3d
cd ns-rynop-3d && npm run setup
cd tests/ && tns run ios

Will produce these errors:

ANIMATION.test_AnimatingProperties FAILED: View and Native transforms do not match. View: [-2, 2.4492935982947064e-16, -2.4492935982947064e-16, -2, 100, 100]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimatingMultipleViews FAILED: View and Native transforms do not match. View: [1, 0, 0, 1, 200, 200]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimateTranslate FAILED: View and Native transforms do not match. View: [1, 0, 0, 1, 100, 200]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimateScale FAILED: View and Native transforms do not match. View: [2, 0, 0, 3, 0, 0]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimateRotate FAILED: View and Native transforms do not match. View: [-0.54463903501502708, 0.83867056794542405, -0.83867056794542405, -0.54463903501502708, 0, 0]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimateTranslateScaleAndRotateSimultaneously FAILED: View and Native transforms do not match. View: [-1.0892780700300542, 1.6773411358908481, -2.5160117038362722, -1.6339171050450814, 100, 200]; Native: [1, 0, 0, 1, 0, 0]
ANIMATION.test_AnimateTranslateScaleAndRotateSequentially FAILED: View and Native transforms do not match. View: [1, 0, 0, 1, 100, 200]; Native: [1, 0, 0, 1, 0, 0]

You will also get TAB-VIEW.test* and LISTVIEW.test* errors but you can ignore, as they are occurring in upstream master and unrelated to this PR.

I think this function looks pretty cool - so any help to get it into NS is much appreciated :)

rynop · 2019-12-04T22:08:13Z

I debugged the 1st failing call stack on master and noticed something very strange. In both master and my branch the protected (read-only) value of the view after transformation is:

The test explicitly sets a non-zero translation:

    label.animate({
        opacity: 0.75,
        backgroundColor: new colorModule.Color("Red"),
        translate: { x: 100, y: 100 },
        scale: { x: 2, y: 2 },
        rotate: 180,
        duration: 5,
        delay: 10,
        iterations: 3,
        curve: enums.AnimationCurve.easeIn
    })

So I'm pretty confident the test case in master is invalid, and it should actually be what is being calculated for the current view (let viewTransform = NSStringFromCGAffineTransform(result);) in my branch (note 100,100 at the end): [-2, 2.4492935982947064e-16, -2.4492935982947064e-16, -2, 100, 100]. The value in master for viewTransform and nativeTransform is "[1, 0, 0, 1, 0, 0]" which I'm confident is wrong (x and y were translated 100,100).

My proposal is to remove _getTransformMismatchErrorMessage all together because it is a) not doing what it was intended to do (and never has) and b) I have no idea how to get the nativeViewProtected.transform value to reflect the state post transformation.

Thoughts?

FWIW this method is only called during animation tests and only on iOS. I've tested the functionality pretty thoroughly on both iOS and Android so I'm fairly confident there are no regressions here.

rynop · 2019-12-05T05:45:05Z

After much learning/testing/debugging/investigation I am highly confident that the iOS Affine Transform verification run during animation unit tests have been broken/invalid for a long time. My latest fix addresses this.

Unit tests now pass on android and ios.

@vakrilov or @manoldonev can you please consider merging? LMK if you wan't me to squash all commits into one or if they are useful for auditing (I'd lean to this as there are some commits not directly related to x,y rotation, but def needed)

rynop · 2019-12-06T15:49:46Z

I was wrong, upstream/master iOS Affine Transform verification is working. Sorry for all the churn here. When running tns debug ios --debug-brk the animations get cancelled sometimes, which screws up the native transformation values.

For a reason I can not figure out, view.nativeViewProtected.transform is always [1, 0, 0, 1, 0, 0] (string representation) in my fork on iOS.

My hunch is the introduction of _createGroupAnimation() and _createBasicAnimation()

vakrilov · 2019-12-06T20:21:48Z

Hey @rynop - sorry for the silence last few days - we've been preparing the 6.3 release.
I'll try to spend a couple of cycles on the transformations and the failing tests. Hopefully, we can figure it out.

rynop · 2019-12-06T21:52:37Z

No worries. I just backed out some changes in my last commit. Thanks.

* feat(css): Added optional css-tree parser * test: css-tree parser compat tests * test: more css-tree compat tests

…ativeScript#8041) * Added iOS specific height and width attributes to ShowModalOptions * Set the height and width of the popup dialog to the presenting controller * dialog options ios attributes presentationStyle, height & width are made optional * Updated NativeScript.api.md for public API changes * Update with git properties * Public API * CLA update

vakrilov · 2020-01-06T16:23:03Z

Hey @rynop
Finally found the time to look into the failing tests - they should be green now.
There were two problems:

In the PR the transformations are set on this.ios.layer.transform instead of this.ios.transform, but in the tests we were still checking for transformations of the view directly.
There was a code that was setting the m34 field of CATransform3DIdentity. Turns out that you can do that and you get no error as this is just a struct. However, identity is not ... identical after that and you get an extra hour of debugging tests as a reward :)

rynop · 2020-01-06T19:37:24Z

Thanks for your help - I never would have figured this out.

Whats next to get this PR merged? Blocked on review request, but I don't have perms to request review. That something you request?

vakrilov · 2020-01-07T14:45:09Z

test

vakrilov · 2020-01-07T14:47:18Z

I have triggered the CI builds.
I think there is much to be done with this feature in terms of comply-ing with the CSS spec more accurately. However, I think it would be better to include it in the next minor and just extend the functionality per requests, instead of holding it back more.

vakrilov · 2020-01-08T12:55:11Z

test

dtopuzov · 2020-01-08T13:08:58Z

test animations

vakrilov · 2020-01-09T08:03:06Z

Hey @rynop
The CI test caught one problem with the animations on IOS. It's fairly easy to reproduce in the e2e/animations project:

Go to slide-in-effect page
Click Add item.
The items should slide into place as we animate translateX from -300 to 0. However it seem that they fly-out as if we actually animate from 0 to 300. My initial guess is that something related to the transformations applied to the view by default, but I need some more time to debug it properly.

Apart from that, everything looks green. The plan is to fix this issue and merge.

rynop · 2020-01-09T14:22:25Z

@vakrilov thanks for all the TLC with this. I started a new job so don't have the time ATM to spend on it, so I appreciate you taking it to the finish line like this.

vakrilov · 2020-01-10T06:52:26Z

test animations

dtopuzov · 2020-01-10T08:53:46Z

test animations

cla-bot bot added the cla: yes label Nov 25, 2019

rynop commented Nov 25, 2019

View reviewed changes

rynop mentioned this pull request Nov 25, 2019

Add 3d rotation to View #5950

Closed

5 tasks

rynop and others added 6 commits December 4, 2019 22:42

feat: add 3d rotation

a925167

chore: fix build errors

e250836

chore: fix tslint errors

2a5b170

chore: add @types/chai dev dep

fb444d6

chore: unused import cleanup

5b2e9ce

chore: update tests for x,y rotation

170ef2c

rynop force-pushed the master branch from 6da8c51 to 170ef2c Compare December 5, 2019 04:55

chore: rebase upstream/master

75ded6d

fix: iOS Affine Transform test verification

bcf0def

rynop force-pushed the master branch from 3168816 to bcf0def Compare December 5, 2019 05:58

rynop changed the title ~~Ad 3D rotation to view - takeover of PR# 5950~~ feat: Ad 3D rotation to view - takeover of PR# 5950 Dec 5, 2019

darind and others added 3 commits December 6, 2019 15:53

feat(css): Added optional css-tree parser (NativeScript#8076)

edb7fed

* feat(css): Added optional css-tree parser * test: css-tree parser compat tests * test: more css-tree compat tests

fix: use iOS native-helper for 3d-rotate

3faf9d5

rynop force-pushed the master branch from 81ad30f to 3faf9d5 Compare December 6, 2019 21:53

Alexander Vakrilov added 2 commits January 6, 2020 15:15

Merge branch 'master' into master

f09cedb

test: Fix tests using _getTransformMismatchError

08be269

vakrilov self-requested a review January 7, 2020 14:57

Merge branch 'master' into master

100b0da

vakrilov approved these changes Jan 8, 2020

View reviewed changes

Merge branch 'master' into master

32fa226

vakrilov closed this Jan 9, 2020

vakrilov reopened this Jan 9, 2020

vakrilov added 2 commits January 9, 2020 16:32

fix: view.__hasTransfrom not set updating properly

db92533

test: fix css-animations test page

5e9e012

vakrilov force-pushed the master branch from 17ba572 to 5e9e012 Compare January 9, 2020 14:50

Merge branch 'master' into master

b3ee8df

Merge branch 'master' into master

b3a0338

vakrilov merged commit e8f5ac8 into NativeScript:master Jan 10, 2020

snyk-bot mentioned this pull request Feb 26, 2020

[Snyk] Upgrade tns-core-modules from 6.3.2 to 6.4.0 raphagoo/runningManApplication#6

Closed

This was referenced Apr 9, 2020

[Snyk] Upgrade tns-core-modules from 6.4.0 to 6.5.0 SchoolSquirrel/nativescript-plugins#35

Merged

[Snyk] Upgrade tns-core-modules from 6.4.0 to 6.5.0 SchoolSquirrel/nativescript-plugins#36

Merged

Uh oh!

feat: Add 3D rotation to view - takeover of PR# 5950 #8136

feat: Add 3D rotation to view - takeover of PR# 5950 #8136

Uh oh!

Conversation

rynop commented Nov 25, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

What is the current behavior?

What is the new behavior?

I need HELP with the following

Uh oh!

rynop commented Nov 25, 2019

Uh oh!

rynop Nov 25, 2019

Choose a reason for hiding this comment

Uh oh!

rynop Nov 25, 2019

Choose a reason for hiding this comment

Uh oh!

vakrilov commented Nov 26, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rynop commented Nov 26, 2019

Uh oh!

rynop commented Nov 26, 2019

Uh oh!

vakrilov commented Nov 27, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rynop commented Nov 27, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rynop commented Dec 4, 2019

Uh oh!

rynop commented Dec 5, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rynop commented Dec 6, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vakrilov commented Dec 6, 2019

Uh oh!

rynop commented Dec 6, 2019

Uh oh!

vakrilov commented Jan 6, 2020

Uh oh!

rynop commented Jan 6, 2020

Uh oh!

vakrilov commented Jan 7, 2020

Uh oh!

vakrilov commented Jan 7, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vakrilov commented Jan 8, 2020

Uh oh!

dtopuzov commented Jan 8, 2020

Uh oh!

vakrilov commented Jan 9, 2020

Uh oh!

rynop commented Jan 9, 2020

Uh oh!

vakrilov commented Jan 10, 2020

Uh oh!

dtopuzov commented Jan 10, 2020

Uh oh!

Uh oh!

rynop commented Nov 25, 2019 •

edited

Loading

vakrilov commented Nov 26, 2019 •

edited

Loading

vakrilov commented Nov 27, 2019 •

edited

Loading

rynop commented Nov 27, 2019 •

edited

Loading

rynop commented Dec 5, 2019 •

edited

Loading

rynop commented Dec 6, 2019 •

edited

Loading

vakrilov commented Jan 7, 2020 •

edited

Loading