0.6.x/js/02_dom/10_XNodeAnime.js

   1 \r
   2 var\r
   3         ease = {\r
   4                 quadratic: {\r
   5                         style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\r
   6                         fn: function (k) {\r
   7                                 return k * ( 2 - k );\r
   8                         }\r
   9                 },\r
  10                 circular: {\r
  11                         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
  12                         fn: function (k) {\r
  13                                 return Math.sqrt( 1 - ( --k * k ) );\r
  14                         }\r
  15                 },\r
  16                 back: {\r
  17                         style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\r
  18                         fn: function (k) {\r
  19                                 var b = 4;\r
  20                                 return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1;\r
  21                         }\r
  22                 },\r
  23                 bounce: {\r
  24                         style: '',\r
  25                         fn: function (k) {\r
  26                                 if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {\r
  27                                         return 7.5625 * k * k;\r
  28                                 } else if ( k < ( 2 / 2.75 ) ) {\r
  29                                         return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;\r
  30                                 } else if ( k < ( 2.5 / 2.75 ) ) {\r
  31                                         return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;\r
  32                                 } else {\r
  33                                         return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;\r
  34                                 }\r
  35                         }\r
  36                 },\r
  37                 elastic: {\r
  38                         style: '',\r
  39                         fn: function (k) {\r
  40                                 var f = 0.22,\r
  41                                         e = 0.4;\r
  42 \r
  43                                 if ( k === 0 ) { return 0; }\r
  44                                 if ( k == 1 ) { return 1; }\r
  45 \r
  46                                 return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 );\r
  47                         }\r
  48                 }\r
  49         };\r
  50                 \r
  51 // 新規アニメーションが追加された場合、\r
  52 // tree が dirty なら AFTER_COMMIT を待つ\r
  53 // 1) xnode の既存アニメーションとの親子関係の調査\r
  54 // 親なら -> 既存アニメーションの GPU レイヤー解除\r
  55 // 子なら -> GPU レイヤーを設定しない\r
  56 // 2) 目標座標のセット\r
  57 // 3) アニメーション完了後も GPU レイヤーはしばらく解除しない スクロール等の連続アニメーション時に GPU 転送時間で画面ががたつくから\r
  58 // アニメ中の remove\r
  59 \r
  60 var X_Node_ANIMATIONS            = [],\r
  61         X_Node_Anime_reserved        = false,\r
  62         X_Node_Anime_updateTimerID   = 0,\r
  63         X_Node_Anime_needsDetection  = false,\r
  64         X_Node_Anime_hasTransform    = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],\r
  65         /* Opera mobile で  translateZ(0) が有効だと XY が 0 0 になる */\r
  66         /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox, 手当てが済むまでここは常に false */\r
  67         X_Node_Anime_translateZ      = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '',\r
  68         /* Opera12(XP,8.1) 切った方がスムース, win Safari3 で、たまに動作が止まってしまう、、、 */\r
  69         X_Node_Anime_hasTransition   = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X_UA[ 'Opera' ] && !( X_UA[ 'Webkit' ]  <= 528.16 ),\r
  70         X_Node_Anime_transitionProps = X_Node_Anime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top',\r
  71         // transitionEnd イベント中に要素の更新( X_Node_startUpdate() )ができるか？\r
  72         // iOS3+4 では可能、iOS6.1.5 で不可。TODO iOS5　及び他の環境で調査。ダメな場合、anime.html が正しく描画されない。\r
  73         X_Node_updateOnTransitionEnd = X_UA[ 'iOS' ] < 6,\r
  74         X_Node_Anime_onTransition    = false;\r
  75 \r
  76 // gpu化だけ transformX , willChange\r
  77 // 終了位置の変更\r
  78 // 中断\r
  79 \r
  80 /*\r
  81  * TODO : scale,  ActiveX transform, zoom, fontSizeScale\r
  82  * TODO : rotate, ActiveX transform -> 位置補正のために size 情報が必要なので、commitUpdate 後に計算して適用\r
  83  * TODO : matrix\r
  84  * TODO : skew\r
  85  * TODO : filter\r
  86  * TODO 前回位置からの継続\r
  87  */\r
  88 Node.prototype.animate = function( start, dest, duration, easing, wait ){\r
  89         var isNew = !this._anime,\r
  90                 obj   = this._anime || ( this._anime = {} );\r
  91         \r
  92         obj.duration  = 0 <= duration && X_Type_isFinite( duration ) ? duration : 500;\r
  93         obj.easing    = ease[ easing ] || ease.circular;\r
  94         // 現在 GPUレイヤーのtop になっているか？将来については phase で判定\r
  95         obj.gpuParent = obj.gpuParent || false;\r
  96         obj.phase     = duration === 0 ? 9 : obj.phase === 9 ? 9 : 0; //\r
  97         obj.wait      = X_Type_isFinite( wait ) ? wait : 1000;\r
  98                 \r
  99         obj.startTime = X_Timer_now();\r
 100         obj.startX    = ( start.x || start.x === 0 ) ? start.x : obj.x || 0;\r
 101         obj.startY    = ( start.y || start.y === 0 ) ? start.y : obj.y || 0;\r
 102         obj.startA    = 0 <= start.opacity && start.opacity <= 1 ? start.opacity : obj.a || 1;\r
 103         \r
 104         obj.destTime  = obj.startTime + obj.duration;\r
 105         obj.destX     = ( dest.x || dest.x === 0 ) ? dest.x : obj.destX || 0;\r
 106         obj.destY     = ( dest.y || dest.y === 0 ) ? dest.y : obj.destY || 0;\r
 107         obj.destA     = 0 <= dest.opacity && dest.opacity <= 1 ? dest.opacity : obj.destA || 1;\r
 108 \r
 109         X_Node_ANIMATIONS.indexOf( this ) === -1 &&\r
 110                 ( X_Node_ANIMATIONS[ X_Node_ANIMATIONS.length ] = this );\r
 111 \r
 112         \r
 113         if( X_Node_Anime_onTransition ) return this;\r
 114 \r
 115         if( X_Node_Anime_hasTransition ){\r
 116                 \r
 117                 if( obj.gpuTimerID ){\r
 118                         X.Timer.remove( obj.gpuTimerID );\r
 119                         delete obj.gpuTimerID;\r
 120                 };              \r
 121                 \r
 122                 X_Node_Anime_needsDetection = true;\r
 123                 \r
 124                 X_Node_Anime_reserveUpdate( true );\r
 125         } else {\r
 126                 X_System.unlisten( X_Event.UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
 127                 X_Node_Anime_updateTimerID || ( X_Node_Anime_updateTimerID = X.Timer.requestFrame( X_Node_Anime_updateAnimationsNoTransition ) );\r
 128                 \r
 129                 isNew && this.dispatch( { type : X_Event.ANIME_START, gpu : false } );\r
 130         };\r
 131         \r
 132         console.log( 'animate ' + this._id + ' y:' + obj.startX + ' > ' + obj.destX + ' d:' + obj.duration );\r
 133         \r
 134         return this;\r
 135 };\r
 136 \r
 137 Node.prototype.stop = function(){\r
 138         var obj = this._anime;\r
 139         if( !obj ) return;\r
 140         if( X_Node_Anime_hasTransition ){\r
 141                 obj.phase = 100;\r
 142                 X_Node_Anime_needsDetection = true;\r
 143                 X_Node_Anime_reserveUpdate();\r
 144         } else {\r
 145                 X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );\r
 146                 //obj.gpuTimerID && X.Timer.remove( obj.gpuTimerID );\r
 147                 delete this._anime;             \r
 148         };\r
 149         return this;\r
 150 };\r
 151 \r
 152 function X_Node_Anime_reserveUpdate( before ){\r
 153         if( !X_Node_Anime_reserved ){\r
 154                 X_Node_Anime_reserved = true;\r
 155                 \r
 156                 if( X_Node_updateTimerID ){\r
 157                         console.log( before ? '> BEFORE_UPDATE' : '> UPDATED' );\r
 158                         before = false;\r
 159                         X_System.listenOnce( before ? X_Event.BEFORE_UPDATE : X_Event.UPDATED, X_Node_Anime_updateAnimations );\r
 160                 } else {\r
 161                         console.log( '> Timer' );\r
 162                         // Opera12 requestAnimationFrame では transition が動かない、、、\r
 163                         X_Node_Anime_updateTimerID =\r
 164                                 X_UA[ 'Opera' ] ?\r
 165                                         X.Timer.once( 0, X_Node_Anime_updateAnimations ) :\r
 166                                         X.Timer.requestFrame( X_Node_Anime_updateAnimations );                  \r
 167                 };\r
 168         };\r
 169 };\r
 170 \r
 171 function X_Node_Anime_updateAnimations( v, updateNow ){\r
 172         var i = X_Node_ANIMATIONS.length, ret, c = false;\r
 173         \r
 174         //console.log( v.type || v );\r
 175         \r
 176         //console.log( 'updateAnimations len:' + i + ' time:' + v + ' det:' + X_Node_Anime_needsDetection );\r
 177         \r
 178         if( X_Node_Anime_needsDetection ) X_Node_Anime_detectAnimationLayers();\r
 179         \r
 180         for( ; i; ){\r
 181                 xnode = X_Node_ANIMATIONS[ --i ];\r
 182                 //console.log( 'phase : ' + xnode._id + ' ' + xnode._anime.phase + ' ' + xnode._anime.duration );\r
 183                 ret = X_Node_Anime_updateAnimation( xnode );\r
 184                 if( ret === true ){\r
 185                         X_Node_ANIMATIONS.splice( i, 1 );\r
 186                         xnode._anime.gpuTimerID && X.Timer.remove( xnode._anime.gpuTimerID );\r
 187                         delete xnode._anime;\r
 188                 } else\r
 189                 if( ret !== false ){\r
 190                         c = true;\r
 191                 };\r
 192         };\r
 193         \r
 194         if( ( X_Node_Anime_updateTimerID || updateNow ) && X_Node_updateTimerID ) X_Node_startUpdate();\r
 195         \r
 196         X_Node_Anime_updateTimerID = 0;\r
 197         X_Node_Anime_reserved = false;\r
 198         if( c ){\r
 199                 X_Node_Anime_reserveUpdate();\r
 200         };\r
 201 };\r
 202 \r
 203 // TODO X.Timer.requestFrame 経由の BEFORE_UPDATE で更新を行う\r
 204 function X_Node_Anime_detectAnimationLayers(){\r
 205         var i = X_Node_ANIMATIONS.length,\r
 206                 l = i,\r
 207                 j, xnode, parent, hasGPUChild, remove;\r
 208 \r
 209         for( ; i; ){\r
 210                 xnode = X_Node_ANIMATIONS[ --i ];\r
 211                 parent = hasGPUChild = false;\r
 212                 for( j = l; j; ){\r
 213                         _xnode = X_Node_ANIMATIONS[ --j ];\r
 214                         \r
 215                         if( xnode.parent === _xnode.parent ){\r
 216                                 continue;\r
 217                         } else\r
 218                         if( _xnode.contains( xnode ) ){\r
 219                                 if( ( _xnode._anime.phase === 3 && _xnode._anime.gpuParent ) || _xnode._anime.phase === 10 ){\r
 220                                         _xnode._anime.phase = 15;\r
 221                                 } else\r
 222                                 if( xnode._anime.gpuParent ){\r
 223                                         parent = true;\r
 224                                         xnode._anime.phase = xnode._anime.phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄\r
 225                                 } else\r
 226                                 if( [ 7, 8, 9, 13, 14 ].indexOf( xnode._anime.phase ) !== -1 ){// GPU レイヤーの中止\r
 227                                         parent = true;\r
 228                                         xnode._anime.phase -= 8;\r
 229                                 };\r
 230                                 break;\r
 231                         } else\r
 232                         if( xnode.contains( _xnode ) ){\r
 233                                 if( ( xnode._anime.phase === 3 && xnode._anime.gpuParent ) || xnode._anime.phase === 10 ){\r
 234                                         xnode._anime.phase = 15;\r
 235                                 } else\r
 236                                 if( _xnode._anime.gpuParent ){\r
 237                                         hasGPUChild = true;\r
 238                                         _xnode._anime.phase = _xnode._anime.phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄\r
 239                                 } else\r
 240                                 if( [ 7, 8, 9, 13, 14 ].indexOf( _xnode._anime.phase ) !== -1 ){// GPU レイヤーの中止\r
 241                                         hasGPUChild = true;\r
 242                                         _xnode._anime.phase -= 8;\r
 243                                 };\r
 244                                 break;\r
 245                         };\r
 246                 };\r
 247                 \r
 248                 if( !parent && xnode._anime.phase !== 15 ){\r
 249                         if( xnode._anime.phase === 0 ){\r
 250                                 // 新規\r
 251                                 xnode._anime.phase = hasGPUChild ? 7 : 8;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
 252                         } else\r
 253                         if( [ 3, 4, 10, 100 ].indexOf( xnode._anime.phase ) === -1 ){\r
 254                                 // 非GPU -> GPU\r
 255                                 xnode._anime.phase = hasGPUChild ? 13 : 14;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
 256                         };\r
 257                 };\r
 258         };\r
 259         \r
 260         X_Node_Anime_needsDetection = false;\r
 261 };\r
 262 \r
 263 /* TODO\r
 264  * 0:無, 1:子のGPU解除待 2:GPU予約, 3:GPU now!, 4:GPU解除予約\r
 265  */\r
 266 function X_Node_Anime_updateAnimation( xnode ){\r
 267         var obj   = xnode._anime,\r
 268                 phase = obj.phase,\r
 269                 current, time;\r
 270         switch( phase ){\r
 271                 case 2 :\r
 272                         // アニメーション中\r
 273                         return false;\r
 274                 \r
 275                 case -1 :// 子の GPU レイヤー解除待ち\r
 276                 case  7 :\r
 277                         ++obj.phase;\r
 278                         break;\r
 279                 case  0 : // 開始位置+アニメーションの設定 \r
 280                 case  8 :\r
 281                         X_ViewPort.unlisten( X_Event.AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
 282                         \r
 283                         xnode.css({\r
 284                                 //willChange               : X_Node_Anime_transitionProps + ',opacity,width,height',\r
 285                                 backfaceVisibility       : 'hidden',\r
 286                                 transitionTimingFunction : obj.easing.style,\r
 287                                 transitionDelay          : '0s' // 0.001 にすると transitionend のタイミングが狂う、、、\r
 288                         });\r
 289                         \r
 290                         console.log( '開始位置 ' + phase );\r
 291                         X_Node_Anime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, phase === 8 );\r
 292                         \r
 293                         xnode.dispatch( { type : X_Event.ANIME_START, gpu : phase === 8 } );\r
 294                         ++obj.phase;\r
 295                         break;\r
 296                 case  1 :\r
 297                 case  9 : // 終了位置の設定\r
 298                         obj.gpuParent = phase === 9;\r
 299                         if( obj.duration ){\r
 300                                 xnode.listenOnce( 'transitionend', X_Node_Anime_onTransitionEnd );\r
 301                         \r
 302                                 xnode.css({\r
 303                                         transitionProperty : X_Node_Anime_transitionProps + ',opacity,width,height',\r
 304                                         transitionDuration : obj.duration + 'ms'\r
 305                                 });\r
 306                                 \r
 307                                 console.log( '修了位置 ' + phase );\r
 308                                 X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, obj.gpuParent );\r
 309                                 obj.phase = 2;\r
 310                                 break;\r
 311                         };\r
 312                         console.log( 'duration = 0 の場合、アニメーションの解除' );\r
 313                         // duration = 0 の場合、アニメーションの解除\r
 314                         \r
 315                 case 3 : // アニメーションの解除\r
 316                         obj.phase = obj.gpuParent ? 10 : 4;\r
 317                         // このタイミングで animation 関連の css を削除したところ(X_Node_Anime_clearTransition)、iOS3、4 で再描画忘れが度々起きるように、、、\r
 318                         if( !obj.gpuParent ) X_Node_Anime_clearTransition( xnode );\r
 319                         xnode.dispatch( { type : X_Event.ANIME_END, gpu : obj.gpuParent } );\r
 320                         break;\r
 321 \r
 322                 case 4 :\r
 323                         // アニメーションは停止・GPU=false -> リストから削除\r
 324                         obj.gpuParent = false;\r
 325                         return true;\r
 326 \r
 327                 case 10 :\r
 328                         // アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機)\r
 329                         //X_Node_Anime_clearTransition( xnode ); // TODO X_Node_Anime_releaseGPULayer に移動?\r
 330                         if( !obj.gpuTimerID ){\r
 331                                 if( obj.wait ){\r
 332                                         obj.gpuTimerID = X.Timer.once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );\r
 333                                 } else {\r
 334                                         X_Node_Anime_releaseGPULayer.call( xnode );\r
 335                                 };\r
 336                         };\r
 337                         return false;\r
 338                 \r
 339                 case  5 :\r
 340                 case 13 :\r
 341                         // 子のGPU解除待ち\r
 342                         ++obj.phase;\r
 343                         break;\r
 344                 \r
 345                 // GPU レイヤーの変更> アニメーションは継続,但し残り時間が短ければ停止\r
 346                 case  6 :               \r
 347                 case 14 :\r
 348                         now  = X_Timer_now();\r
 349                         time = obj.duration - now + obj.startTime;\r
 350                         if( time < 16 ){\r
 351                                 X_Node_Anime_clearTransition( xnode );\r
 352                                 X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, phase === 14 );\r
 353                                 obj.phase = phase === 14 ? 10 : 4;\r
 354                                 xnode.dispatch( { type : X_Event.ANIME_END, gpu : obj.gpuParent } );\r
 355                         } else {\r
 356                                 current = X_Node_Anime_getComputedPosition( xnode );\r
 357                                 obj.startX    = current.x;\r
 358                                 obj.startY    = current.y;\r
 359                                 obj.startA    = current.a;\r
 360                                 obj.duration  = time;\r
 361                                 obj.startTime = now;\r
 362                                 X_Node_Anime_updatePosition( xnode, current.x, current.y, current.a, phase === 14 );\r
 363                                 obj.phase = phase === 14 ? 9 : 1;\r
 364                         };\r
 365                         break;\r
 366                 \r
 367                 case 15 :\r
 368                         // GPU有効で停止（待機）している xnode の解除\r
 369                         //console.log( 'GPU有効で停止（待機）している xnode の解除' + xnode._tag + xnode.getOrder() );\r
 370                         console.log( 'GPU有効で停止（待機）している xnode のGPU解除' );\r
 371                         X_Node_Anime_clearTransition( xnode );\r
 372                         X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );\r
 373                         obj.gpuTimerID && X.Timer.remove( obj.gpuTimerID );\r
 374                         X_ViewPort.listenOnce( X_Event.AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
 375                         return true;\r
 376                 \r
 377                 case 100 : // stop() : アニメーションを中断して削除\r
 378                         //console.log( 'stop() gpu:' + obj.gpuParent );\r
 379                         console.log( 'アニメーションを中断して削除' );\r
 380                         current = X_Node_Anime_getComputedPosition( xnode );\r
 381                                                 \r
 382                         X_Node_Anime_clearTransition( xnode );\r
 383                         X_Node_Anime_updatePosition( xnode, current.x, current.y, current.a, obj.gpuParent );\r
 384                         obj.phase = obj.gpuParent ? 10 : 4;\r
 385                         break;\r
 386                 \r
 387         };\r
 388 };\r
 389 \r
 390 function X_Node_Anime_getComputedPosition( that ) {\r
 391         var matrix = X_node_CSS_getComputedStyle( that._rawObject, null ),\r
 392                 x, y;\r
 393 \r
 394         if ( X_Node_Anime_hasTransform ) {\r
 395                 matrix = matrix[ X_Node_CSS_VENDER_PREFIX[ 'transform' ] ].split( ')' )[ 0 ].split( ', ' );\r
 396                 x = + ( matrix[ 12 ] || matrix[ 4 ] );\r
 397                 y = + ( matrix[ 13 ] || matrix[ 5 ] );\r
 398         } else {\r
 399                 x = + parseInt( matrix.left );\r
 400                 y = + parseInt( matrix.top );\r
 401         };\r
 402         \r
 403         return { x : x, y : y, a : matrix[ X_Node_CSS_Support[ 'opacity' ] ] };\r
 404 };\r
 405 \r
 406 function X_Node_Anime_onTransitionEnd( e ){\r
 407         if( !this._anime || this._anime.phase !== 2 ) return X.Callback.PREVENT_DEFAULT | X.Callback.STOP_PROPAGATION;\r
 408         this._anime.phase = 3;\r
 409         \r
 410         console.log( 'トランジション終了' );\r
 411         \r
 412         X_Node_Anime_onTransition = true;\r
 413         this.dispatch( { type : X_Event.ANIME_END, gpu : this._anime.gpuParent } );\r
 414         X_Node_Anime_onTransition = false;\r
 415         \r
 416         X_Node_Anime_needsDetection = true;\r
 417         // iOS は transitionend 内の 更新でアニメーション可能 iOS3, iOS4 で確認 \r
 418         // win+Gecko は不可\r
 419         X_Node_Anime_updateAnimations( 0, X_Node_updateOnTransitionEnd );\r
 420         \r
 421         return X.Callback.PREVENT_DEFAULT | X.Callback.STOP_PROPAGATION;\r
 422 };\r
 423 \r
 424 function X_Node_Anime_releaseGPULayer(){\r
 425         var obj = this._anime, tmp;\r
 426         if( !obj ){\r
 427                 console.log( '_anime無' );\r
 428                 return;\r
 429         };\r
 430         X_Node_Anime_clearTransition( this );\r
 431         X_Node_Anime_updatePosition( this, obj.destX, obj.destY, obj.destA, false );\r
 432         X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );\r
 433         delete obj.gpuTimerID;\r
 434         delete this._anime;\r
 435         console.log( 'GPUレイヤーの破棄を指示' );\r
 436         \r
 437         X_ViewPort.listenOnce( X_Event.AFTER_UPDATE, this, X_Node_Anime_gpuReleased );\r
 438 };\r
 439 \r
 440 function X_Node_Anime_gpuReleased(){\r
 441         console.log( 'GPU レイヤーが解放されました' );\r
 442         this.dispatch( { type : X_Event.GPU_RELEASED, gpu : true } );\r
 443 };\r
 444 \r
 445 function X_Node_Anime_clearTransition( xnode ){\r
 446         // 開始座標のセット(新規のみ)\r
 447         // アニメーション指定のセット(または解除)(対象のみ)\r
 448         // 目標座標のセット\r
 449         xnode.unlisten( 'transitionend', X_Node_Anime_onTransitionEnd );\r
 450 \r
 451         xnode.css({\r
 452                 //willChange               : '',\r
 453                 backfaceVisibility       : '',\r
 454                 transitionTimingFunction : '',\r
 455                 transitionDelay          : '',\r
 456                 transitionDuration       : ''\r
 457         });\r
 458 };\r
 459 \r
 460 function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){\r
 461         //console.log( 'y : ' + y + ' gpu : ' + !!useGPU );\r
 462         if( X_Node_Anime_hasTransform ){\r
 463                 xnode.css({\r
 464                         transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ),\r
 465                         opacity   : opacity\r
 466                 });\r
 467         } else {\r
 468                 xnode.css({\r
 469                         left    : ( x | 0 ) + 'px',\r
 470                         top     : ( y | 0 ) + 'px',\r
 471                         opacity : opacity\r
 472                 });\r
 473         };\r
 474 \r
 475         if( X_Node_Anime_translateZ ){\r
 476                 if( useGPU ){\r
 477                         if( xnode._flags & X_Node_State.GPU_RELEASE_RESERVED ){\r
 478                                 xnode._flags &= X_Node_BitMask_RESET_GPU;\r
 479                                 xnode._flags |= X_Node_State.GPU_NOW;\r
 480                         } else\r
 481                         if( xnode._flags & X_Node_State.GPU_NOW ){\r
 482                         } else {\r
 483                                 xnode._flags &= X_Node_BitMask_RESET_GPU;\r
 484                                 xnode._flags |= X_Node_State.GPU_RESERVED;\r
 485                         };\r
 486                 } else {\r
 487                         if( xnode._flags & X_Node_State.GPU_NOW ){\r
 488                                 xnode._flags &= X_Node_BitMask_RESET_GPU;\r
 489                                 xnode._flags |= X_Node_State.GPU_RELEASE_RESERVED;                      \r
 490                         } else\r
 491                         if( xnode._flags & X_Node_State.GPU_RESERVED ){\r
 492                                 xnode._flags &= X_Node_BitMask_RESET_GPU;\r
 493                         };\r
 494                 };              \r
 495         };\r
 496 };\r
 497 \r
 498 function X_Node_Anime_updateAnimationsNoTransition(){\r
 499         var i = X_Node_ANIMATIONS.length,\r
 500                 now = X_Timer_now(),\r
 501                 obj,\r
 502                 newX, newY, newA, easing,\r
 503                 c = false;\r
 504         \r
 505         for( ; i; ){\r
 506                 xnode = X_Node_ANIMATIONS[ --i ];\r
 507                 obj   = xnode._anime;\r
 508 \r
 509                 if( obj.destTime <= now ){\r
 510                         X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );\r
 511 \r
 512                         delete xnode._anime;\r
 513                         X_Node_ANIMATIONS.splice( i, 1 );\r
 514                         \r
 515                         // filter な 親が解除されないと子要素への filter が反映されない\r
 516                         xnode.asyncDispatch( { type : X_Event.ANIME_END, gpu : false } );\r
 517                 } else {\r
 518                         easing = obj.easing.fn( ( now - obj.startTime ) / obj.duration );\r
 519                         newX   = ( obj.destX - obj.startX ) * easing + obj.startX;\r
 520                         newY   = ( obj.destY - obj.startY ) * easing + obj.startY;\r
 521                         newA   = ( obj.destA - obj.startA ) * easing + obj.startA;\r
 522                         X_Node_Anime_updatePosition( xnode, newX, newY, newA, false );\r
 523                         obj.x = newX;\r
 524                         obj.y = newY;\r
 525                         obj.a = newA;\r
 526                         c = true;       \r
 527                 };\r
 528         };\r
 529         \r
 530         if( c ){\r
 531                 if( X_Node_updateTimerID ){\r
 532                         X_System.listen( X_Event.UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
 533                         X_Node_Anime_updateTimerID = 0;\r
 534                 } else {\r
 535                         X_Node_Anime_updateTimerID = X.Timer.requestFrame( X_Node_Anime_updateAnimationsNoTransition );\r
 536                 };\r
 537         } else {\r
 538                 X_Node_Anime_updateTimerID = 0;\r
 539         };\r
 540 };\r
 541 \r