aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorJonathan Duran2012-05-14 22:30:27 -0700
committerJonathan Duran2012-05-14 22:30:27 -0700
commitb38e020fb5e64c7d9a1d42c97393a0a84f9841a8 (patch)
tree740382f19e6909ba8910401525253bcb33c77610 /js/panels/Timeline
parenteb7c3c8db304bdfb01f747a50e932665d9ec03fa (diff)
downloadninja-b38e020fb5e64c7d9a1d42c97393a0a84f9841a8.tar.gz
handle style changes on keyframes
Signed-off-by: Jonathan Duran <jduran@motorola.com>
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js31
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js1
2 files changed, 28 insertions, 4 deletions
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, {
101 value:null 101 value:null
102 }, 102 },
103 103
104 trackDuration:{
105 value:0
106 },
107
104 _trackID:{ 108 _trackID:{
105 value:null 109 value:null
106 }, 110 },
@@ -209,6 +213,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
209 213
210 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); 214 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
211 var currentMillisec = currentMillisecPerPixel * clickPos; 215 var currentMillisec = currentMillisecPerPixel * clickPos;
216 this.trackDuration = currentMillisec;
212 217
213 var newTween = {}; 218 var newTween = {};
214 newTween.tweenData = {}; 219 newTween.tweenData = {};
@@ -242,7 +247,28 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
242 247
243 updatePropKeyframeRule:{ 248 updatePropKeyframeRule:{
244 value:function(){ 249 value:function(){
245 250 // delete the current rule
251 this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule);
252
253 // build the new keyframe string
254 var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
255
256 for (var i = 0; i < this.propTweens.length; i++) {
257 var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec);
258 // TODO - trackDur should be parseFloat rounded to significant digits
259 var trackDur = parseInt(this.trackDuration);
260 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
261 var keyframePropertyString = " " + keyframePercent + " {";
262 for(var prop in this.propTweens[i].tweenData.tweenedProperties){
263 keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop];
264 }
265 keyframePropertyString += "}";
266 keyframeString += keyframePropertyString;
267 }
268 keyframeString += " }";
269 // set the keyframe string as the new rule
270 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString);
271 this.application.ninja.documentController.activeDocument.needsSave = true;
246 } 272 }
247 }, 273 },
248 274
@@ -269,9 +295,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
269 //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); 295 //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both");
270 //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); 296 //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear");
271 297
272
273 console.log(currentStyleValue);
274
275 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; 298 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }";
276 console.log(initRule); 299 console.log(initRule);
277 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); 300 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index b8cc4a07..bcd3d75f 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -254,6 +254,7 @@ var Tween = exports.Tween = Montage.create(Component, {
254 var prop = this.parentComponent.parentComponent.trackEditorProperty; 254 var prop = this.parentComponent.parentComponent.trackEditorProperty;
255 this.tweenedProperties[prop] = eventDetail.data.value.color.css; 255 this.tweenedProperties[prop] = eventDetail.data.value.color.css;
256 console.log(this.tweenedProperties[prop]); 256 console.log(this.tweenedProperties[prop]);
257 this.parentComponent.parentComponent.updatePropKeyframeRule();
257 258
258 } else if(eventDetail.type == "setProperty"){ 259 } else if(eventDetail.type == "setProperty"){
259 // ignore top, left, width, and height 260 // ignore top, left, width, and height