FIx 3D animation workflow

Can now add 3D to any keyframe and all the tween will initialize their 3D identity matrices

Signed-off-by: Jonathan Duran <jduran@motorola.com>

2 files changed, 30 insertions, 0 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index f3ab0d84..56e5d2f1 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -354,6 +354,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+    _enabled3D:{
+        value:false
+    },
+    enabled3D:{
+        serializable:true,
+        get:function () {
+            return this._enabled3D;
+        },
+        set:function (val) {
+            this._enabled3D = val;
+            this.trackData.enabled3D = val;
+        }
+    },
+
     _ruleList:{
         value:[]
     },
@@ -495,6 +509,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.trackPosition = this.trackData.trackPosition;
             this.isVisible = this.trackData.isVisible;
             this.stageElement = this.trackData.stageElement;
+            this.enabled3D = this.trackData.enabled3D;
             this.trackEditorProperty = "master";
             this.needsDraw = true;
         }
@@ -1087,6 +1102,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+    initial3DforAllTweens:{
+        value:function(){
+            var j;
+            var tweensLength = this.tweens.length;
+            for (j = 0; j < tweensLength; j++) {
+                this.tweens[j].tweenData.tweenedProperties["-webkit-transform"] = "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)";
+            }
+            this.enabled3D = true;
+        }
+    },
+
     addAnimationRuleToElement:{
         value:function (tweenEvent) {
             this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 0f567fbd..e3f9e71a 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -299,6 +299,10 @@ var Tween = exports.Tween = Montage.create(Component, {
                     this.parentComponent.parentComponent.updateKeyframeRule();
                     this.isTweenAnimated = true;
                 }
+
+            if(!this.parentComponent.parentComponent.enabled3D){
+                this.parentComponent.parentComponent.initial3DforAllTweens();
+            }
                         
                         if (eventDetail.source === "translateTool" || eventDetail.source === "rotateTool") {
                         var arrMat = eventDetail.data.value[0].properties.mat,