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 +++++++++++++++++++--- js/panels/Timeline/Tween.reel/Tween.js | 1 + 2 files changed, 28 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline') 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); 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, { var prop = this.parentComponent.parentComponent.trackEditorProperty; this.tweenedProperties[prop] = eventDetail.data.value.color.css; console.log(this.tweenedProperties[prop]); + this.parentComponent.parentComponent.updatePropKeyframeRule(); } else if(eventDetail.type == "setProperty"){ // ignore top, left, width, and height -- cgit v1.2.3