NativeScript · hamdiwanis · Jun 13, 2018 · Jun 13, 2018 · Jun 14, 2018 · Jun 18, 2018
diff --git a/e2e/animation/app/3d-rotate/page.ts b/e2e/animation/app/3d-rotate/page.ts
@@ -0,0 +1,39 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Point3D } from "tns-core-modules/ui/animation/animation";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimateX(args: EventData) {
+    rotate({ x: 360, y: 0, z: 0 });
+}
+
+export function onAnimateY(args: EventData) {
+    rotate({ x: 0, y: 360, z: 0 });
+}
+
+export function onAnimateZ(args: EventData) {
+    rotate({ x: 0, y: 0, z: 360 });
+}
+
+export function onAnimateXYZ(args: EventData) {
+    rotate({ x: 360, y: 360, z: 360 });
+}
+
+function rotate(rotate: Point3D) {
+    view.animate({
+        rotate,
+        duration: 1000
+    }).then(reset);
+}
+
+function reset() {
+    view.rotate = 0;
+    view.rotateX = 0;
+    view.rotateY = 0;
+}
diff --git a/e2e/animation/app/3d-rotate/page.xml b/e2e/animation/app/3d-rotate/page.xml
@@ -0,0 +1,24 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+  <ActionBar title="Rotate" />
+
+  <GridLayout rows="auto auto auto auto *" columns="* * *">
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="0" row="0" rotateX="60"/>
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="1" row="0" rotateY="60"/>
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="2" row="0" rotate="60"/>
+
+    <Button text="X" tap="onAnimateX" col="0" row="1"/>
+    <Button text="Y" tap="onAnimateY" col="1" row="1"/>
+    <Button text="Z" tap="onAnimateZ" col="2" row="1"/>
+
+    <Image src="~/res/icon_100x100.png" width="60" height="60" horizontalAlignment="center"
+           colSpan="3" row="2" rotate="60" rotateX="60" rotateY="60"/>
+
+    <Button text="XYZ" tap="onAnimateXYZ" row="3" colSpan="3"/>
+
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray" row="4" colSpan="3">
+      <Image id="view" src="~/res/icon_100x100.png" 
+          width="100" height="100" 
+          left="100" top="100"/>
+    </AbsoluteLayout>
+  </GridLayout>
+</Page>
diff --git a/e2e/animation/app/app.ts b/e2e/animation/app/app.ts
@@ -1,3 +1,7 @@
 import * as application from "tns-core-modules/application";
 
+import { enable, setCategories, categories } from "tns-core-modules/trace"
+setCategories(categories.Animation);
+enable();
+
 application.run({ moduleName: "app-root" });
