aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js75
1 files changed, 73 insertions, 2 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 59bc14e4..d602641e 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -24,7 +24,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
24 24
25 draw:{ 25 draw:{
26 value:function(){ 26 value:function(){
27 27 console.log(this.currentKeyframeRule);
28 } 28 }
29 }, 29 },
30 30
@@ -178,6 +178,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
178 this.propTweens = this.propTrackData.propTweens; 178 this.propTweens = this.propTrackData.propTweens;
179 this.trackType = this.propTrackData.trackType; 179 this.trackType = this.propTrackData.trackType;
180 this.trackEditorProperty = this.propTrackData.trackEditorProperty; 180 this.trackEditorProperty = this.propTrackData.trackEditorProperty;
181 this.currentKeyframeRule = this.propTrackData.existingRule;
181 this.needsDraw = true; 182 this.needsDraw = true;
182 } 183 }
183 }, 184 },
@@ -315,7 +316,77 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
315 316
316 retrieveStoredStyleTweens:{ 317 retrieveStoredStyleTweens:{
317 value:function(){ 318 value:function(){
318 console.log("retrieve style tweens"); 319 console.log("retrieving style tweens");
320 var percentValue, fraction, splitValue;
321 var currentMilliSec, currentMilliSecPerPixel, clickPosition, tempTiming, tempTimingFloat, trackTiming, i = 0;
322
323 if (this.animatedElement !== undefined) {
324
325 //this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
326
327 // build tweens for this tracks's keyframe rule
328 if (this.animationName) {
329
330 trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
331 this.nextKeyframe = 0;
332
333 this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument.model.views.design.document);
334
335 for (i = 0; this.currentKeyframeRule[i]; i++) {
336 var newTween = {};
337 newTween.tweenData = {};
338
339 var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = [];
340
341 for (j = 0; j < styleLength; j++) {
342
343 // check for vendor prefixes and skip them for now
344 var firstChar = this.currentKeyframeRule[i].style[j].charAt(0);
345 if (firstChar === "-") {
346 break;
347 } else {
348 var currProp = this.currentKeyframeRule[i].style[j];
349 var propVal = this.currentKeyframeRule[i].style[currProp];
350 keyframeStyles.push([currProp, propVal]);
351 }
352 }
353
354 // recreate tween properties array for timeline tween
355 newTween.tweenData.tweenedProperties = [];
356 for (var k in keyframeStyles) {
357 newTween.tweenData.tweenedProperties[keyframeStyles[k][0]] = keyframeStyles[k][1];
358 }
359
360 if (this.currentKeyframeRule[i].keyText === "0%") {
361 newTween.tweenData.spanWidth = 0;
362 newTween.tweenData.keyFramePosition = 0;
363 newTween.tweenData.keyFrameMillisec = 0;
364 newTween.tweenData.tweenID = 0;
365 newTween.tweenData.spanPosition = 0;
366 this.tweens.push(newTween);
367 }
368 else {
369 tempTiming = trackTiming.split("s");
370 tempTimingFloat = parseFloat(tempTiming[0]);
371 this.trackDuration = tempTimingFloat * 1000;
372 percentValue = this.currentKeyframeRule[i].keyText;
373 splitValue = percentValue.split("%");
374 fraction = splitValue[0] / 100;
375 currentMilliSec = fraction * this.trackDuration;
376 currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
377 clickPosition = currentMilliSec / currentMilliSecPerPixel;
378 newTween.tweenData.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition;
379 newTween.tweenData.keyFramePosition = clickPosition;
380 newTween.tweenData.keyFrameMillisec = currentMilliSec;
381 newTween.tweenData.tweenID = this.nextKeyframe;
382 newTween.tweenData.spanPosition = clickPosition - newTween.tweenData.spanWidth;
383 this.tweens.push(newTween);
384 }
385 this.nextKeyframe += 1;
386 }
387 this.isTrackAnimated = true;
388 }
389 }
319 } 390 }
320 }, 391 },
321 392