diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 128 |
2 files changed, 79 insertions, 54 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 158d666e..26d045d6 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | |||
@@ -62,6 +62,11 @@ | |||
62 | "boundObject" : {"@": "tweenRepetition"}, | 62 | "boundObject" : {"@": "tweenRepetition"}, |
63 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated", | 63 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated", |
64 | "oneway" : false | 64 | "oneway" : false |
65 | }, | ||
66 | "isClearing" : { | ||
67 | "boundObject" : {"@": "tweenRepetition"}, | ||
68 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isClearing", | ||
69 | "oneway" : false | ||
65 | } | 70 | } |
66 | } | 71 | } |
67 | }, | 72 | }, |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 0c5121cd..bf97c0fd 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -331,10 +331,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
331 | _styleCollapser:{ | 331 | _styleCollapser:{ |
332 | value:null | 332 | value:null |
333 | }, | 333 | }, |
334 | _openDocRedrawCheck:{ | ||
335 | value:true, | ||
336 | writable:true | ||
337 | }, | ||
338 | prepareForDraw:{ | 334 | prepareForDraw:{ |
339 | value:function () { | 335 | value:function () { |
340 | this.init(); | 336 | this.init(); |
@@ -364,10 +360,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
364 | 360 | ||
365 | didDraw:{ | 361 | didDraw:{ |
366 | value:function () { | 362 | value:function () { |
367 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ | 363 | if(!this.application.ninja.documentController.creatingNewFile){ |
368 | if (this._openDocRedrawCheck) { | 364 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ |
369 | this.retrieveStoredTweens(); | 365 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
370 | this._openDocRedrawCheck = false; | 366 | if(!this.application.ninja.timeline.arrLayers[selectedIndex].created){ |
367 | this.retrieveStoredTweens(); | ||
368 | } | ||
371 | } | 369 | } |
372 | } | 370 | } |
373 | } | 371 | } |
@@ -379,7 +377,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
379 | // This needs to move to a keyboard shortcut that is TBD | 377 | // This needs to move to a keyboard shortcut that is TBD |
380 | 378 | ||
381 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 379 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
382 | //this.application.ninja.timeline.selectLayer(selectIndex); | ||
383 | 380 | ||
384 | if (ev.shiftKey) { | 381 | if (ev.shiftKey) { |
385 | if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) { | 382 | if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) { |
@@ -462,49 +459,67 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
462 | 459 | ||
463 | retrieveStoredTweens:{ | 460 | retrieveStoredTweens:{ |
464 | value:function () { | 461 | value:function () { |
465 | var percentValue, fraction, splitValue, i = 0; | 462 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; |
466 | |||
467 | this.animatedElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].elementsList[0]; | ||
468 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); | ||
469 | this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); | ||
470 | if(this.animationDuration){ | ||
471 | this.trackDuration = this.animationDuration.split("s"); | ||
472 | this.currentMilliSec = this.trackDuration[0] * 1000; | ||
473 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | ||
474 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | ||
475 | this.nextKeyframe = 0; | ||
476 | |||
477 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); | ||
478 | while (this.currentKeyframeRule[i]) { | ||
479 | var newTween = {}; | ||
480 | |||
481 | if (this.currentKeyframeRule[i].keyText === "0%") { | ||
482 | newTween.spanWidth = 0; | ||
483 | newTween.keyFramePosition = 0; | ||
484 | newTween.keyFrameMillisec = 0; | ||
485 | newTween.tweenID = 0; | ||
486 | newTween.spanPosition = 0; | ||
487 | this.tweens.push(newTween); | ||
488 | |||
489 | } | ||
490 | else { | ||
491 | percentValue = this.currentKeyframeRule[i].keyText; | ||
492 | splitValue = percentValue.split("%"); | ||
493 | fraction = splitValue[0] / 100; | ||
494 | this.currentMilliSec = fraction * this.trackDuration[0] * 1000; | ||
495 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | ||
496 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | ||
497 | newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; | ||
498 | newTween.keyFramePosition = this.clickPos; | ||
499 | newTween.keyFrameMillisec = this.currentMilliSec; | ||
500 | newTween.tweenID = this.nextKeyframe; | ||
501 | newTween.spanPosition = this.clickPos - newTween.spanWidth; | ||
502 | this.tweens.push(newTween); | ||
503 | |||
504 | 463 | ||
464 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | ||
465 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; | ||
466 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].elementsList[0]; | ||
467 | if(this.animatedElement!==undefined){ | ||
468 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); | ||
469 | if(this.animationName){ | ||
470 | this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); | ||
471 | this.trackDuration = this.animationDuration.split("s"); | ||
472 | this.currentMilliSec = this.trackDuration[0] * 1000; | ||
473 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | ||
474 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | ||
475 | this.nextKeyframe = 0; | ||
476 | |||
477 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); | ||
478 | while (this.currentKeyframeRule[i]) { | ||
479 | var newTween = {}; | ||
480 | |||
481 | offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); | ||
482 | topOffSetAttribute = offsetAttribute[3].split("px"); | ||
483 | leftOffsetAttribute = offsetAttribute[5].split("px"); | ||
484 | |||
485 | parseInt(topOffSetAttribute[0]); | ||
486 | parseInt(leftOffsetAttribute[0]); | ||
487 | |||
488 | if (this.currentKeyframeRule[i].keyText === "0%") { | ||
489 | newTween.spanWidth = 0; | ||
490 | newTween.keyFramePosition = 0; | ||
491 | newTween.keyFrameMillisec = 0; | ||
492 | newTween.tweenID = 0; | ||
493 | newTween.spanPosition = 0; | ||
494 | newTween.tweenedProperties = []; | ||
495 | newTween.tweenedProperties["top"] = topOffSetAttribute[0]; | ||
496 | newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; | ||
497 | this.tweens.push(newTween); | ||
498 | |||
499 | } | ||
500 | else { | ||
501 | percentValue = this.currentKeyframeRule[i].keyText; | ||
502 | splitValue = percentValue.split("%"); | ||
503 | fraction = splitValue[0] / 100; | ||
504 | this.currentMilliSec = fraction * this.trackDuration[0] * 1000; | ||
505 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | ||
506 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | ||
507 | newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; | ||
508 | newTween.keyFramePosition = this.clickPos; | ||
509 | newTween.keyFrameMillisec = this.currentMilliSec; | ||
510 | newTween.tweenID = this.nextKeyframe; | ||
511 | newTween.spanPosition = this.clickPos - newTween.spanWidth; | ||
512 | newTween.tweenedProperties=[]; | ||
513 | newTween.tweenedProperties["top"] = topOffSetAttribute[0]; | ||
514 | newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; | ||
515 | this.tweens.push(newTween); | ||
516 | |||
517 | |||
518 | } | ||
519 | i++; | ||
520 | this.nextKeyframe += 1; | ||
505 | } | 521 | } |
506 | i++; | 522 | this.isTrackAnimated = true; |
507 | this.nextKeyframe += 1; | ||
508 | } | 523 | } |
509 | } | 524 | } |
510 | else{ | 525 | else{ |
@@ -518,7 +533,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
518 | this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; | 533 | this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; |
519 | this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft; | 534 | this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft; |
520 | var animationDuration = Math.round(this.trackDuration / 1000) + "s"; | 535 | var animationDuration = Math.round(this.trackDuration / 1000) + "s"; |
521 | this.animationName = "animation_" + this.animatedElement.className; | 536 | this.animationName = "animation_" + this.animatedElement.classList[0]; |
522 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); | 537 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); |
523 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); | 538 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); |
524 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); | 539 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); |
@@ -538,7 +553,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
538 | var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; | 553 | var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; |
539 | 554 | ||
540 | for (var i = 0; i < this.tweens.length; i++) { | 555 | for (var i = 0; i < this.tweens.length; i++) { |
541 | var keyframePercent = Math.round((this.tweens[i].keyFrameMillisec / this.trackDuration) * 100) + "%"; | 556 | var keyMill = parseInt(this.tweens[i].keyFrameMillisec); |
557 | // TODO - trackDur should be parseFloat rounded to significant digits | ||
558 | var trackDur = parseInt(this.trackDuration); | ||
559 | var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; | ||
542 | var keyframePropertyString = " " + keyframePercent + " {"; | 560 | var keyframePropertyString |