aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html39
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js78
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js43
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 @@
32 "element":{"#": "track_lane"} 32 "element":{"#": "track_lane"}
33 }, 33 },
34 "bindings" : { 34 "bindings" : {
35 "spanWidth" : { 35 "tweenData" : {
36 "boundObject" : {"@": "tweenRepetition"}, 36 "boundObject" : {"@": "tweenRepetition"},
37 "boundObjectPropertyPath" : "objectAtCurrentIteration.spanWidth", 37 "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenData",
38 "oneway" : false
39 },
40 "keyFramePosition" : {
41 "boundObject" : {"@": "tweenRepetition"},
42 "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFramePosition",
43 "oneway" : false
44 },
45 "spanPosition" : {
46 "boundObject" : {"@": "tweenRepetition"},
47 "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition",
48 "oneway" : false
49 },
50 "keyFrameMillisec" : {
51 "boundObject" : {"@": "tweenRepetition"},
52 "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec",
53 "oneway" : false
54 },
55 "tweenID" : {
56 "boundObject" : {"@": "tweenRepetition"},
57 "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenID",
58 "oneway" : false
59 },
60 "tweenedProperties" : {
61 "boundObject" : {"@": "tweenRepetition"},
62 "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenedProperties",
63 "oneway" : false
64 },
65 "isTweenAnimated" : {
66 "boundObject" : {"@": "tweenRepetition"},
67 "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated",
68 "oneway" : false
69 },
70 "isClearing" : {
71 "boundObject" : {"@": "tweenRepetition"},
72 "boundObjectPropertyPath" : "objectAtCurrentIteration.isClearing",
73 "oneway" : false 38 "oneway" : false
74 } 39 }
75 } 40 }
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, {
410 410
411 handleNewTween:{ 411 handleNewTween:{
412 value:function (ev) { 412 value:function (ev) {
413 if (ev.offsetX > this.tweens[this.tweens.length - 1].keyFramePosition) { 413 if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) {
414 this.insertTween(ev.offsetX); 414 this.insertTween(ev.offsetX);
415 } else { 415 } else {
416 this.splitTween(ev); 416 this.splitTween(ev);
@@ -427,27 +427,28 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
427 // need to check timeline master duration if greater than this track duration 427 // need to check timeline master duration if greater than this track duration
428 this.trackDuration = currentMillisec; 428 this.trackDuration = currentMillisec;
429 var newTween = {}; 429 var newTween = {};
430 newTween.tweenData = {};
430 431
431 if (clickPos == 0) { 432 if (clickPos == 0) {
432 this.animatedElement = this.application.ninja.timeline.currentLayerSelected.elementsList[0]; 433 this.animatedElement = this.application.ninja.timeline.currentLayerSelected.elementsList[0];
433 newTween.spanWidth = 0; 434 newTween.tweenData.spanWidth = 0;
434 newTween.keyFramePosition = 0; 435 newTween.tweenData.keyFramePosition = 0;
435 newTween.keyFrameMillisec = 0; 436 newTween.tweenData.keyFrameMillisec = 0;
436 newTween.tweenID = 0; 437 newTween.tweenData.tweenID = 0;
437 newTween.spanPosition = 0; 438 newTween.tweenData.spanPosition = 0;
438 newTween.tweenedProperties = []; 439 newTween.tweenData.tweenedProperties = [];
439 newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; 440 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
440 newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; 441 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
441 this.tweens.push(newTween); 442 this.tweens.push(newTween);
442 } else { 443 } else {
443 newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; 444 newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition;
444 newTween.keyFramePosition = clickPos; 445 newTween.tweenData.keyFramePosition = clickPos;
445 newTween.keyFrameMillisec = currentMillisec; 446 newTween.tweenData.keyFrameMillisec = currentMillisec;
446 newTween.tweenID = this.nextKeyframe; 447 newTween.tweenData.tweenID = this.nextKeyframe;
447 newTween.spanPosition = clickPos - newTween.spanWidth; 448 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
448 newTween.tweenedProperties = []; 449 newTween.tweenData.tweenedProperties = [];
449 newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; 450 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
450 newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; 451 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
451 this.tweens.push(newTween); 452 this.tweens.push(newTween);
452 453
453 // update the animation duration 454 // update the animation duration
@@ -483,6 +484,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
483 484
484 for (i =0; this.currentKeyframeRule[i] ;i++) { 485 for (i =0; this.currentKeyframeRule[i] ;i++) {
485 var newTween = {}; 486 var newTween = {};
487 newTween.tweenData = {};
486 488
487 offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); 489 offsetAttribute = this.currentKeyframeRule[i].cssText.split(" ");
488 topOffSetAttribute = offsetAttribute[3].split("px"); 490 topOffSetAttribute = offsetAttribute[3].split("px");
@@ -492,14 +494,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
492 var tempLeftOffset =parseInt(leftOffsetAttribute[0]); 494 var tempLeftOffset =parseInt(leftOffsetAttribute[0]);
493 495
494 if (this.currentKeyframeRule[i].keyText === "0%") { 496 if (this.currentKeyframeRule[i].keyText === "0%") {
495 newTween.spanWidth = 0; 497 newTween.tweenData.spanWidth = 0;
496 newTween.keyFramePosition = 0; 498 newTween.tweenData.keyFramePosition = 0;
497 newTween.keyFrameMillisec = 0; 499 newTween.tweenData.keyFrameMillisec = 0;
498 newTween.tweenID = 0; 500 newTween.tweenData.tweenID = 0;
499 newTween.spanPosition = 0; 501 newTween.tweenData.spanPosition = 0;
500 newTween.tweenedProperties = []; 502 newTween.tweenData.tweenedProperties = [];
501 newTween.tweenedProperties["top"] = tempTopOffset; 503 newTween.tweenData.tweenedProperties["top"] = tempTopOffset;
502 newTween.tweenedProperties["left"] = tempLeftOffset; 504 newTween.tweenData.tweenedProperties["left"] = tempLeftOffset;
503 this.tweens.push(newTween); 505 this.tweens.push(newTween);
504 } 506 }
505 else { 507 else {
@@ -512,14 +514,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
512 currentMilliSec = fraction * this.trackDuration; 514 currentMilliSec = fraction * this.trackDuration;
513 currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); 515 currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
514 clickPosition = currentMilliSec / currentMilliSecPerPixel; 516 clickPosition = currentMilliSec / currentMilliSecPerPixel;
515 newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition; 517 newTween.tweenData.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition;
516 newTween.keyFramePosition = clickPosition; 518 newTween.tweenData.keyFramePosition = clickPosition;
517 newTween.keyFrameMillisec = currentMilliSec; 519 newTween.tweenData.keyFrameMillisec = currentMilliSec;
518 newTween.tweenID = this.nextKeyframe; 520 newTween.tweenData.tweenID = this.nextKeyframe;
519 newTween.spanPosition =clickPosition - newTween.spanWidth; 521 newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth;
520 newTween.tweenedProperties=[]; 522 newTween.tweenData.tweenedProperties=[];
521 newTween.tweenedProperties["top"] = tempTopOffset; 523 newTween.tweenData.tweenedProperties["top"] = tempTopOffset;
522 newTween.tweenedProperties["left"] = tempLeftOffset; 524 newTween.tweenData.tweenedProperties["left"] = tempLeftOffset;
523 this.tweens.push(newTween); 525 this.tweens.push(newTween);
524 } 526 }
525 this.nextKeyframe += 1; 527 this.nextKeyframe += 1;
@@ -532,8 +534,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
532 534
533 addAnimationRuleToElement:{ 535 addAnimationRuleToElement:{
534 value:function (tweenEvent) { 536 value:function (tweenEvent) {
535 this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; 537 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
536 this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft; 538 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
537 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 539 var animationDuration = Math.round(this.trackDuration / 1000) + "s";
538 this.animationName = "animation_" + this.animatedElement.classList[0]; 540 this.animationName = "animation_" + this.animatedElement.classList[0];
539 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); 541 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
@@ -557,13 +559,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
557 var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; 559 var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
558 560
559 for (var i = 0; i < this.tweens.length; i++) { 561 for (var i = 0; i < this.tweens.length; i++) {
560 var keyMill = parseInt(this.tweens[i].keyFrameMillisec); 562 var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec);
561 // TODO - trackDur should be parseFloat rounded to significant digits 563 // TODO - trackDur should be parseF