diff options
Diffstat (limited to 'js/panels/Timeline/Tween.reel')
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 110 |
1 files changed, 71 insertions, 39 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 8b6826ed..de6a8d56 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -132,7 +132,20 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
132 | this._isTweenAnimated = value; | 132 | this._isTweenAnimated = value; |
133 | } | 133 | } |
134 | }, | 134 | }, |
135 | 135 | ||
136 | _isDragging: { | ||
137 | value: false | ||
138 | }, | ||
139 | isDragging: { | ||
140 | serializable: true, | ||
141 | get:function () { | ||
142 | return this._isDragging; | ||
143 | }, | ||
144 | set:function (newVal) { | ||
145 | this._isDragging = newVal; | ||
146 | } | ||
147 | |||
148 | }, | ||
136 | 149 | ||
137 | draw:{ | 150 | draw:{ |
138 | value:function () { | 151 | value:function () { |
@@ -164,62 +177,73 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
164 | var useAbsolute = true; | 177 | var useAbsolute = true; |
165 | 178 | ||
166 | if (event.detail.source && event.detail.source !== "tween") { | 179 | if (event.detail.source && event.detail.source !== "tween") { |
167 | // check for correct element selection | 180 | |
168 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { | 181 | if(this.parentComponent.parentComponent.isSubproperty){ |
169 | console.log("Wrong element selected for this keyframe track"); | 182 | this.setStyleTweenProperty(event.detail); |
170 | } else { | 183 | } else { |
171 | if(useAbsolute){ | 184 | // check for correct element selection |
172 | this.setAbsoluteTweenProperties(event.detail); | 185 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { |
186 | console.log("Wrong element selected for this keyframe track"); | ||
173 | } else { | 187 | } else { |
174 | this.setRelativeTweenProperties(event.detail); | 188 | this.setTweenProperties(event.detail); |
175 | } | 189 | } |
176 | } | 190 | } |
177 | } | 191 | } |
178 | } | 192 | } |
179 | }, | 193 | }, |
180 | 194 | ||
181 | setAbsoluteTweenProperties:{ | 195 | setTweenProperties:{ |
182 | value:function (eventDetail) { | 196 | value:function (eventDetail) { |
183 | //console.log(eventDetail); | ||
184 | |||
185 | // top | ||
186 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ | 197 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ |
187 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; | 198 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; |
188 | } | 199 | } |
189 | |||
190 | // left | ||
191 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ | 200 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ |
192 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; | 201 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; |
193 | } | 202 | } |
194 | |||
195 | // width | ||
196 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ | 203 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ |
197 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; | 204 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; |
198 | } | 205 | } |
199 | |||
200 | // height | ||
201 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ | 206 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ |
202 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; | 207 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; |
203 | } | 208 | } |
204 | |||
205 | // skewX | ||
206 | |||
207 | // skewY | ||
208 | |||
209 | // rotation | ||
210 | |||
211 | // tell track to update css rule | 209 | // tell track to update css rule |
212 | this.parentComponent.parentComponent.updateKeyframeRule(); | 210 | this.parentComponent.parentComponent.updateKeyframeRule(); |
213 | |||
214 | // highlight the tween's span | ||
215 | this.tweenspan.highlightSpan(); | ||
216 | this.isTweenAnimated = true; | 211 | this.isTweenAnimated = true; |
217 | } | 212 | } |
218 | }, | 213 | }, |
219 | 214 | ||
220 | setRelativeTweenProperties:{ | 215 | setStyleTweenProperty:{ |
221 | value:function(eventDetail){ | 216 | value:function (eventDetail) { |
217 | //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); | ||
222 | //console.log(eventDetail); | 218 | //console.log(eventDetail); |
219 | if(eventDetail.type == "setProperties"){ | ||
220 | // need to ignore top, left, width, and height | ||
221 | //console.log(eventDetail.data.value[0]); | ||
222 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | ||
223 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
224 | |||
225 | } else if(eventDetail.type == "setColor"){ | ||
226 | var prop = this.parentComponent.parentComponent.trackEditorProperty; | ||
227 | this.tweenedProperties[prop] = eventDetail.data.value.color.css; | ||
228 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
229 | |||
230 | } else if(eventDetail.type == "setProperty"){ | ||
231 | // need to ignore top, left, width, and height | ||
232 | //console.log(eventDetail.data.value[0]); | ||
233 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | ||
234 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
235 | |||
236 | }else { | ||
237 | console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); | ||
238 | } | ||
239 | } | ||
240 | }, | ||
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(); | ||
223 | } | 247 | } |
224 | }, | 248 | }, |
225 | 249 | ||
@@ -232,7 +256,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
232 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); | 256 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); |
233 | this.application.ninja.timeline.selectLayer(selectIndex, true); | 257 | this.application.ninja.timeline.selectLayer(selectIndex, true); |
234 | 258 | ||
235 | // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline | 259 | // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline |
236 | this.application.ninja.timeline.deselectTweens(); | 260 | this.application.ninja.timeline.deselectTweens(); |
237 | this.application.ninja.timeline.selectedTweens.push(this); | 261 | this.application.ninja.timeline.selectedTweens.push(this); |
238 | 262 | ||
@@ -243,13 +267,23 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
243 | var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; | 267 | var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; |
244 | this.application.ninja.timeline.updateTimeText(currentMillisec); | 268 | this.application.ninja.timeline.updateTimeText(currentMillisec); |
245 | 269 | ||
246 | // move animated element to correct position on stage | 270 | if(this.parentComponent.parentComponent.isSubproperty){ |
247 | var currentTop = this.tweenedProperties["top"] + "px"; | 271 | // set property specific style on element |
248 | var currentLeft = this.tweenedProperties["left"] + "px"; | 272 | var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty]; |
249 | 273 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], this.parentComponent.parentComponent.trackEditorProperty, [currentValue], "Change", "tween"); | |
250 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); | 274 | console.log(currentValue); |
251 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); | 275 | } else { |
252 | 276 | // move animated element to correct position on stage | |
277 | var currentTop = this.tweenedProperties["top"] + "px"; | ||
278 | var currentLeft = this.tweenedProperties["left"] + "px"; | ||
279 | var currentWidth = this.tweenedProperties["width"] + "px"; | ||
280 | var currentHeight = this.tweenedProperties["height"] + "px"; | ||
281 | |||
282 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); | ||
283 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); | ||
284 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween"); | ||
285 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween"); | ||
286 | } | ||
253 | } | 287 | } |
254 | }, | 288 | }, |
255 | 289 | ||
@@ -257,10 +291,8 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
257 | value:function(){ | 291 | value:function(){ |
258 | // turn off event listener for element change | 292 | // turn off event listener for element change |
259 | this.eventManager.removeEventListener("elementChange", this, false); | 293 | this.eventManager.removeEventListener("elementChange", this, false); |
260 | |||
261 | // deselect the keyframe for this tween | 294 | // deselect the keyframe for this tween |
262 | this.keyframe.deselectKeyframe(); | 295 | this.keyframe.deselectKeyframe(); |
263 | } | 296 | } |
264 | } | 297 | } |
265 | |||
266 | }); | 298 | }); |