OSDN Git Service

Version 0.6.139, fix Node.animate when no.
[pettanr/clientJs.git] / 0.6.x / js / 02_dom / 10_XNodeAnime.js
index e68b852..56c8adf 100644 (file)
@@ -61,6 +61,8 @@ var X_Node_ANIMATIONS            = [],
        X_Node_Anime_reserved        = false,\r
        X_Node_Anime_updateTimerID   = 0,\r
        X_Node_Anime_needsDetection  = false,\r
+       X_Node_Anime_onTransition    = false,\r
+       \r
        X_Node_Anime_hasTransform    = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],\r
        /* Opera mobile で  translateZ(0) が有効だと XY が 0 0 になる */\r
        /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox, 手当てが済むまでここは常に false */\r
@@ -70,8 +72,7 @@ var X_Node_ANIMATIONS            = [],
        X_Node_Anime_transitionProps = X_Node_Anime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top',\r
        // transitionEnd イベント中に要素の更新( X_Node_startUpdate() )ができるか?\r
        // iOS3+4 では可能、iOS6.1.5 で不可。TODO iOS5 及び他の環境で調査。ダメな場合、anime.html が正しく描画されない。\r
-       X_Node_updateOnTransitionEnd = X_UA[ 'iOS' ] < 6,\r
-       X_Node_Anime_onTransition    = false;\r
+       X_Node_updateOnTransitionEnd = X_UA[ 'iOS' ] < 6;\r
 \r
 // gpu化だけ transformX , willChange\r
 // 終了位置の変更\r
@@ -123,10 +124,19 @@ Node.prototype[ 'animate' ] = function( start, dest, duration, easing, wait ){
                \r
                X_Node_Anime_reserveUpdate( true );\r
        } else {\r
-               X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
-               X_Node_Anime_updateTimerID || ( X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition ) );\r
+               if( !X_Node_Anime_reserved ){\r
+                       X_Node_Anime_reserved = true;\r
+                       if( X_Node_updateTimerID ){\r
+                               X_System[ 'listen' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
+                               X_Node_Anime_updateTimerID && X_Timer_cancelFrame( X_Node_Anime_updateTimerID );\r
+                               X_Node_Anime_updateTimerID = 0;\r
+                       } else {\r
+                               X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
+                               X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition );\r
+                       };\r
+               };\r
                \r
-               isNew && this[ 'dispatch' ]( { type : X_EVENT_ANIME_START, gpu : false } );\r
+               isNew && this[ 'dispatch' ]( { type : X_EVENT_ANIME_START, 'gpu' : false } );\r
        };\r
        \r
        // console.log( 'animate() ' + this[ '_id' ] + ' y:' + obj.startY + ' > ' + obj.destY + ' d:' + obj.duration );\r
@@ -146,7 +156,7 @@ Node.prototype[ 'stop' ] = function(){
        } else {\r
                X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );\r
                //obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID );\r
-               delete this[ '_anime' ];                \r
+               delete this[ '_anime' ];\r
        };\r
        return this;\r
 };\r
@@ -294,7 +304,7 @@ function X_Node_Anime_updateAnimation( xnode ){
                        //console.log( '開始位置 ' + phase );\r
                        X_Node_Anime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, phase === 8 );\r
                        \r
-                       xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_START, gpu : phase === 8 } );\r
+                       xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_START, 'gpu' : phase === 8 } );\r
                        ++obj.phase;\r
                        break;\r
                case  1 :\r
@@ -320,7 +330,7 @@ function X_Node_Anime_updateAnimation( xnode ){
                        obj.phase = obj.gpuParent ? 10 : 4;\r
                        // このタイミングで animation 関連の css を削除したところ(X_Node_Anime_clearTransition)、iOS3、4 で再描画忘れが度々起きるように、、、\r
                        if( !obj.gpuParent ) X_Node_Anime_clearTransition( xnode );\r
-                       xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_END, gpu : obj.gpuParent } );\r
+                       xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );\r
                        break;\r
 \r
                case 4 :\r
@@ -355,7 +365,7 @@ function X_Node_Anime_updateAnimation( xnode ){
                                X_Node_Anime_clearTransition( xnode );\r
                                X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, phase === 14 );\r
                                obj.phase = phase === 14 ? 10 : 4;\r
-                               xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_END, gpu : obj.gpuParent } );\r
+                               xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );\r
                        } else {\r
                                current = X_Node_Anime_getComputedPosition( xnode );\r
                                obj.startX    = current.x;\r
@@ -419,7 +429,7 @@ function X_Node_Anime_onTransitionEnd( e ){
        this[ '_anime' ].phase = 3;\r
        \r
        X_Node_Anime_onTransition = true;\r
-       this[ 'dispatch' ]( { type : X_EVENT_ANIME_END, gpu : this[ '_anime' ].gpuParent } );\r
+       this[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : this[ '_anime' ].gpuParent } );\r
        X_Node_Anime_onTransition = false;\r
        \r
        X_Node_Anime_needsDetection = true;\r
@@ -448,7 +458,7 @@ function X_Node_Anime_releaseGPULayer(){
 \r
 function X_Node_Anime_gpuReleased(){\r
        //console.log( 'GPU レイヤーが解放されました' );\r
-       this[ 'dispatch' ]( { type : X_EVENT_GPU_RELEASED, gpu : true } );\r
+       this[ 'dispatch' ]( { type : X_EVENT_GPU_RELEASED, 'gpu' : true } );\r
 };\r
 \r
 function X_Node_Anime_clearTransition( xnode ){\r
@@ -504,7 +514,7 @@ function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){
        };\r
 };\r
 \r
-function X_Node_Anime_updateAnimationsNoTransition(){\r
+function X_Node_Anime_updateAnimationsNoTransition( e ){\r
        var i = X_Node_ANIMATIONS.length,\r
                now = X_Timer_now(),\r
                obj,\r
@@ -522,7 +532,7 @@ function X_Node_Anime_updateAnimationsNoTransition(){
                        X_Node_ANIMATIONS.splice( i, 1 );\r
                        \r
                        // filter な 親が解除されないと子要素への filter が反映されない\r
-                       xnode[ 'asyncDispatch' ]( { type : X_EVENT_ANIME_END, gpu : false } );\r
+                       xnode[ 'asyncDispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : false } );\r
                } else {\r
                        easing = obj.easing.fn( ( now - obj.startTime ) / obj.duration );\r
                        newX   = ( obj.destX - obj.startX ) * easing + obj.startX;\r
@@ -536,14 +546,21 @@ function X_Node_Anime_updateAnimationsNoTransition(){
                };\r
        };\r
        \r
-       if( c ){\r
+       c && console.log( 'anime... ' + X_Node_updateTimerID );\r
+       \r
+       if( X_Node_Anime_reserved = c ){\r
                if( X_Node_updateTimerID ){\r
-                       X_System[ 'listen' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
+                       // scrollbox では X_System X_EVENT_UPDATED は不可。。。\r
+                       !e || e.type !== X_EVENT_UPDATED ?\r
+                               X_System[ 'listen' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition ) :\r
+                               X_Node_Anime_updateTimerID && X_Timer_cancelFrame( X_Node_Anime_updateTimerID );\r
                        X_Node_Anime_updateTimerID = 0;\r
                } else {\r
+                       X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
                        X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition );\r
                };\r
        } else {\r
+               X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
                X_Node_Anime_updateTimerID = 0;\r
        };\r
 };\r