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

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