From c92ac883d43be0b8f89a04505ec11235d2856382 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 7 Mar 2012 09:28:10 -0800 Subject: Optimize serialization bindings for Tween component Move all serialized properties of Tween component into on data object with one binding instead of multiple properties with individual bindings Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.html | 39 +---------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 78 +++++++++++----------- js/panels/Timeline/Tween.reel/Tween.js | 43 +++++++----- 3 files changed, 70 insertions(+), 90 deletions(-) diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 1cc05f4e..7e9b8a21 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -32,44 +32,9 @@ "element":{"#": "track_lane"} }, "bindings" : { - "spanWidth" : { + "tweenData" : { "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.spanWidth", - "oneway" : false - }, - "keyFramePosition" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFramePosition", - "oneway" : false - }, - "spanPosition" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition", - "oneway" : false - }, - "keyFrameMillisec" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec", - "oneway" : false - }, - "tweenID" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenID", - "oneway" : false - }, - "tweenedProperties" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenedProperties", - "oneway" : false - }, - "isTweenAnimated" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated", - "oneway" : false - }, - "isClearing" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isClearing", + "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenData", "oneway" : false } } diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 669dabef..e00dd0bc 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -410,7 +410,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { handleNewTween:{ value:function (ev) { - if (ev.offsetX > this.tweens[this.tweens.length - 1].keyFramePosition) { + if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { this.insertTween(ev.offsetX); } else { this.splitTween(ev); @@ -427,27 +427,28 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // need to check timeline master duration if greater than this track duration this.trackDuration = currentMillisec; var newTween = {}; + newTween.tweenData = {}; if (clickPos == 0) { this.animatedElement = this.application.ninja.timeline.currentLayerSelected.elementsList[0]; - newTween.spanWidth = 0; - newTween.keyFramePosition = 0; - newTween.keyFrameMillisec = 0; - newTween.tweenID = 0; - newTween.spanPosition = 0; - newTween.tweenedProperties = []; - newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; - newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; + newTween.tweenData.spanWidth = 0; + newTween.tweenData.keyFramePosition = 0; + newTween.tweenData.keyFrameMillisec = 0; + newTween.tweenData.tweenID = 0; + newTween.tweenData.spanPosition = 0; + newTween.tweenData.tweenedProperties = []; + newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); } else { - newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; - newTween.keyFramePosition = clickPos; - newTween.keyFrameMillisec = currentMillisec; - newTween.tweenID = this.nextKeyframe; - newTween.spanPosition = clickPos - newTween.spanWidth; - newTween.tweenedProperties = []; - newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; - newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; + newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; + newTween.tweenData.keyFramePosition = clickPos; + newTween.tweenData.keyFrameMillisec = currentMillisec; + newTween.tweenData.tweenID = this.nextKeyframe; + newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; + newTween.tweenData.tweenedProperties = []; + newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); // update the animation duration @@ -483,6 +484,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { for (i =0; this.currentKeyframeRule[i] ;i++) { var newTween = {}; + newTween.tweenData = {}; offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); topOffSetAttribute = offsetAttribute[3].split("px"); @@ -492,14 +494,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var tempLeftOffset =parseInt(leftOffsetAttribute[0]); if (this.currentKeyframeRule[i].keyText === "0%") { - newTween.spanWidth = 0; - newTween.keyFramePosition = 0; - newTween.keyFrameMillisec = 0; - newTween.tweenID = 0; - newTween.spanPosition = 0; - newTween.tweenedProperties = []; - newTween.tweenedProperties["top"] = tempTopOffset; - newTween.tweenedProperties["left"] = tempLeftOffset; + newTween.tweenData.spanWidth = 0; + newTween.tweenData.keyFramePosition = 0; + newTween.tweenData.keyFrameMillisec = 0; + newTween.tweenData.tweenID = 0; + newTween.tweenData.spanPosition = 0; + newTween.tweenData.tweenedProperties = []; + newTween.tweenData.tweenedProperties["top"] = tempTopOffset; + newTween.tweenData.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); } else { @@ -512,14 +514,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { currentMilliSec = fraction * this.trackDuration; currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); clickPosition = currentMilliSec / currentMilliSecPerPixel; - newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition; - newTween.keyFramePosition = clickPosition; - newTween.keyFrameMillisec = currentMilliSec; - newTween.tweenID = this.nextKeyframe; - newTween.spanPosition =clickPosition - newTween.spanWidth; - newTween.tweenedProperties=[]; - newTween.tweenedProperties["top"] = tempTopOffset; - newTween.tweenedProperties["left"] = tempLeftOffset; + newTween.tweenData.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; + newTween.tweenData.keyFramePosition = clickPosition; + newTween.tweenData.keyFrameMillisec = currentMilliSec; + newTween.tweenData.tweenID = this.nextKeyframe; + newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth; + newTween.tweenData.tweenedProperties=[]; + newTween.tweenData.tweenedProperties["top"] = tempTopOffset; + newTween.tweenData.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); } this.nextKeyframe += 1; @@ -532,8 +534,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { addAnimationRuleToElement:{ value:function (tweenEvent) { - this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; - this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft; + this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; + this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.animationName = "animation_" + this.animatedElement.classList[0]; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); @@ -557,13 +559,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; for (var i = 0; i < this.tweens.length; i++) { - var keyMill = parseInt(this.tweens[i].keyFrameMillisec); + var keyMill = parseInt(this.tweens[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.tweens[i].tweenedProperties){ - keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;"; + for(var prop in this.tweens[i].tweenData.tweenedProperties){ + keyframePropertyString += prop + ": " + this.tweens[i].tweenData.tweenedProperties[prop] + "px;"; } keyframePropertyString += "}"; keyframeString += keyframePropertyString; diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 6ff38bef..b9ec40ad 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -14,6 +14,22 @@ var Tween = exports.Tween = Montage.create(Component, { value: true }, + _tweenData:{ + serializable: true, + value:{} + }, + + tweenData:{ + serializable: true, + get:function(){ + return this._tweenData; + }, + set:function(val){ + this._tweenData = val; + this.setData(); + } + }, + _spanWidth: { serializable: true, value: 0 @@ -118,21 +134,6 @@ var Tween = exports.Tween = Montage.create(Component, { this.needsDraw = true; } }, - - _isClearing : { - serializable: true, - value: false - }, - isClearing : { - get: function() { - return this._isClearing; - }, - set: function(newVal) { - if (newVal === "clear it") { - this.eventManager.removeEventListener("elementChange", this, false); - } - } - }, draw:{ value:function () { @@ -145,6 +146,18 @@ var Tween = exports.Tween = Montage.create(Component, { } }, + setData:{ + value:function(){ + this.spanWidth = this.tweenData.spanWidth; + this.keyFramePosition = this.tweenData.keyFramePosition; + this.spanPosition = this.tweenData.spanPosition; + this.keyFrameMillisec = this.tweenData.keyFrameMillisec; + this.tweenID = this.tweenData.tweenID; + this.tweenedProperties = this.tweenData.tweenedProperties; + this.isTweenAnimated = this.tweenData.isTweenAnimated; + } + }, + handleElementChange:{ value:function (event) { -- cgit v1.2.3