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.

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.

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.

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)

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.

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 :)

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.

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)

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()

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.

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

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 :)

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?

test

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.

test

test animations

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.

@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.

test animations

test animations