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