diff --git a/e2e/animation/app/css-animations/3d-rotate/page.css b/e2e/animation/app/css-animations/3d-rotate/page.css
@@ -0,0 +1,75 @@
+.rotate-x {
+    rotateX: 60;
+}
+
+.rotate-y {
+    rotateY: 60;
+}
+
+.rotate-z {
+    rotate: 60;
+}
+
+.original {
+    transform: none;
+}
+
+.animate-x {
+    animation-name: rotateX;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+.animate-y {
+    animation-name: rotateY;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+.animate-z {
+    animation-name: rotateZ;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+.animate-xyz-3d {
+    animation-name: rotateXYZ3D;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+.animate-xyz {
+    animation-name: rotateXYZ;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes rotateX {
+    from { transform: none; }
+    50%  { transform: rotateX(60) }
+    to  { transform: none; }
+}
+
+@keyframes rotateY {
+    from { transform: none; }
+    50%  { transform: rotateY(60) }
+    to  { transform: none; }
+}
+
+@keyframes rotateZ {
+    from { transform: none; }
+    50%  { transform: rotate(60) }
+    to  { transform: none; }
+}
+
+@keyframes rotateXYZ3D {
+    from { transform: none; }
+    50%  { transform: rotate3d(60, 60, 60) }
+    to  { transform: none; }
+}
+
+@keyframes rotateXYZ {
+    from { transform: none; }
+    50%  { transform: rotateX(60) rotateY(60) rotate(60) }
+    to  { transform: none; }
+}
diff --git a/e2e/animation/app/css-animations/3d-rotate/page.ts b/e2e/animation/app/css-animations/3d-rotate/page.ts
@@ -0,0 +1,35 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Point3D } from "tns-core-modules/ui/animation/animation";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimateX(args: EventData) {
+    view.className = "original";
+    view.className = "animate-x";
+}
+
+export function onAnimateY(args: EventData) {
+    view.className = "original";
+    view.className = "animate-y";
+}
+
+export function onAnimateZ(args: EventData) {
+    view.className = "original";
+    view.className = "animate-z";
+}
+
+export function onAnimateXYZ3D(args: EventData) {
+    view.className = "original";
+    view.className = "animate-xyz-3d";
+}
+
+export function onAnimateXYZ(args: EventData) {
+    view.className = "original";
+    view.className = "animate-xyz";
+}
diff --git a/e2e/animation/app/css-animations/3d-rotate/page.xml b/e2e/animation/app/css-animations/3d-rotate/page.xml
@@ -0,0 +1,22 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+  <ActionBar title="Rotate" />
+
+  <GridLayout rows="auto auto auto *" columns="* * *">
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="0" row="0" class="rotate-x"/>
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="1" row="0" class="rotate-y"/>
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="2" row="0" class="rotate-z"/>
+
+    <Button text="X" tap="onAnimateX" col="0" row="1"/>
+    <Button text="Y" tap="onAnimateY" col="1" row="1"/>
+    <Button text="Z" tap="onAnimateZ" col="2" row="1"/>
+
+    <Button text="XYZ" tap="onAnimateXYZ" row="2" col="0"/>
+    <Button text="XYZ-3D" tap="onAnimateXYZ3D" row="2" col="1"/>
+
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray" row="3" colSpan="3">
+      <Image id="view" src="~/res/icon_100x100.png" 
+          width="100" height="100" 
+          left="100" top="100" />
+    </AbsoluteLayout>
+  </GridLayout>
+</Page>
diff --git a/e2e/animation/app/css-animations/page.xml b/e2e/animation/app/css-animations/page.xml
@@ -13,6 +13,7 @@
       <Button text="settings" tap="onButtonTap"/>
       <Button text="visual-states" tap="onButtonTap"/>
       <Button text="initial-animation" tap="onButtonTap"/>
+      <Button text="3d-rotate" tap="onButtonTap"/>
     </StackLayout>
   </ScrollView>
 </Page>
diff --git a/e2e/animation/app/home/home-page.xml b/e2e/animation/app/home/home-page.xml
@@ -19,6 +19,7 @@
             <Button text="infinite" tap="onButtonTap" />
             <Button text="animation-curves" tap="onButtonTap" />
             <Button text="css-animations" tap="onButtonTap" /> 
+            <Button text="3d-rotate" tap="onButtonTap" /> 
         </StackLayout>
     </ScrollView>
 

diff --git a/tns-core-modules/matrix/matrix.ts b/tns-core-modules/matrix/matrix.ts
@@ -2,26 +2,30 @@ import { TransformFunctionsInfo } from "../ui/animation/animation";
 
 import { radiansToDegrees, degreesToRadians } from "../utils/number-utils";
 
-export const getTransformMatrix = ({property, value}) =>
+// TODO: Handle rotation over X and Y axis.
+export const getTransformMatrix = ({ property, value }) =>
     TRANSFORM_MATRIXES[property](value);
 
 const TRANSFORM_MATRIXES = {
-    "scale": ({x, y}) => [
+    "scale": ({ x, y }) => [
         x, 0, 0,
         0, y, 0,
         0, 0, 1,
     ],
-    "translate": ({x, y}) => [
+    "translate": ({ x, y }) => [
         1, 0, x,
         0, 1, y,
         0, 0, 1,
     ],
-    "rotate": angleInDeg => {
-        const angleInRad = degreesToRadians(angleInDeg);
+    "rotate": ({ x, y, z}) => {
+        // TODO: Handle rotations over X and Y axis
+        const radZ = degreesToRadians(z);
+        const cosZ = Math.cos(radZ);
+        const sinZ = Math.sin(radZ);
 
         return [
-            Math.cos(angleInRad), -Math.sin(angleInRad), 0,
-            Math.sin(angleInRad), Math.cos(angleInRad), 0,
+            cosZ, -sinZ, 0,
+            sinZ, cosZ, 0,
             0, 0, 1,
         ]
     },
@@ -43,6 +47,7 @@ export function multiplyAffine2d(m1: number[], m2: number[]): number[] {
     ]
 }
 
+// TODO: Decompose rotations over X and Y axis
 export function decompose2DTransformMatrix(matrix: number[])
     : TransformFunctionsInfo {
 
@@ -52,7 +57,7 @@ export function decompose2DTransformMatrix(matrix: number[])
     const determinant = A * D - B * C;
     const translate = { x: E || 0, y: F || 0 };
 
-    // rewrite with obj desctructuring using the identity matrix
+    // rewrite with obj destructuring using the identity matrix
     let rotate = 0;
     let scale = { x: 1, y: 1 };
     if (A || B) {
@@ -62,12 +67,12 @@ export function decompose2DTransformMatrix(matrix: number[])
     } else if (C || D) {
         const R = Math.sqrt(C * C + D * D);
         rotate = Math.PI / 2 - (D > 0 ? Math.acos(-C / R) : -Math.acos(C / R));
-        scale = { x: determinant / R, y: R  };
+        scale = { x: determinant / R, y: R };
     }
 
     rotate = radiansToDegrees(rotate);
 
-    return { translate, rotate, scale };
+    return { translate, rotate: { x: 0, y: 0, z: rotate }, scale };
 }
 
 function verifyTransformMatrix(matrix: number[]) {

diff --git a/tns-core-modules/ui/animation/animation-common.ts b/tns-core-modules/ui/animation/animation-common.ts
@@ -4,7 +4,8 @@ import {
     AnimationPromise as AnimationPromiseDefinition,
     Animation as AnimationBaseDefinition,
     AnimationDefinition,
-    Pair
+    Pair,
+    Point3D
 } from ".";
 import { View } from "../core/view";
 
@@ -87,7 +88,7 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
     protected _rejectAlreadyPlaying(): AnimationPromiseDefinition {
         const reason = "Animation is already playing.";
         traceWrite(reason, traceCategories.Animation, traceType.warn);
-        
+
         return <AnimationPromiseDefinition>new Promise<void>((resolve, reject) => {
             reject(reason);
         });
@@ -151,21 +152,33 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
         }
 
         for (let item in animationDefinition) {
-            if (animationDefinition[item] === undefined) {
+            const value = animationDefinition[item];
+            if (value === undefined) {
                 continue;
             }
 
-            if ((item === Properties.opacity ||
-                item === Properties.rotate ||
+            if (item === Properties.opacity ||
                 item === "duration" ||
                 item === "delay" ||
-                item === "iterations") && typeof animationDefinition[item] !== "number") {
-                throw new Error(`Property ${item} must be valid number. Value: ${animationDefinition[item]}`);
-            } else if ((item === Properties.scale || item === Properties.translate) &&
-                (typeof (<Pair>animationDefinition[item]).x !== "number" || typeof (<Pair>animationDefinition[item]).y !== "number")) {
-                throw new Error(`Property ${item} must be valid Pair. Value: ${animationDefinition[item]}`);
+                item === "iterations") {
+
+                if (typeof value !== "number") {
+                    throw new Error(`Property ${item} must be valid number. Value: ${value}`);
+                }
+
+            } else if (item === Properties.scale || item === Properties.translate) {
+                const pair = <Pair>value;
+                if (typeof pair.x !== "number" || typeof pair.y !== "number") {
+                    throw new Error(`Property ${item} must be valid Pair. Value: ${value}`);
+                }
             } else if (item === Properties.backgroundColor && !Color.isValid(animationDefinition.backgroundColor)) {
-                throw new Error(`Property ${item} must be valid color. Value: ${animationDefinition[item]}`);
+                throw new Error(`Property ${item} must be valid color. Value: ${value}`);
+            } else if (item === Properties.rotate) {
+                const rotate: number | Point3D = value;
+                if ((typeof rotate !== "number") &&
+                    !(typeof rotate.x === "number" && typeof rotate.y === "number" && typeof rotate.z === "number")) {
+                    throw new Error(`Property ${rotate} must be valid number or Point3D. Value: ${value}`);
+                }
             }
         }
 
@@ -226,10 +239,18 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
 
         // rotate
         if (animationDefinition.rotate !== undefined) {
+            // Make sure the value of the rotation property is always Point3D
+            let rotationValue: Point3D;
+            if (typeof animationDefinition.rotate === "number") {
+                rotationValue = { x: 0, y: 0, z: animationDefinition.rotate }
+            } else {
+                rotationValue = animationDefinition.rotate;
+            }
+
             propertyAnimations.push({
                 target: animationDefinition.target,
                 property: Properties.rotate,
-                value: animationDefinition.rotate,
+                value: rotationValue,
                 duration: animationDefinition.duration,
                 delay: animationDefinition.delay,
                 iterations: animationDefinition.iterations,