aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorJonathan Duran2012-05-16 11:20:13 -0700
committerJonathan Duran2012-05-16 11:20:13 -0700
commita5e3eb0cec55858cf911bffc429ce1de817a60ef (patch)
tree9d206d79e0565f46ba4b9853b4d02d151571113b /js/panels/Timeline
parente5830f3424c7db84f0e76b237616cbf59fe9ed1c (diff)
downloadninja-a5e3eb0cec55858cf911bffc429ce1de817a60ef.tar.gz
methods for setting simple ease and splitting sub prop spans
Signed-off-by: Jonathan Duran <jduran@motorola.com>
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js39
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js8
2 files changed, 47 insertions, 0 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index a8adbf04..fbc3edd0 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -269,6 +269,45 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
269 } 269 }
270 }, 270 },
271 271
272 splitPropTween:{
273 value:function (ev) {
274 console.log("splitting sub prop tween with new keyframe");
275 var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX;
276 var i;
277 var tweensLength = this.propTweens.length - 1;
278 var prevTween, nextTween, splitTweenIndex;
279 for (i = 0; i < tweensLength; i++) {
280 prevTween = this.propTweens[i].tweenData.keyFramePosition;
281 nextTween = this.propTweens[i + 1].tweenData.keyFramePosition;
282 if (clickPos > prevTween && clickPos < nextTween) {
283 //console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID);
284 splitTweenIndex = this.propTweens[i + 1].tweenData.tweenID;
285 this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - clickPos;
286 this.propTweens[i + 1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX;
287 if (ev.target.className != "tween-span") {
288 // don't set styles on timeline track if event is coming from the track
289 } else {
290 ev.target.style.width = this.propTweens[i + 1].tweenData.spanWidth + "px";
291 ev.target.parentElement.style.left = clickPos + "px";
292 ev.target.parentElement.children[1].style.left = (this.propTweens[i + 1].tweenData.spanWidth - 3) + "px";
293 }
294 var newTweenToInsert = {};
295 newTweenToInsert.tweenData = {};
296 newTweenToInsert.tweenData.spanWidth = clickPos - prevTween;
297 newTweenToInsert.tweenData.keyFramePosition = clickPos;
298 newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos;
299 newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1;
300 newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth;
301 newTweenToInsert.tweenData.tweenedProperties = [];
302 newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
303 this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert);
304 break;
305 }
306 }
307 this.application.ninja.documentController.activeDocument.needsSave = true;
308 }
309 },
310
272 retrieveStoredStyleTweens:{ 311 retrieveStoredStyleTweens:{
273 value:function(){ 312 value:function(){
274 console.log("retrieve style tweens"); 313 console.log("retrieve style tweens");
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index f857ebd4..b61b0ca9 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -239,6 +239,14 @@ var Tween = exports.Tween = Montage.create(Component, {
239 } 239 }
240 }, 240 },
241 241
242 setKeyframeEase:{
243 value:function(easeType){
244 // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2)
245 this.tweenedProperties["-webkit-animation-timing-function"] = easeType;
246 this.parentComponent.parentComponent.updatePropKeyframeRule();
247 }
248 },
249
242 selectTween:{ 250 selectTween:{
243 value: function(){ 251 value: function(){
244 // turn on event listener for element change 252 // turn on event listener for element change