aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Tween.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Tween.reel')
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js34
1 files changed, 11 insertions, 23 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 33fed17a..de6a8d56 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -147,7 +147,6 @@ var Tween = exports.Tween = Montage.create(Component, {
147 147
148 }, 148 },
149 149
150
151 draw:{ 150 draw:{
152 value:function () { 151 value:function () {
153 this.element.style.left = this.spanPosition + "px"; 152 this.element.style.left = this.spanPosition + "px";
@@ -186,20 +185,14 @@ var Tween = exports.Tween = Montage.create(Component, {
186 if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { 185 if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {
187 console.log("Wrong element selected for this keyframe track"); 186 console.log("Wrong element selected for this keyframe track");
188 } else { 187 } else {
189 if (useAbsolute) { 188 this.setTweenProperties(event.detail);
190 this.setAbsoluteTweenProperties(event.detail);
191 } else {
192 this.setRelativeTweenProperties(event.detail);
193 }
194 } 189 }
195 } 190 }
196
197
198 } 191 }
199 } 192 }
200 }, 193 },
201 194
202 setAbsoluteTweenProperties:{ 195 setTweenProperties:{
203 value:function (eventDetail) { 196 value:function (eventDetail) {
204 if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ 197 if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){
205 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; 198 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
@@ -215,24 +208,14 @@ var Tween = exports.Tween = Montage.create(Component, {
215 } 208 }
216 // tell track to update css rule 209 // tell track to update css rule
217 this.parentComponent.parentComponent.updateKeyframeRule(); 210 this.parentComponent.parentComponent.updateKeyframeRule();
218
219 // highlight the tween's span
220 this.tweenspan.highlightSpan();
221 this.isTweenAnimated = true; 211 this.isTweenAnimated = true;
222 } 212 }
223 }, 213 },
224 214
225 setRelativeTweenProperties:{
226 value:function(eventDetail){
227 //console.log(eventDetail);
228 }
229 },
230
231 setStyleTweenProperty:{ 215 setStyleTweenProperty:{
232 value:function (eventDetail) { 216 value:function (eventDetail) {
233 //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); 217 //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty);
234 //console.log(eventDetail); 218 //console.log(eventDetail);
235
236 if(eventDetail.type == "setProperties"){ 219 if(eventDetail.type == "setProperties"){
237 // need to ignore top, left, width, and height 220 // need to ignore top, left, width, and height
238 //console.log(eventDetail.data.value[0]); 221 //console.log(eventDetail.data.value[0]);
@@ -256,6 +239,14 @@ var Tween = exports.Tween = Montage.create(Component, {
256 } 239 }
257 }, 240 },
258 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
259 selectTween:{ 250 selectTween:{
260 value: function(){ 251 value: function(){
261 // turn on event listener for element change 252 // turn on event listener for element change
@@ -280,7 +271,7 @@ var Tween = exports.Tween = Montage.create(Component, {
280 // set property specific style on element 271 // set property specific style on element
281 var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty]; 272 var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty];
282 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], this.parentComponent.parentComponent.trackEditorProperty, [currentValue], "Change", "tween"); 273 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], this.parentComponent.parentComponent.trackEditorProperty, [currentValue], "Change", "tween");
283 //console.log(currentValue); 274 console.log(currentValue);
284 } else { 275 } else {
285 // move animated element to correct position on stage 276 // move animated element to correct position on stage
286 var currentTop = this.tweenedProperties["top"] + "px"; 277 var currentTop = this.tweenedProperties["top"] + "px";
@@ -292,7 +283,6 @@ var Tween = exports.Tween = Montage.create(Component, {
292 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); 283 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");
293 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween"); 284 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween");
294 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween"); 285 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween");
295
296 } 286 }
297 } 287 }
298 }, 288 },
@@ -301,10 +291,8 @@ var Tween = exports.Tween = Montage.create(Component, {
301 value:function(){ 291 value:function(){
302 // turn off event listener for element change 292 // turn off event listener for element change
303 this.eventManager.removeEventListener("elementChange", this, false); 293 this.eventManager.removeEventListener("elementChange", this, false);
304
305 // deselect the keyframe for this tween 294 // deselect the keyframe for this tween
306 this.keyframe.deselectKeyframe(); 295 this.keyframe.deselectKeyframe();
307 } 296 }
308 } 297 }
309
310}); 298});