diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 82 |
1 files changed, 39 insertions, 43 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index bf97c0fd..9894e6f9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -229,6 +229,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
229 | }, | 229 | }, |
230 | set:function (val) { | 230 | set:function (val) { |
231 | this._trackDuration = val; | 231 | this._trackDuration = val; |
232 | if(this._trackDuration > this.application.ninja.timeline.masterDuration){ | ||
233 | this.application.ninja.timeline.masterDuration = this._trackDuration; | ||
234 | } | ||
232 | } | 235 | } |
233 | }, | 236 | }, |
234 | 237 | ||
@@ -405,18 +408,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
405 | 408 | ||
406 | insertTween:{ | 409 | insertTween:{ |
407 | value:function (clickPos) { | 410 | value:function (clickPos) { |
408 | |||
409 | // calculate new tween's keyframe milliseconds by clickPos | 411 | // calculate new tween's keyframe milliseconds by clickPos |
410 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 412 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
411 | var currentMillisec = currentMillisecPerPixel * clickPos; | 413 | var currentMillisec = currentMillisecPerPixel * clickPos; |
412 | 414 | ||
413 | // need to check timeline master duration if greater than this track duration | 415 | // need to check timeline master duration if greater than this track duration |
414 | this.trackDuration = currentMillisec; | 416 | this.trackDuration = currentMillisec; |
415 | |||
416 | if(this.trackDuration > this.application.ninja.timeline.masterDuration){ | ||
417 | this.application.ninja.timeline.masterDuration = this.trackDuration; | ||
418 | } | ||
419 | |||
420 | var newTween = {}; | 417 | var newTween = {}; |
421 | 418 | ||
422 | if (clickPos == 0) { | 419 | if (clickPos == 0) { |
@@ -444,9 +441,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
444 | // update the animation duration | 441 | // update the animation duration |
445 | var animationDuration = Math.round(this.trackDuration / 1000) + "s"; | 442 | var animationDuration = Math.round(this.trackDuration / 1000) + "s"; |
446 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); | 443 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); |
447 | |||
448 | this.nextKeyframe += 1; | 444 | this.nextKeyframe += 1; |
449 | } | 445 | } |
446 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
450 | } | 447 | } |
451 | }, | 448 | }, |
452 | 449 | ||
@@ -459,7 +456,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
459 | 456 | ||
460 | retrieveStoredTweens:{ | 457 | retrieveStoredTweens:{ |
461 | value:function () { | 458 | value:function () { |
462 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; | 459 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute |
460 | var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,i = 0; | ||
463 | 461 | ||
464 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 462 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
465 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; | 463 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; |
@@ -467,23 +465,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
467 | if(this.animatedElement!==undefined){ | 465 | if(this.animatedElement!==undefined){ |
468 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); | 466 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); |
469 | if(this.animationName){ | 467 | if(this.animationName){ |
470 | this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); | 468 | trackTiming = 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; | 469 | this.nextKeyframe = 0; |
476 | 470 | ||
477 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); | 471 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); |
478 | while (this.currentKeyframeRule[i]) { | 472 | |
473 | for (i =0; this.currentKeyframeRule[i] ;i++) { | ||
479 | var newTween = {}; | 474 | var newTween = {}; |
480 | 475 | ||
481 | offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); | 476 | offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); |
482 | topOffSetAttribute = offsetAttribute[3].split("px"); | 477 | topOffSetAttribute = offsetAttribute[3].split("px"); |
483 | leftOffsetAttribute = offsetAttribute[5].split("px"); | 478 | leftOffsetAttribute = offsetAttribute[5].split("px"); |
484 | 479 | ||
485 | parseInt(topOffSetAttribute[0]); | 480 | var tempTopOffset = parseInt(topOffSetAttribute[0]); |
486 | parseInt(leftOffsetAttribute[0]); | 481 | var tempLeftOffset =parseInt(leftOffsetAttribute[0]); |
487 | 482 | ||
488 | if (this.currentKeyframeRule[i].keyText === "0%") { | 483 | if (this.currentKeyframeRule[i].keyText === "0%") { |
489 | newTween.spanWidth = 0; | 484 | newTween.spanWidth = 0; |
@@ -492,39 +487,38 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
492 | newTween.tweenID = 0; | 487 | newTween.tweenID = 0; |
493 | newTween.spanPosition = 0; | 488 | newTween.spanPosition = 0; |
494 | newTween.tweenedProperties = []; | 489 | newTween.tweenedProperties = []; |
495 | newTween.tweenedProperties["top"] = topOffSetAttribute[0]; | 490 | newTween.tweenedProperties["top"] = tempTopOffset; |
496 | newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; | 491 | newTween.tweenedProperties["left"] = tempLeftOffset; |
497 | this.tweens.push(newTween); | 492 | this.tweens.push(newTween); |
498 | 493 | ||
499 | } | 494 | } |
500 | else { | 495 | else { |
496 | tempTiming = trackTiming.split("s"); | ||
497 | tempTimingInt = parseInt(tempTiming[0]); | ||
498 | this.trackDuration = tempTimingInt *1000; | ||
501 | percentValue = this.currentKeyframeRule[i].keyText; | 499 | percentValue = this.currentKeyframeRule[i].keyText; |
502 | splitValue = percentValue.split("%"); | 500 | splitValue = percentValue.split("%"); |
503 | fraction = splitValue[0] / 100; | 501 | fraction = splitValue[0] / 100; |
504 | this.currentMilliSec = fraction * this.trackDuration[0] * 1000; | 502 | currentMilliSec = fraction * this.trackDuration; |
505 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 503 | currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
506 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | 504 | clickPosition = currentMilliSec / currentMilliSecPerPixel; |
507 | newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; | 505 | newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition; |
508 | newTween.keyFramePosition = this.clickPos; | 506 | newTween.keyFramePosition = clickPosition; |
509 | newTween.keyFrameMillisec = this.currentMilliSec; | 507 | newTween.keyFrameMillisec = currentMilliSec; |
510 | newTween.tweenID = this.nextKeyframe; | 508 | newTween.tweenID = this.nextKeyframe; |
511 | newTween.spanPosition = this.clickPos - newTween.spanWidth; | 509 | newTween.spanPosition =clickPosition - newTween.spanWidth; |
512 | newTween.tweenedProperties=[]; | 510 | newTween.tweenedProperties=[]; |
513 | newTween.tweenedProperties["top"] = topOffSetAttribute[0]; | 511 | newTween.tweenedProperties["top"] = tempTopOffset; |
514 | newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; | 512 | newTween.tweenedProperties["left"] = tempLeftOffset; |
515 | this.tweens.push(newTween); | 513 | this.tweens.push(newTween); |
516 | 514 | ||
517 | 515 | ||
518 | } | 516 | } |
519 | i++; | ||
520 | this.nextKeyframe += 1; | 517 | this.nextKeyframe += 1; |
521 | } | 518 | } |
522 | this.isTrackAnimated = true; | 519 | this.isTrackAnimated = true; |
523 | } | 520 | } |
524 | } | 521 | } |
525 | else{ | ||
526 | return; | ||
527 | } | ||
528 | } | 522 | } |
529 | }, | 523 | }, |
530 | 524 | ||
@@ -536,7 +530,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
536 | this.animationName = "animation_" + this.animatedElement.classList[0]; | 530 | this.animationName = "animation_" + this.animatedElement.classList[0]; |
537 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); | 531 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); |
538 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); | 532 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); |
539 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); | 533 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); |
534 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); | ||
535 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); | ||
540 | var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; | 536 | var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; |
541 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); | 537 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); |
542 | this.insertTween(tweenEvent.offsetX); | 538 | this.insertTween(tweenEvent.offsetX); |
@@ -566,6 +562,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
566 | keyframeString += " }"; | 562 | keyframeString += " }"; |
567 | // set the keyframe string as the new rule | 563 | // set the keyframe string as the new rule |
568 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); | 564 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); |
565 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
569 | } | 566 | } |
570 | }, | 567 | }, |
571 | 568 | ||
@@ -591,55 +588,54 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
591 | this._mainCollapser.myContent = this.myContent; | 588 | this._mainCollapser.myContent = this.myContent; |
592 | this._mainCollapser.contentHeight = 60; | 589 | this._mainCollapser.contentHeight = 60; |
593 | this._mainCollapser.isLabelClickable = false; |