OSDN Git Service

Version 0.6.138, working X.UI.ScrollBox!, fix Node.prev & Node.next.
[pettanr/clientJs.git] / 0.6.x / js / 02_dom / 10_XNodeAnime.js
index ebdb856..e68b852 100644 (file)
@@ -129,14 +129,16 @@ Node.prototype[ 'animate' ] = function( start, dest, duration, easing, wait ){
                isNew && this[ 'dispatch' ]( { type : X_EVENT_ANIME_START, gpu : false } );\r
        };\r
        \r
-       console.log( 'animate ' + this[ '_id' ] + ' y:' + obj.startX + ' > ' + obj.destX + ' d:' + obj.duration );\r
+       // console.log( 'animate() ' + this[ '_id' ] + ' y:' + obj.startY + ' > ' + obj.destY + ' d:' + obj.duration );\r
        \r
        return this;\r
 };\r
 \r
 Node.prototype[ 'stop' ] = function(){\r
        var obj = this[ '_anime' ];\r
-       if( !obj ) return;\r
+       \r
+       if( !obj ) return this;\r
+       \r
        if( X_Node_Anime_hasTransition ){\r
                obj.phase = 100;\r
                X_Node_Anime_needsDetection = true;\r
@@ -154,24 +156,26 @@ function X_Node_Anime_reserveUpdate( before ){
                X_Node_Anime_reserved = true;\r
                \r
                if( X_Node_updateTimerID ){\r
-                       console.log( before ? '> BEFORE_UPDATE' : '> UPDATED' );\r
+                       //console.log( before ? '> BEFORE_UPDATE' : '> UPDATED' );\r
                        before = false;\r
                        X_System[ 'listenOnce' ]( before ? X_EVENT_BEFORE_UPDATE : X_EVENT_UPDATED, X_Node_Anime_updateAnimations );\r
                } else {\r
-                       console.log( '> Timer' );\r
+                       //console.log( '> Timer' );\r
                        // Opera12 requestAnimationFrame では transition が動かない、、、\r
                        X_Node_Anime_updateTimerID =\r
                                X_UA[ 'Opera' ] ?\r
                                        X_Timer_once( 0, X_Node_Anime_updateAnimations ) :\r
-                                       X_Timer_requestFrame( X_Node_Anime_updateAnimations );                  \r
+                                       X_Timer_requestFrame( X_Node_Anime_updateAnimations );\r
                };\r
+       } else {\r
+               // console.log( ' X_Node_Anime_reserved 済、予約なし' );\r
        };\r
 };\r
 \r
 function X_Node_Anime_updateAnimations( v, updateNow ){\r
        var i = X_Node_ANIMATIONS.length, ret, c = false;\r
        \r
-       //console.log( v.type || v );\r
+       // console.log( v.type || v );\r
        \r
        //console.log( 'updateAnimations len:' + i + ' time:' + v + ' det:' + X_Node_Anime_needsDetection );\r
        \r
@@ -287,7 +291,7 @@ function X_Node_Anime_updateAnimation( xnode ){
                                transitionDelay          : '0s' // 0.001 にすると transitionend のタイミングが狂う、、、\r
                        });\r
                        \r
-                       console.log( '開始位置 ' + phase );\r
+                       //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
@@ -304,12 +308,12 @@ function X_Node_Anime_updateAnimation( xnode ){
                                        transitionDuration : obj.duration + 'ms'\r
                                });\r
                                \r
-                               console.log( '修了位置 ' + phase );\r
+                               //console.log( '修了位置 ' + phase );\r
                                X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, obj.gpuParent );\r
                                obj.phase = 2;\r
                                break;\r
                        };\r
-                       console.log( 'duration = 0 の場合、アニメーションの解除' );\r
+                       //console.log( 'duration = 0 の場合、アニメーションの解除' );\r
                        // duration = 0 の場合、アニメーションの解除\r
                        \r
                case 3 : // アニメーションの解除\r
