-- cgit v1.2.3 From 675dfa5057e118dac694b8fb9b960cfed48e1d52 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 11 May 2012 00:51:17 -0700 Subject: allow splitting existing spans with new keyframe Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') 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, { draw:{ value:function(){ - console.log(this.trackType); + } }, -- cgit v1.2.3 From 32257ac142f872d3c1f6c07504bae77ae884ed93 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 11 May 2012 02:34:26 -0700 Subject: Fix a bug in span splitting interaction and remove console logs Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 53b7bd5e..690c912b 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -154,7 +154,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { handleClick:{ value:function(ev){ if (ev.shiftKey) { - console.log(this.trackType); + if (this.propTweens.length < 1) { // check if there is an editor property assigned yet @@ -170,8 +170,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { console.log("Property track editorProperty set to: " + this.trackEditorProperty); } } else if (this.trackType === "position") { - console.log("clicking on position track"); - console.log(this.trackEditorProperty); + //console.log("clicking on position track"); + //console.log(this.trackEditorProperty); } this.insertPropTween(0); @@ -239,7 +239,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:function(tweenEvent){ this.insertPropTween(tweenEvent.offsetX); this.animationName = this.parentComponent.parentComponent.parentComponent.animationName; - console.log(this.animationName); + //console.log(this.animationName); } } }); -- cgit v1.2.3 From eb7c3c8db304bdfb01f747a50e932665d9ec03fa Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 22:09:35 -0700 Subject: style keyframe rule addition Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 51 +++++++++++++++++++--- 1 file changed, 44 insertions(+), 7 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 690c912b..f44afcec 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -18,7 +18,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.element.addEventListener("click", this, false); this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; - + this.ninjaStylesContoller = this.application.ninja.stylesController; } }, @@ -89,6 +89,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:1 }, + ninjaStylesContoller:{ + value:null + }, + + animationName:{ + value:null + }, + + currentKeyframeRule:{ + value:null + }, + _trackID:{ value:null }, @@ -167,11 +179,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { return; } else { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; - console.log("Property track editorProperty set to: " + this.trackEditorProperty); + //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } } else if (this.trackType === "position") { - //console.log("clicking on position track"); - //console.log(this.trackEditorProperty); + console.log("Property track editorProperty set to: " + this.trackEditorProperty); } this.insertPropTween(0); @@ -219,7 +230,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween.tweenData.tweenID = this.nextKeyframe; newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; newTween.tweenData.tweenedProperties = []; - + newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.push(newTween); this.nextKeyframe += 1; @@ -237,9 +248,35 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ + var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; + + + this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; + var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; + var newAnimationNames = currentAnimationNameString + "," + this.animationName; + var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; + var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); + var newIterationCount = currentIterationCount + ",1"; + + this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; + + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); + + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); + //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); + //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); + + + console.log(currentStyleValue); + + var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; + console.log(initRule); + this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); + this.insertPropTween(tweenEvent.offsetX); - this.animationName = this.parentComponent.parentComponent.parentComponent.animationName; - //console.log(this.animationName); } } }); -- cgit v1.2.3 From b38e020fb5e64c7d9a1d42c97393a0a84f9841a8 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 22:30:27 -0700 Subject: handle style changes on keyframes Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 31 +++++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index f44afcec..03287df9 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -101,6 +101,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:null }, + trackDuration:{ + value:0 + }, + _trackID:{ value:null }, @@ -209,6 +213,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; + this.trackDuration = currentMillisec; var newTween = {}; newTween.tweenData = {}; @@ -242,7 +247,28 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { updatePropKeyframeRule:{ value:function(){ - + // delete the current rule + this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); + + // build the new keyframe string + var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; + + for (var i = 0; i < this.propTweens.length; i++) { + var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); + // TODO - trackDur should be parseFloat rounded to significant digits + var trackDur = parseInt(this.trackDuration); + var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; + var keyframePropertyString = " " + keyframePercent + " {"; + for(var prop in this.propTweens[i].tweenData.tweenedProperties){ + keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop]; + } + keyframePropertyString += "}"; + keyframeString += keyframePropertyString; + } + keyframeString += " }"; + // set the keyframe string as the new rule + this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); + this.application.ninja.documentController.activeDocument.needsSave = true; } }, @@ -269,9 +295,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); - - console.log(currentStyleValue); - var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; console.log(initRule); this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); -- cgit v1.2.3 From 13ebb58be961e92ba7c109298ef73daa7dea79c7 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 23:08:24 -0700 Subject: fix keyframe bug when adding keyframes to sub properties Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 03287df9..8d2c1918 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -291,12 +291,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); - this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); + //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; - console.log(initRule); + //console.log(initRule); this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.insertPropTween(tweenEvent.offsetX); -- cgit v1.2.3 From 4438dae53bb528d94b9f21272f7c240dd546b0a8 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 23:51:34 -0700 Subject: handle more prop types in subgroup keyframe rules Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 8d2c1918..43370a64 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -225,6 +225,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween.tweenData.tweenID = 0; newTween.tweenData.spanPosition = 0; newTween.tweenData.tweenedProperties = []; + newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.push(newTween); @@ -290,7 +291,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); - this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); + //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); -- cgit v1.2.3 From 847276c1e62d55c10d059683e7180635aa994890 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 00:47:52 -0700 Subject: support width and height tween prop on re-opening saved doc Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 43370a64..31e0b3b6 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -246,6 +246,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + retrieveStoredStyleTweens:{ + value:function(){ + + } + }, + updatePropKeyframeRule:{ value:function(){ // delete the current rule @@ -278,14 +284,13 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; - this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; var newAnimationNames = currentAnimationNameString + "," + this.animationName; - var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; - var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); - var newIterationCount = currentIterationCount + ",1"; + //var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + //var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; + //var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); + //var newIterationCount = currentIterationCount + ",1"; this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; -- cgit v1.2.3 From b7adc6f1ec09edcad523b1ddd32856ddf27c6724 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 10:02:26 -0700 Subject: remove console logs. add retrieve tweens method for prop tracks Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 31e0b3b6..b3a31bf2 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -28,6 +28,21 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + didDraw:{ + value:function () { + if ((!this.application.ninja.documentController.creatingNewFile) || (!this.application.ninja.currentDocument.setLevel)) { + if (this.application.ninja.currentDocument.documentRoot.children[0]) { + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + if (selectedIndex !== false) { + if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { + //this.retrieveStoredStyleTweens(); + } + } + } + } + } + }, + trackEditorProperty:{ value:"" }, @@ -248,7 +263,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { retrieveStoredStyleTweens:{ value:function(){ - + console.log("retrieve style tweens"); } }, -- cgit v1.2.3 From e9995c973acadc507b802fdefdb22b4c4bf82325 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 11:27:51 -0700 Subject: fix keyframe splitting Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index b3a31bf2..f2004b94 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -201,7 +201,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } } else if (this.trackType === "position") { - console.log("Property track editorProperty set to: " + this.trackEditorProperty); + //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } this.insertPropTween(0); @@ -217,7 +217,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { handleNewPropTween:{ value:function(ev){ - this.insertPropTween(ev.offsetX); + if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { + this.insertPropTween(ev.offsetX); + } else { + console.log("spitting sub keyframes not yet supported"); + } + } }, -- cgit v1.2.3 From 9bc43e9f815dc8c2eda3a3d3413f950481c5f86d Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 08:01:39 -0700 Subject: CSS pixel fix for prop tracks Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 1 - js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css | 2 +- js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index f2004b94..8fe87500 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -222,7 +222,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } else { console.log("spitting sub keyframes not yet supported"); } - } }, diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css index ddcc536e..5d71e2e7 100644 --- a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css +++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css @@ -8,7 +8,7 @@ */ /* line 19, ../scss/PropertyTrack.scss */ .content-main .collapsible-content .timeline-track { - height: 20px; + height: 18px; padding-top: 2px; border-bottom: 1px solid #505050; background-image: url("../images/gridline.jpg"); diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss index 31aed851..a560ff3c 100644 --- a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss +++ b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss @@ -17,7 +17,7 @@ .content-main .collapsible-content .timeline-track { - height: 20px; + height: 18px; padding-top: 2px; border-bottom: 1px solid $color-menu-divider; background-image: url("../images/gridline.jpg"); -- cgit v1.2.3 From e5830f3424c7db84f0e76b237616cbf59fe9ed1c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 08:58:03 -0700 Subject: Remove span highlighting and start syncing pos tracks and main track keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 8fe87500..a8adbf04 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -183,16 +183,20 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { }, handleClick:{ - value:function(ev){ + value:function (ev) { if (ev.shiftKey) { + if (this.trackType == "position") { + this.parentComponent.parentComponent.parentComponent.handleNewTween(ev); + } + if (this.propTweens.length < 1) { // check if there is an editor property assigned yet // get this property track's editor prop name from layer data arrays var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - if (this.trackType === "style") { + if (this.trackType == "style") { if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { console.log("Please enter a style property for this track before adding keyframes."); return; @@ -200,7 +204,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } - } else if (this.trackType === "position") { + } else if (this.trackType == "position") { //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } @@ -220,7 +224,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { - console.log("spitting sub keyframes not yet supported"); + console.log("Splitting style tweens not yet supported."); } } }, -- cgit v1.2.3 From a5e3eb0cec55858cf911bffc429ce1de817a60ef Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 11:20:13 -0700 Subject: methods for setting simple ease and splitting sub prop spans Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 39 ++++++++++++++++++++++ 1 file changed, 39 insertions(+) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index a8adbf04..fbc3edd0 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -269,6 +269,45 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + splitPropTween:{ + value:function (ev) { + console.log("splitting sub prop tween with new keyframe"); + var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; + var i; + var tweensLength = this.propTweens.length - 1; + var prevTween, nextTween, splitTweenIndex; + for (i = 0; i < tweensLength; i++) { + prevTween = this.propTweens[i].tweenData.keyFramePosition; + nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; + if (clickPos > prevTween && clickPos < nextTween) { + //console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID); + splitTweenIndex = this.propTweens[i + 1].tweenData.tweenID; + this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - clickPos; + this.propTweens[i + 1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX; + if (ev.target.className != "tween-span") { + // don't set styles on timeline track if event is coming from the track + } else { + ev.target.style.width = this.propTweens[i + 1].tweenData.spanWidth + "px"; + ev.target.parentElement.style.left = clickPos + "px"; + ev.target.parentElement.children[1].style.left = (this.propTweens[i + 1].tweenData.spanWidth - 3) + "px"; + } + var newTweenToInsert = {}; + newTweenToInsert.tweenData = {}; + newTweenToInsert.tweenData.spanWidth = clickPos - prevTween; + newTweenToInsert.tweenData.keyFramePosition = clickPos; + newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos; + newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1; + newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth; + newTweenToInsert.tweenData.tweenedProperties = []; + newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); + break; + } + } + this.application.ninja.documentController.activeDocument.needsSave = true; + } + }, + retrieveStoredStyleTweens:{ value:function(){ console.log("retrieve style tweens"); -- cgit v1.2.3 From 517661250fb478f460df3f57f4654bf85723ea2a Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 29 May 2012 11:32:04 -0700 Subject: fix to set default prop for tween Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index fbc3edd0..af58199a 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -344,27 +344,31 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + if (currentStyleValue == null) { + currentStyleValue = "1px"; + } + console.log(currentStyleValue); + this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; + this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; var newAnimationNames = currentAnimationNameString + "," + this.animationName; - //var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - //var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; - //var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); - //var newIterationCount = currentIterationCount + ",1"; + var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; + var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); + var newIterationCount = currentIterationCount + ",1"; this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); var initRule = "@-webkit-keyframes " + this.animationName + " {