aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJonathan Duran2012-05-11 00:51:17 -0700
committerJonathan Duran2012-05-11 00:51:17 -0700
commit675dfa5057e118dac694b8fb9b960cfed48e1d52 (patch)
tree9c436fef53191edc753c129d27409bc589ffe36a
parent48a0d3a091602d4d04b0b529b780261f0d2ebc1d (diff)
downloadninja-675dfa5057e118dac694b8fb9b960cfed48e1d52.tar.gz
allow splitting existing spans with new keyframe
Signed-off-by: Jonathan Duran <jduran@motorola.com>
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js1
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js2
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js39
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js6
4 files changed, 37 insertions, 11 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index f7259d29..e5fa71d3 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -67,6 +67,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
67 handleClick:{ 67 handleClick:{
68 value:function(ev){ 68 value:function(ev){
69 this.selectKeyframe(); 69 this.selectKeyframe();
70 ev.stopPropagation();
70 } 71 }
71 }, 72 },
72 73
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 4f798f36..53b7bd5e 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -24,7 +24,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
24 24
25 draw:{ 25 draw:{
26 value:function(){ 26 value:function(){
27 console.log(this.trackType); 27
28 } 28 }
29 }, 29 },
30 30
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index a1b1ce74..35440cc4 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -671,7 +671,40 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
671 671
672 splitTween:{ 672 splitTween:{
673 value:function (ev) { 673 value:function (ev) {
674 console.log("Splitting an existing span with a new keyframe is not yet supported."); 674 console.log("Splitting an existing span with a new keyframe.");
675 var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX;
676 var i;
677 var tweensLength = this.tweens.length-1;
678 var prevTween, nextTween, splitTweenIndex;
679 for(i=0; i<tweensLength; i++){
680 prevTween = this.tweens[i].tweenData.keyFramePosition;
681 nextTween = this.tweens[i+1].tweenData.keyFramePosition;
682 if(clickPos > prevTween && clickPos < nextTween){
683 console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID);
684 splitTweenIndex = this.tweens[i+1].tweenData.tweenID;
685 this.tweens[i+1].tweenData.spanWidth = this.tweens[i+1].tweenData.keyFramePosition - clickPos;
686 this.tweens[i+1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX;
687 ev.target.style.width = this.tweens[i+1].tweenData.spanWidth + "px";
688 ev.target.parentElement.style.left = clickPos + "px";
689 ev.target.parentElement.children[1].style.left = (this.tweens[i+1].tweenData.spanWidth - 3) + "px";
690
691 var newTweenToInsert = {};
692 newTweenToInsert.tweenData = {};
693 newTweenToInsert.tweenData.spanWidth = clickPos - prevTween;
694 newTweenToInsert.tweenData.keyFramePosition = clickPos;
695 newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos;
696 newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1;
697 newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth;
698 newTweenToInsert.tweenData.tweenedProperties = [];
699 newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
700 newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
701 newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth;
702 newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight;
703 this.tweens.splice(splitTweenIndex, 0, newTweenToInsert);
704 }
705 }
706
707 this.application.ninja.documentController.activeDocument.needsSave = true;
675 } 708 }
676 }, 709 },
677 710
@@ -746,7 +779,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
746 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; 779 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
747 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; 780 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
748 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 781 var animationDuration = Math.round(this.trackDuration / 1000) + "s";
749 this.animationName = "animation_" + this.animatedElement.classList[0]; 782 this.animationName = this.animatedElement.classList[0] + "_PositionSize";
750 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); 783 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
751 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 784 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
752 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); 785 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1);
@@ -766,8 +799,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
766 // delete the current rule 799 // delete the current rule
767 this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); 800 this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule);
768 801
769 // first combine all style track tween arrays with the main track tween array
770
771 // build the new keyframe string 802 // build the new keyframe string
772 var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; 803 var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
773 804
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 6c273a49..48b41023 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -216,12 +216,6 @@ var Tween = exports.Tween = Montage.create(Component, {
216 this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; 216 this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight;
217 } 217 }
218 218
219 // skewX
220
221 // skewY
222
223 // rotation
224
225 // tell track to update css rule 219 // tell track to update css rule
226 this.parentComponent.parentComponent.updateKeyframeRule(); 220 this.parentComponent.parentComponent.updateKeyframeRule();
227 221