@@ -367,7 +371,7 @@ function X_Node_Anime_updateAnimation( xnode ){
                case 15 :\r
                        // GPU有効で停止(待機)している xnode の解除\r
                        //console.log( 'GPU有効で停止(待機)している xnode の解除' + xnode[ '_tag' ] + xnode[ 'getOrder' ]() );\r
-                       console.log( 'GPU有効で停止(待機)している xnode のGPU解除' );\r
+                       // console.log( 'GPU有効で停止(待機)している xnode のGPU解除' );\r
                        X_Node_Anime_clearTransition( xnode );\r
                        X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );\r
                        obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID );\r
@@ -376,7 +380,7 @@ function X_Node_Anime_updateAnimation( xnode ){
                \r
                case 100 : // stop() : アニメーションを中断して削除\r
                        //console.log( 'stop() gpu:' + obj.gpuParent );\r
-                       console.log( 'アニメーションを中断して削除' );\r
+                       // console.log( 'アニメーションを中断して削除' );\r
                        current = X_Node_Anime_getComputedPosition( xnode );\r
                                                \r
                        X_Node_Anime_clearTransition( xnode );\r
@@ -404,10 +408,15 @@ function X_Node_Anime_getComputedPosition( that ) {
 };\r
 \r
 function X_Node_Anime_onTransitionEnd( e ){\r
-       if( !this[ '_anime' ] || this[ '_anime' ].phase !== 2 ) return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION;\r
-       this[ '_anime' ].phase = 3;\r
+       // console.log( 'アニメ終了[onTransitionEnd] ' + ( this[ '_anime' ] && this[ '_anime' ].phase ) );\r
        \r
-       console.log( 'トランジション終了' );\r
+       if( !this[ '_anime' ] || this[ '_anime' ].phase !== 2 ){\r
+               // ここで return してしまうと、view の更新イベント待ちの場合、アニメが止まる\r
+               X_Node_Anime_reserved && !X_Node_Anime_updateTimerID && !X_Node_updateTimerID && X_Node_Anime_reserveUpdate( X_Node_Anime_reserved = false );\r
+               return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION;\r
+       };\r
+       \r
+       this[ '_anime' ].phase = 3;\r
        \r
        X_Node_Anime_onTransition = true;\r
        this[ 'dispatch' ]( { type : X_EVENT_ANIME_END, gpu : this[ '_anime' ].gpuParent } );\r
@@ -424,7 +433,7 @@ function X_Node_Anime_onTransitionEnd( e ){
 function X_Node_Anime_releaseGPULayer(){\r
        var obj = this[ '_anime' ], tmp;\r
        if( !obj ){\r
-               console.log( '_anime無' );\r
+               // console.log( '_anime無' );\r
                return;\r
        };\r
        X_Node_Anime_clearTransition( this );\r
@@ -432,13 +441,13 @@ function X_Node_Anime_releaseGPULayer(){
        X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );\r
        delete obj.gpuTimerID;\r
        delete this[ '_anime' ];\r
-       console.log( 'GPUレイヤーの破棄を指示' );\r
+       //console.log( 'GPUレイヤーの破棄を指示' );\r
        \r
        X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, X_Node_Anime_gpuReleased );\r
 };\r
 \r
 function X_Node_Anime_gpuReleased(){\r
-       console.log( 'GPU レイヤーが解放されました' );\r
+       //console.log( 'GPU レイヤーが解放されました' );\r
        this[ 'dispatch' ]( { type : X_EVENT_GPU_RELEASED, gpu : true } );\r
 };\r
 \r
@@ -458,7 +467,7 @@ function X_Node_Anime_clearTransition( xnode ){
 };\r
 \r
 function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){\r
-       //console.log( 'y : ' + y + ' gpu : ' + !!useGPU );\r
+       // console.log( 'updatePosition y:' + y + ' gpu:' + !!useGPU );\r
        if( X_Node_Anime_hasTransform ){\r
                xnode[ 'css' ]({\r
                        transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ),\r