OSDN Git Service

Version 0.6.214, bug fixes X.KB.
[pettanr/clientJs.git] / 0.6.x / js / 02_dom / 10_XNodeAnime.js
1 \r
2 var X_NodeAnime_QUEUE           = [],\r
3         X_NodeAnime_uid             = 0,\r
4         X_NodeAnime_reserved        = false,\r
5         X_NodeAnime_updateTimerID   = 0,\r
6         X_NodeAnime_needsDetection  = false,\r
7         \r
8         X_NodeAnime_hasTransform    = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],\r
9         \r
10         X_NodeAnime_hasDXTransform  = 5.5 <= X_UA[ 'IE' ] && X_UA[ 'IE' ] < 9 && X_UA[ 'ActiveX' ], // IEHost が 11 の場合不可\r
11         \r
12         /* Opera mobile で  translateZ(0) が有効だと XY が 0 0 になる */\r
13         /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */\r
14         X_NodeAnime_translateZ      = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] &&\r
15                                                                         !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] &&\r
16                                                                         !( X_UA[ 'IE' ] === 11 ) && !( X_UA[ 'IEHost' ] === 11 ) ? ' translateZ(0)' : '',\r
17 \r
18 /*\r
19  * phase:\r
20  *  0: アニメーション無\r
21  *  1: 登録されたばかり\r
22  *  2: 準待機\r
23  *  3: 後続待機\r
24  *  4: 強制停止(GPU転送予約)\r
25  *  5: GPU解除待ち\r
26  *  6: 開始可能\r
27  *  7: アニメーション中\r
28  */\r
29 \r
30         X_NODE_ANIME_RESET = 1,\r
31         X_NODE_ANIME_STAY_GPU = 2,\r
32         \r
33         X_NodeAnime_DEFAULT = {\r
34                 x        : NaN,\r
35                 y        : NaN,\r
36                 toX      : NaN,\r
37                 toY      : NaN,\r
38                 fromX    : NaN,\r
39                 fromY    : NaN,\r
40                 rotate   : NaN, fromRotate   : NaN, toRotate   : NaN,\r
41                 skewX    : NaN, fromSkewX    : NaN, toSkewX    : NaN,\r
42                 skewY    : NaN, fromSkewY    : NaN, toSkewY    : NaN,\r
43                 scaleX   : 1,   fromScaleX   : 1,   toScaleX   : 1,\r
44                 scaleY   : 1,   fromScaleY   : 1,   toScaleY   : 1,\r
45                 alpha    : NaN,\r
46                 scrollX  : NaN, fromScrollX  : NaN, toScrollX  : NaN,\r
47                 scrollY  : NaN, fromScrollY  : NaN, toScrollY  : NaN //,\r
48                 //doScroll : false//,\r
49                 //duration : 0\r
50                 //phase, lazyRelease, easing, follower, releaseNow, inited, progress, fallback\r
51                 // fromTime, toTime\r
52         };\r
53 \r
54 /**\r
55  * GPU サポートの効いたアニメーションの設定\r
56  * <a href="https://outcloud.blogspot.jp/2015/12/pettanR-Node-Anime.html">ぺったんRフレームワークのアニメーションメソッド</a>\r
57  * @alias Node.prototype.animate\r
58  * @param {object} obj\r
59  * @return {Node} メソッドチェーン\r
60  * @example\r
61  * xnode.animate{\r
62  *       from       : {\r
63  *          x       : num,\r
64  *      y       : num,\r
65  *      opacity : 0.0, //~1.0\r
66  *      rotate  : deg,\r
67  *      skew    : deg,\r
68  *      skewX   : deg,\r
69  *      skewY   : deg,\r
70  *      scale   : num,\r
71  *      scaleX  : num,\r
72  *      scaleY  : num,\r
73  *      scrollX : num,\r
74  *      scrollY : num\r
75  *    },\r
76  *   to          : {}, // from と同じ\r
77  *   duration    : ms,\r
78  *   lazyRelease : ms,\r
79  *   easing      : 'quadratic', // function, 'circular', 'back', 'bounce', 'elastic'\r
80  *   fallback    : bitFlag // 16:DXTransform, 8:css-p, 4:zoom(s) > 2:fontSize(s) > 1:width&height(vh,s)\r
81  *   ** tree にいなくてもアニメーションを行いイベントを発生\r
82  *   ** SVG transfrom\r
83  *   fallbackWidth, fallbackHeight, transformOrigin( 0.5, 0.5 )\r
84  * }\r
85  */\r
86 function X_Node_animate( obj ){\r
87         var list        = X_NodeAnime_QUEUE,\r
88                 from        = obj[ 'from' ] || {},\r
89                 dest        = obj[ 'to' ]   || {},\r
90                 duration    = obj[ 'duration' ],\r
91                 lazyRelease = obj[ 'lazyRelease' ],\r
92                 easing      = obj[ 'easing' ],\r
93                 fallback    = obj[ 'fallback' ],\r
94                 a, sameRate;\r
95                 \r
96         obj = this[ '_anime' ];\r
97         \r
98         if( !( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ){\r
99                 alert( '@animate 要素はツリーに追加されていません!' );\r
100                 // それでもアニメーションしてタイマー代わりにするとか、、、?\r
101                 return this;\r
102         };\r
103         \r
104         if( !obj ){\r
105                 this[ '_anime' ] = obj = X_Object_copy( X_NodeAnime_DEFAULT );\r
106                 a = this[ '_css' ] && parseFloat( this[ '_css' ].opacity );\r
107                 if( 0 <= a ) obj.alpha = a;\r
108         };\r
109                 \r
110 // form :\r
111         obj.fromX       = obj.x       = X_NodeAnime_getFinite( from[ 'x' ],       obj.x );\r
112         obj.fromY       = obj.y       = X_NodeAnime_getFinite( from[ 'y' ],       obj.y );\r
113         obj.fromRotate  = obj.rotate  = X_NodeAnime_getFinite( from[ 'rotate' ],  obj.rotate );\r
114         obj.fromSkewX   = obj.skewX   = X_NodeAnime_getFinite( from[ 'skewX' ],   from[ 'skew' ],  obj.skewX );\r
115         obj.fromSkewY   = obj.skewY   = X_NodeAnime_getFinite( from[ 'skewY' ],   from[ 'skew' ],  obj.skewY );\r
116         obj.fromScaleX  = obj.scaleX  = X_NodeAnime_getFinite( from[ 'scaleX' ],  from[ 'scale' ], obj.scaleX );\r
117         obj.fromScaleY  = obj.scaleY  = X_NodeAnime_getFinite( from[ 'scaleY' ],  from[ 'scale' ], obj.scaleY );\r
118         obj.fromAlpha   = obj.alpha   = X_NodeAnime_getFinite( from[ 'opacity' ], obj.alpha );\r
119         obj.fromScrollX = obj.scrollX = X_NodeAnime_getFinite( from[ 'scrollX' ], obj.scrollX );\r
120         obj.fromScrollY = obj.scrollY = X_NodeAnime_getFinite( from[ 'scrollY' ], obj.scrollY );\r
121  // to :\r
122         obj.toX                       = X_NodeAnime_getFinite( dest[ 'x' ],       obj.x );\r
123         obj.toY                       = X_NodeAnime_getFinite( dest[ 'y' ],       obj.y );\r
124         obj.toRotate                  = X_NodeAnime_getFinite( dest[ 'rotate' ],  obj.rotate );\r
125         obj.toSkewX                   = X_NodeAnime_getFinite( dest[ 'skewX' ],   dest[ 'skew'  ], obj.skewX );\r
126         obj.toSkewY                   = X_NodeAnime_getFinite( dest[ 'skewY' ],   dest[ 'skew'  ], obj.skewY );\r
127         obj.toScaleX                  = X_NodeAnime_getFinite( dest[ 'scaleX' ],  dest[ 'scale' ], obj.scaleX );\r
128         obj.toScaleY                  = X_NodeAnime_getFinite( dest[ 'scaleY' ],  dest[ 'scale' ], obj.scaleY );\r
129         obj.toAlpha                   = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.alpha );\r
130         obj.toScrollX                 = X_NodeAnime_getFinite( dest[ 'scrollX' ], obj.scrollX );\r
131         obj.toScrollY                 = X_NodeAnime_getFinite( dest[ 'scrollY' ], obj.scrollY );\r
132 \r
133         if( X_Type_isFinite( obj.toX ) && X_Type_isNaN( obj.x ) ) obj.x = obj.fromX = 0;\r
134         if( X_Type_isFinite( obj.toY ) && X_Type_isNaN( obj.y ) ) obj.y = obj.fromY = 0;\r
135         \r
136         if( obj.toRotate && X_Type_isNaN( obj.rotate ) ) obj.rotate = obj.fromRotate = 0;\r
137         if( obj.toSkewX  && X_Type_isNaN( obj.skewX  ) ) obj.skewX  = obj.fromSkewX  = 0;\r
138         if( obj.toSkewY  && X_Type_isNaN( obj.skewY  ) ) obj.skewY  = obj.fromSkewY  = 0;\r
139 \r
140         obj.duration    = 0 <= duration    && X_Type_isFinite( duration    ) ? duration    : 0;\r
141         obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0;\r
142         obj.easing      = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];\r
143         obj.inited      = false;\r
144         obj.transform   = ( X_Type_isFinite( obj.x ) || X_Type_isFinite( obj.y ) || obj.lazyRelease ) && X_NodeAnime_hasTransform;\r
145         obj.doScroll    = 0 <= obj.toScrollX || 0 <= obj.toScrollY;\r
146         obj.fallback    = 0;\r
147         obj.altX        = fallback & 8  ? 'right'  : 'left'; \r
148         obj.altY        = fallback & 16 ? 'bottom' : 'top';\r
149         \r
150         // scale\r
151         if( obj.toScaleX !== 1 || obj.fromScaleX !== 1 || obj.toScaleY !== 1 || obj.fromScaleY !== 1 ){\r
152                 sameRate = obj.fromScaleX === obj.fromScaleY && obj.toScaleX === obj.toScaleY;\r
153                 \r
154                 if( X_NodeAnime_hasTransform ){\r
155                         obj.transform = true;\r
156                 } else\r
157                 if( X_NodeAnime_hasDXTransform && ( fallback & 32 ) ){ // DX Transform\r
158                         obj.fallback = 32;\r
159                 } else\r
160                 if( ( fallback & 4 ) && sameRate ){ // zoom\r
161                         obj.fallback = 4;\r
162                 } else\r
163                 if( ( fallback & 2 ) && sameRate ){ // fontSize\r
164                         obj.fallback = 2;\r
165                 } else\r
166                 if( fallback & 1 ){ // width & height\r
167                         obj.fallback = 1;\r
168                 };\r
169         };\r
170 \r
171         // rotate, skew\r
172         if( X_Type_isFinite( obj.rotate ) || X_Type_isFinite( obj.skewX ) || X_Type_isFinite( obj.skewY ) ){\r
173                 if( X_NodeAnime_hasTransform ){\r
174                         obj.transform = true;\r
175                 } else\r
176                 if( X_NodeAnime_hasDXTransform && ( fallback & 32 ) ){ // DX Transform\r
177                         obj.fallback = 32;\r
178                 };\r
179         };\r
180 \r
181         if( !obj.duration && 6 <= obj.phase ){\r
182                 this[ 'stop' ](); // 現在値で停止\r
183         } else {\r
184                 if( !obj.phase ){\r
185                         list[ list.length ] = this;\r
186                         obj.phase = 1;\r
187                         obj.uid   = ++X_NodeAnime_uid;\r
188                         X_NodeAnime_needsDetection = true;\r
189                 } else\r
190                 if( obj.phase < 4 ){\r
191                         list.splice( list.indexOf( this ), 1 );\r
192                         list[ list.length ] = this;\r
193                         obj.uid   = ++X_NodeAnime_uid;\r
194                         X_NodeAnime_needsDetection = true;\r
195                 } else\r
196                 if( obj.duration ){\r
197                         // リストの先頭にいるため検査不要でアニメーション開始可能 4, 5, 6, 7\r
198                         obj.phase = 6;\r
199                 } else\r
200                 // GPU 転送予約、または transform や opacity の値のみ設定\r
201                 if( obj.phase !== 5 ){ // GPU解除待ち ではない -> 4. 6, 7\r
202                         obj.phase      = 4; // 強制停止(GPU転送予約)または値のみ更新\r
203                         obj.releaseNow = false; // TODO folower がいるため GPU 転送できないケースあり\r
204                         X_NodeAnime_needsDetection = true;\r
205                 };\r
206                 \r
207                 if( !X_NodeAnime_reserved ){\r
208                         X_NodeAnime_reserved = true;\r
209                         \r
210                         if( X_Node_updateTimerID ){\r
211                                 if( X_NodeAnime_updateTimerID ) X_NodeAnime_updateTimerID = X_Timer_cancelFrame( X_NodeAnime_updateTimerID );\r
212 \r
213                                 X_System[ 'listen' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );\r
214                         } else {\r
215                                 X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );\r
216                                 X_NodeAnime_updateTimerID = X_Timer_requestFrame( X_NodeAnime_updateAnimations );\r
217                         };\r
218                 };      \r
219         };\r
220 \r
221         return this;\r
222 };\r
223 \r
224 function X_NodeAnime_getFinite( a, b, c ){\r
225         if( a || a === 0 ) return a;\r
226         if( b || b === 0 ) return b;\r
227         if( c || c === 0 ) return c;\r
228         return NaN;\r
229 };\r
230 \r
231 /*\r
232  * 1.アニメーション中の要素の停止 ->後続アニメーションの開始\r
233  * 2.アニメーション待機中の要素の停止 -> 後続アニメーションの再調査\r
234  */\r
235 /**\r
236  * アニメーションの停止。\r
237  * @alias Node.prototype.stop\r
238  * @return {Node} メソッドチェーン\r
239  */\r
240 function X_Node_stop( option ){\r
241         var obj    = this[ '_anime' ],\r
242                 list   = X_NodeAnime_QUEUE,\r
243                 rm;\r
244         \r
245         if( !obj || !obj.phase ) return this;\r
246 \r
247         switch( obj.phase ){\r
248                 case 6 : // アニメーション開始可能 ??\r
249                 case 2 : // 準待機\r
250                 case 3 : // アニメーション待機中\r
251                         X_NodeAnime_needsDetection = true;\r
252                 case 1 :\r
253                         rm = true;\r
254 \r
255                 case 4 : // 強制停止(GPU転送予約)\r
256                 case 7 : // アニメーション中\r
257                         if( option & X_NODE_ANIME_RESET ){\r
258                                 X_Object_override( obj, X_NodeAnime_DEFAULT );\r
259                         }; // TODO 終了値で停止も,,,\r
260                         \r
261                         // obj.canceled = true;\r
262                         \r
263                         if( rm ) break; // 1,2,3,6 の場合ここまで\r
264                 \r
265                         obj.toX       = obj.x;\r
266                         obj.toY       = obj.y;\r
267                         obj.toRotate  = obj.rotate;\r
268                         obj.toSkewX   = obj.skewX;\r
269                         obj.toSkewY   = obj.skewY;\r
270                         obj.toScaleX  = obj.scaleX;\r
271                         obj.toScaleY  = obj.scaleY;\r
272                         obj.toAlpha   = obj.alpha;\r
273                         obj.toScrollX = obj.scrollX;\r
274                         obj.toScrollY = obj.scrollY;\r
275 \r
276                         obj.phase     = 4; // 強制解除\r
277                         X_NodeAnime_needsDetection = true;\r
278                         \r
279                 case 5 : // GPU解除待ち\r
280                         obj.releaseNow = !( option & X_NODE_ANIME_STAY_GPU );\r
281                         break;\r
282         };\r
283 \r
284         if( rm ){\r
285                 list.splice( list.indexOf( this ), 1 );\r
286                 obj.phase = 0;  \r
287         };\r
288 \r
289         return this;\r
290 };\r
291 /*\r
292  * remove(append swap 等でない部的に呼ばれている場合も), kill 時に\r
293  */\r
294 function X_NodeAnime_stopNow( xnode ){\r
295         var obj   = xnode[ '_anime' ],\r
296                 flags = xnode[ '_flags' ],\r
297                 list  = X_NodeAnime_QUEUE,\r
298                 skipUpdate;\r
299         \r
300         // if( !obj || !obj.phase ) return; 呼び出し側で検証済\r
301 \r
302         X_NodeAnime_needsDetection = true;\r
303         list.splice( list.indexOf( xnode ), 1 );\r
304         obj.phase = 0;\r
305 \r
306         // この部分 startUpdate へ?\r
307         if( flags & ~X_Node_BitMask_RESET_GPU ){\r
308                 skipUpdate = flags & X_NodeFlags_GPU_RESERVED;\r
309                 ( flags & X_NodeFlags_GPU_RELEASE_RESERVED ) || X_NodeAnime_updatePosition( xnode, obj, 0.5, false );\r
310                 skipUpdate || ( xnode[ '_rawObject' ].style.cssText = X_Node_CSS_objToCssText( xnode ) );\r
311                 xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
312         };\r
313 };\r
314 \r
315 /*\r
316  * 1. 新規アニメーションが現在アニメーション中の要素の親か子であればアニメーションを待機\r
317  */\r
318 function X_NodeAnime_detectWaitAnimation( xnode, duration, isTest ){\r
319         var list = X_NodeAnime_QUEUE,\r
320                 i    = 0, _xnode, obj;\r
321         \r
322         for( ; _xnode = list[ i ]; ++i ){\r
323                 if( _xnode === xnode ) break;\r
324                 \r
325                 // アニメーションの優先度はリストにいる順\r
326                 // まず先行する後続待機要素の中に、親子関係のものがいないか?探す\r
327                 if( _xnode[ '_anime' ].phase <= 3 ){\r
328                         if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){ // 祖先か?見た方が早そう\r
329                                 // -> いる、このような要素が複数いる場合、誰に後続すればいいか?判然としないため、準待機フラグを立てる\r
330                                 return 2;\r
331                         };\r
332                 };\r
333         };\r
334 \r
335         // -> いない、アニメーション中(開始可能も)の要素の中に、親子関係のものがいないか?探す\r
336         //           -> いる、待機状態へ\r
337         //           -> いない、アニメーションが可能\r
338         for( i = 0; _xnode = list[ i ]; ++i ){\r
339                 if( _xnode === xnode ) break;\r
340                 obj = _xnode[ '_anime' ];\r
341                 if( 6 <= obj.phase ){\r
342                         if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){\r
343                                 return isTest ? 3 : _xnode;\r
344                         };\r
345                 };\r
346         };\r
347         // アニメーション可能\r
348         return duration ? 6 : 4; // duration がない場合は、アニメーション強制停止へ進みそこから GPU 解除待ちへ\r
349 };\r
350 \r
351 function X_NodeAnime_updateAnimations( e ){\r
352         var list = X_NodeAnime_QUEUE,\r
353                 now  = X_Timer_now(),\r
354                 c    = false,\r
355                 i, xnode, obj, _xnode,\r
356                 rm, progress, easing, lazy;\r
357         \r
358         if( X_NodeAnime_needsDetection ){\r
359                 X_NodeAnime_needsDetection = false;\r
360                 \r
361                 //\r
362                 list.sort( X_NodeAnime_sortAnimationNode );\r
363                 \r
364                 for( i = 0; xnode = list[ i ]; ++i ){\r
365                         obj = xnode[ '_anime' ];\r
366                         \r
367                         if( obj.phase <= 3 ){\r
368                                 if( !X_Type_isNumber( obj.phase = _xnode = X_NodeAnime_detectWaitAnimation( xnode, obj.duration ) ) ){\r
369                                         _xnode[ '_anime' ].follower = true;\r
370                                         obj.phase = 3; // 後続待機\r
371                                 };\r
372                         } else {\r
373                                 obj.follower = false;\r
374                         };\r
375                 };\r
376         };\r
377         \r
378         for( i = list.length; i; ){\r
379                 rm    = false;\r
380                 xnode = list[ --i ];\r
381                 obj   = xnode[ '_anime' ];\r
382 \r
383                 switch( obj.phase ){\r
384                         case 7 : // アニメーション中\r
385                                 if( now < obj.toTime ){\r
386                                         obj.progress = progress = ( now - obj.fromTime ) / obj.duration;\r
387                                         easing      = obj.easing( progress );\r
388                                         obj.x       = ( obj.toX       - obj.fromX       ) * easing + obj.fromX;\r
389                                         obj.y       = ( obj.toY       - obj.fromY       ) * easing + obj.fromY;\r
390                                         obj.rotate  = ( obj.toRotate  - obj.fromRotate  ) * easing + obj.fromRotate;\r
391                                         obj.skewX   = ( obj.toSkewX   - obj.fromSkewX   ) * easing + obj.fromSkewX;\r
392                                         obj.skewY   = ( obj.toSkewY   - obj.fromSkewY   ) * easing + obj.fromSkewY;\r
393                                         obj.scaleX  = ( obj.toScaleX  - obj.fromScaleX  ) * easing + obj.fromScaleX;\r
394                                         obj.scaleY  = ( obj.toScaleY  - obj.fromScaleY  ) * easing + obj.fromScaleY;\r
395                                         obj.alpha   = ( obj.toAlpha   - obj.fromAlpha   ) * easing + obj.fromAlpha;\r
396                                         obj.scrollX = ( obj.toScrollX - obj.fromScrollX ) * easing + obj.fromScrollX;\r
397                                         obj.scrollY = ( obj.toScrollY - obj.fromScrollY ) * easing + obj.fromScrollY;\r
398                                         X_NodeAnime_updatePosition( xnode, obj, progress, true );\r
399                                         c = true;\r
400                                         break;\r
401                                 };\r
402                                 // アニメーション終了\r
403                                 xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_END );\r
404                                 \r
405                         case 4 : // 強制停止(GPU転送予約)または transform や opacity の値のみ設定\r
406                                 lazy = !obj.follower && !obj.releaseNow && obj.lazyRelease;\r
407                                 X_NodeAnime_updatePosition( xnode, obj, 1, !!lazy );\r
408 \r
409                                 //if( obj.canceled ){\r
410                                 //      xnode[ 'asyncDispatch' ]( X_EVENT_CANCELED );\r
411                                 //} else {\r
412                                         \r
413                                 //};\r
414                                 \r
415                                 if( lazy ){\r
416                                         console.log( 'アニメーション終了(' + obj.phase + ') -> GPU 解除待機 ' + lazy );\r
417                                         obj.toTime = now + lazy;\r
418                                         obj.phase = 5; // GPU解除待ち\r
419                                         c = true;\r
420                                 } else {\r
421                                         console.log( 'アニメーション終了(' + obj.phase + ') -> ' );\r
422                                         rm = true;\r
423                                 };\r
424                                 break;\r
425 \r
426                         case 6 : // アニメーション開始可能\r
427                                 obj.fromTime = now;\r
428                                 obj.toTime   = now + obj.duration;\r
429                                 obj.phase    = 7; // アニメーション中\r
430                                 obj.progress = 0;                       \r
431                                 xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_START );\r
432                                 c = true;\r
433                                 //obj.canceled  = false;\r
434                                 ( !obj.inited || X_NodeAnime_translateZ ) && X_NodeAnime_updatePosition( xnode, obj, 0, true );\r
435                                 break;\r
436                         \r
437                         case 5 : // GPU解除待ち\r
438                                 if( obj.toTime <= now || obj.follower || obj.releaseNow ){\r
439                                         X_NodeAnime_translateZ && X_NodeAnime_updatePosition( xnode, obj, 1, false );\r
440                                         rm = true;\r
441                                 } else {\r
442                                         c = true;\r
443                                 };\r
444                                 break;\r
445                         \r
446                         default : // 2 or 3\r
447                                 // 待機状態でも親要素が GPU 化していなければ、開始値をセットすることは可能\r
448                                 obj.inited || X_NodeAnime_updatePosition( xnode, obj, 0, false );\r
449                                 obj.inited = true;\r
450                                 break;\r
451                 };\r
452                 \r
453                 obj.releaseNow = false;\r
454                 \r
455                 if( rm ){\r
456                         X_NodeAnime_translateZ && xnode[ 'asyncDispatch' ]( X_EVENT_GPU_RELEASED );\r
457                         // 後続のアニメーションがある場合\r
458                         if( obj.follower ) X_NodeAnime_needsDetection = c = true;\r
459                         list.splice( i, 1 );\r
460                         obj.phase = 0;\r
461                 };\r
462         };\r
463         \r
464         //c && console.log( 'anime... ' + X_Node_updateTimerID );\r
465         \r
466         if( X_NodeAnime_reserved = c ){\r
467                 if( X_Node_updateTimerID ){\r
468                         // scrollbox では X_System X_EVENT_UPDATED は不可。。。\r
469                         !e || e.type !== X_EVENT_UPDATED ?\r
470                                 X_System[ 'listen' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations ) :\r
471                                 X_NodeAnime_updateTimerID && X_Timer_cancelFrame( X_NodeAnime_updateTimerID );\r
472                         X_NodeAnime_updateTimerID = 0;\r
473                 } else {\r
474                         X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );\r
475                         X_NodeAnime_updateTimerID = X_Timer_requestFrame( X_NodeAnime_updateAnimations );\r
476                 };\r
477         } else {\r
478                 X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );\r
479                 X_NodeAnime_updateTimerID = 0;\r
480         };\r
481 };\r
482 \r
483 /*\r
484  * アニメーション開始、アニメーション中、強制停止(GPU転送予約)、GPU解除待ち の要素をリストの先頭に\r
485  */\r
486 function X_NodeAnime_sortAnimationNode( xnode1, xnode2 ){\r
487         var a = 4 <= xnode1[ '_anime' ].phase,\r
488                 b = 4 <= xnode2[ '_anime' ].phase;\r
489         \r
490     if( ( a && b ) && ( !a && !b ) ){ // Chrome のみ\r
491         return xnode1[ '_anime' ].uid - xnode2[ '_anime' ].uid;\r
492     };\r
493     return a ? -1 : 1;\r
494 };\r
495 \r
496 function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){\r
497         var str = '',\r
498                 x, y, rotate, skewX, skewY, scaleX, scaleY, alpha,\r
499                 scrollX, scrollY;\r
500         \r
501         if( ratio === 1 ){\r
502                 x      = obj.x = obj.toX;\r
503                 y      = obj.y = obj.toY;\r
504                 rotate = X_Node_CSS_ieMathRangeFix( obj.rotate = obj.toRotate );\r
505                 skewX  = X_Node_CSS_ieMathRangeFix( obj.skewX  = obj.toSkewX );\r
506                 skewY  = X_Node_CSS_ieMathRangeFix( obj.skewY  = obj.toSkewY );\r
507                 scaleX = obj.scaleX = obj.toScaleX;\r
508                 scaleY = obj.scaleY = obj.toScaleY;\r
509                 alpha  = obj.alpha  = obj.toAlpha;\r
510                 obj.scrollX = obj.toScrollX;\r
511                 obj.scrollY = obj.toScrollY;\r
512         } else {\r
513                 x      = obj.x;\r
514                 y      = obj.y;\r
515                 rotate = X_Node_CSS_ieMathRangeFix( obj.rotate );\r
516                 skewX  = X_Node_CSS_ieMathRangeFix( obj.skewX );\r
517                 skewY  = X_Node_CSS_ieMathRangeFix( obj.skewY );\r
518                 scaleX = obj.scaleX;\r
519                 scaleY = obj.scaleY;\r
520                 alpha  = obj.alpha;\r
521         };\r
522         \r
523         //console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU );\r
524         if( obj.transform ){\r
525                 if( ( x === x || y === y ) && ( x !== 0 && y !== 0 ) ) str += ' translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)';\r
526                 if( rotate < 0 || 0 < rotate ) str += ' rotate(' + rotate + 'deg)'; // opera は rad?\r
527                 if( skewX  < 0 || 0 < skewX  ) str += ' skewX('  + skewX  + 'deg)';\r
528                 if( skewY  < 0 || 0 < skewY  ) str += ' skewY('  + skewY  + 'deg)';\r
529                 if( scaleX < 1 || 1 < scaleX ) str += ' scaleX(' + scaleX + ')';\r
530                 if( scaleY < 1 || 1 < scaleY ) str += ' scaleY(' + scaleY + ')';\r
531                 xnode[ 'css' ]( 'transform', ( str ? str.substr( 1 ) : '' ) + ( useGPU ? X_NodeAnime_translateZ : '' ) );\r
532                 \r
533                 if( X_NodeAnime_translateZ ){\r
534                         if( useGPU ){\r
535                                 if( xnode[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){\r
536                                         xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
537                                         xnode[ '_flags' ] |= X_NodeFlags_GPU_NOW;\r
538                                 } else\r
539                                 if( !( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ) ){\r
540                                         xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
541                                         xnode[ '_flags' ] |= X_NodeFlags_GPU_RESERVED;\r
542                                 };\r
543                         } else {\r
544                                 if( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ){\r
545                                         xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
546                                         xnode[ '_flags' ] |= X_NodeFlags_GPU_RELEASE_RESERVED;\r
547                                 } else\r
548                                 if( xnode[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){\r
549                                         xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
550                                 };\r
551                         };              \r
552                 };              \r
553         } else\r
554         if( obj.fallback === 32 ){\r
555                 xnode[ 'css' ]( 'dxtransform', [ x | 0, y | 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY, obj.altX, obj.altY ] );\r
556         } else {\r
557                 x === x && xnode[ 'css' ]( obj.altX, ( x | 0 ) + 'px' );\r
558                 y === y && xnode[ 'css' ]( obj.altY, ( y | 0 ) + 'px' );\r
559                 \r
560                 switch( obj.fallback ){\r
561                         case 4 :\r
562                                 xnode[ 'css' ]( 'zoom', scaleX );\r
563                                 break;\r
564                         case 2 :\r
565                                 xnode[ 'css' ]( 'fontSize', scaleX + 'em' );\r
566                                 break;\r
567                         case 1 :\r
568                                 \r
569                                 break;\r
570                 };\r
571         };\r
572         \r
573         if( obj.doScroll && xnode[ '_rawObject' ] ){\r
574                 console.log( 'ok ' + ratio );\r
575                 xnode[ '_rawObject' ].scrollLeft = obj.scrollX | 0;\r
576                 xnode[ '_rawObject' ].scrollTop  = obj.scrollY | 0;\r
577                 //X_Node_reserveUpdate();\r
578         };\r
579         \r
580         alpha === alpha && xnode[ 'css' ]( 'opacity', alpha );\r
581 };\r
582 \r
583 \r
584 var\r
585         X_NodeAnime_ease = {\r
586                 'quadratic' : function (k) {\r
587                                 return k * ( 2 - k );\r
588                                 /*{\r
589                         style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\r
590                         fn: function (k) {\r
591                                 return k * ( 2 - k );\r
592                         }*/\r
593                 },\r
594                 'circular' : function (k) {\r
595                                 return Math.sqrt( 1 - ( --k * k ) );\r
596                         /*style: 'cubic-bezier(0.1, 0.57, 0.1, 1)',     // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 1)\r
597                         fn: function (k) {\r
598                                 return Math.sqrt( 1 - ( --k * k ) );\r
599                         }*/\r
600                 },\r
601                 'back' : function (k) {\r
602                                 return --k * k * ( 5 * k + 4 ) + 1;\r
603                         /*style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\r
604                         fn: function (k) {\r
605                                 var b = 4;\r
606                                 return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1;\r
607                         }*/\r
608                 },\r
609                 'bounce' : function (k, X) {\r
610                                 X = 7.5625;\r
611                                 if ( k < ( 1 / 2.75 ) ) {\r
612                                         return X * k * k;\r
613                                 } else\r
614                                 if ( k < ( 2 / 2.75 ) ) {\r
615                                         return X * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;\r
616                                 } else\r
617                                 if ( k < ( 2.5 / 2.75 ) ) {\r
618                                         return X * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;\r
619                                 } else {\r
620                                         return X * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;\r
621                                 }\r
622                         /*style: '',\r
623                         fn: function (k) {\r
624                                 if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {\r
625                                         return 7.5625 * k * k;\r
626                                 } else if ( k < ( 2 / 2.75 ) ) {\r
627                                         return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;\r
628                                 } else if ( k < ( 2.5 / 2.75 ) ) {\r
629                                         return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;\r
630                                 } else {\r
631                                         return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;\r
632                                 }\r
633                         }*/\r
634                 },\r
635                 'elastic' : function (k) {\r
636                                 return k === 0 ? 0 : k === 1 ? 1 : ( 0.4 * Math.pow( 2, - 10 * k ) * Math.sin( ( k - 0.055 ) * 28.56 ) + 1 );\r
637                         /*style: '',\r
638                         fn: function (k) {\r
639                                 var f = 0.22,\r
640                                         e = 0.4;\r
641 \r
642                                 if ( k === 0 ) { return 0; }\r
643                                 if ( k == 1 ) { return 1; }\r
644 \r
645                                 return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 );\r
646                         } */\r
647                 }\r
648         };\r