diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 35 |
1 files changed, 28 insertions, 7 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 84bac2cb..1a8b6f4e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -41,6 +41,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
41 | this._tween = newVal; | 41 | this._tween = newVal; |
42 | } | 42 | } |
43 | }, | 43 | }, |
44 | |||
45 | positionPropertyTrack:{ | ||
46 | value:null | ||
47 | }, | ||
44 | 48 | ||
45 | _isFirstDraw: { | 49 | _isFirstDraw: { |
46 | value: true | 50 | value: true |
@@ -171,9 +175,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
171 | }, | 175 | }, |
172 | set: function(newVal) { | 176 | set: function(newVal) { |
173 | this._arrPositionTracks = newVal; | 177 | this._arrPositionTracks = newVal; |
174 | if (typeof(this.trackData) === "undefined") { | ||
175 | //this.createTrackData(); | ||
176 | } | ||
177 | this.trackData.arrPositionTracks = newVal; | 178 | this.trackData.arrPositionTracks = newVal; |
178 | 179 | ||
179 | } | 180 | } |
@@ -189,8 +190,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
189 | this._positionTracksRepetition = newVal; | 190 | this._positionTracksRepetition = newVal; |
190 | } | 191 | } |
191 | }, | 192 | }, |
192 | 193 | ||
193 | 194 | ||
194 | /* Transform Property Tracks */ | 195 | /* Transform Property Tracks */ |
195 | _arrTransformTracks : { | 196 | _arrTransformTracks : { |
196 | value: [] | 197 | value: [] |
@@ -470,6 +471,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
470 | this.bypassAnimation = this.trackData.bypassAnimation; | 471 | this.bypassAnimation = this.trackData.bypassAnimation; |
471 | this.trackID = this.trackData.layerID; | 472 | this.trackID = this.trackData.layerID; |
472 | this.tweens = this.trackData.tweens; | 473 | this.tweens = this.trackData.tweens; |
474 | this.arrPositionTracks = this.trackData.arrPositionTracks; | ||
473 | this.animatedElement = this.trackData.animatedElement; | 475 | this.animatedElement = this.trackData.animatedElement; |
474 | this.arrStyleTracks = this.trackData.arrStyleTracks; | 476 | this.arrStyleTracks = this.trackData.arrStyleTracks; |
475 | this.isTrackAnimated = this.trackData.isTrackAnimated; | 477 | this.isTrackAnimated = this.trackData.isTrackAnimated; |
@@ -486,6 +488,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
486 | this.needsDraw = true; | 488 | this.needsDraw = true; |
487 | } | 489 | } |
488 | }, | 490 | }, |
491 | |||
489 | createTrackData: { | 492 | createTrackData: { |
490 | value: function() { | 493 | value: function() { |
491 | tempData = {}; | 494 | tempData = {}; |
@@ -494,6 +497,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
494 | tempData.tweens = this.tweens; | 497 | tempData.tweens = this.tweens; |
495 | tempData.animatedElement = this.animatedElement; | 498 | tempData.animatedElement = this.animatedElement; |
496 | tempData.arrStyleTracks = this.arrStyleTracks; | 499 | tempData.arrStyleTracks = this.arrStyleTracks; |
500 | tempData.arrPositionTracks = this.arrPositionTracks; | ||
497 | tempData.isTrackAnimated = this.isTrackAnimated; | 501 | tempData.isTrackAnimated = this.isTrackAnimated; |
498 | tempData.trackDuration = this.trackDuration; | 502 | tempData.trackDuration = this.trackDuration; |
499 | tempData.animationName = this.animationName; | 503 | tempData.animationName = this.animationName; |
@@ -759,12 +763,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
759 | newTween.tweenData.keyFrameMillisec = 0; | 763 | newTween.tweenData.keyFrameMillisec = 0; |
760 | newTween.tweenData.tweenID = 0; | 764 | newTween.tweenData.tweenID = 0; |
761 | newTween.tweenData.spanPosition = 0; | 765 | newTween.tweenData.spanPosition = 0; |
766 | newTween.tweenData.easing = "none"; | ||
762 | newTween.tweenData.tweenedProperties = []; | 767 | newTween.tweenData.tweenedProperties = []; |
763 | newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; | 768 | newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; |
764 | newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; | 769 | newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; |
765 | newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; | 770 | newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; |
766 | newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; | 771 | newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; |
767 | this.tweens.push(newTween); | 772 | this.tweens.push(newTween); |
773 | |||
774 | this.createMatchingPositionSizeTween(newTween); | ||
775 | |||
768 | } else { | 776 | } else { |
769 | newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; | 777 | newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; |
770 | newTween.tweenData.keyFramePosition = clickPos; | 778 | newTween.tweenData.keyFramePosition = clickPos; |
@@ -783,20 +791,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
783 | var animationDuration = (this.trackDuration / 1000) + "s"; | 791 | var animationDuration = (this.trackDuration / 1000) + "s"; |
784 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); | 792 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); |
785 | this.nextKeyframe += 1; | 793 | this.nextKeyframe += 1; |
794 | |||
795 | this.createMatchingPositionSizeTween(newTween); | ||
786 | } | 796 | } |
787 | 797 | ||
798 | |||
799 | |||
788 | this.application.ninja.currentDocument.model.needsSave = true; | 800 | this.application.ninja.currentDocument.model.needsSave = true; |
789 | } | 801 | } |
790 | }, | 802 | }, |
791 | 803 | ||
804 | createMatchingPositionSizeTween:{ | ||
805 | value:function (newTween) { | ||
806 | var i; | ||
807 | var posTracks = this.positionTracksRepetition.childComponents.length; | ||
808 | for (i = 0; i < posTracks; i++) { | ||
809 | this.positionTracksRepetition.childComponents[i].propTweens.push(newTween); | ||
810 | } | ||
811 | } | ||
812 | }, | ||
813 | |||
792 | splitTween:{ | 814 | splitTween:{ |
793 | value:function (ev) { | 815 | value:function (ev) { |
794 | var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX, | 816 | var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX, |
795 | i, | 817 | i, |
796 | tweensLength = this.tweens.length-1, | 818 | tweensLength = this.tweens.length-1, |
797 | prevTween, nextTween, splitTweenIndex; | 819 | prevTween, nextTween, splitTweenIndex; |
798 | 820 | ||
799 | consol.log(ev.target.className) | ||
800 | for(i=0; i<tweensLength; i++){ | 821 | for(i=0; i<tweensLength; i++){ |
801 | prevTween = this.tweens[i].tweenData.keyFramePosition; | 822 | prevTween = this.tweens[i].tweenData.keyFramePosition; |
802 | nextTween = this.tweens[i+1].tweenData.keyFramePosition; | 823 | nextTween = this.tweens[i+1].tweenData.keyFramePosition; |