OSDN Git Service

Version 0.6.143, fix X.UI.ScrollBox for iOS3.
[pettanr/clientJs.git] / 0.6.x / js / 02_dom / 10_XNodeAnime.js
index 9a3078c..839697a 100644 (file)
@@ -61,17 +61,18 @@ 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
-       X_Node_Anime_translateZ      = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA.OperaMobile && !X_UA.OperaTablet ? ' translateZ(0)' : '',\r
+       X_Node_Anime_translateZ      = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '',\r
        /* Opera12(XP,8.1) 切った方がスムース, win Safari3 で、たまに動作が止まってしまう、、、 */\r
-       X_Node_Anime_hasTransition   = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X_UA.Opera && !( X_UA.Webkit <= 528.16 ),\r
+       X_Node_Anime_hasTransition   = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X_UA[ 'Opera' ], // && !( X_UA[ 'Webkit' ]  <= 528.16 ),\r
        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 = false; //X_UA[ 'iOS' ] < 6;\r
 \r
 // gpu化だけ transformX , willChange\r
 // 終了位置の変更\r
@@ -84,17 +85,18 @@ var X_Node_ANIMATIONS            = [],
  * TODO : skew\r
  * TODO : filter\r
  * TODO 前回位置からの継続\r
+ * TODO scrollLeft, scrollTop\r
  */\r
-Node.prototype.animate = function( start, dest, duration, easing, wait ){\r
-       var isNew = !this._anime,\r
-               obj   = this._anime || ( this._anime = {} );\r
+Node.prototype[ 'animate' ] = function( start, dest, duration, easing, wait ){\r
+       var isNew = !this[ '_anime' ],\r
+               obj   = this[ '_anime' ] || ( this[ '_anime' ] = {} );\r
        \r
-       obj.duration  = 0 <= duration && X.Type.isFinite( duration ) ? duration : 500;\r
+       obj.duration  = 0 <= duration && X_Type_isFinite( duration ) ? duration : 500;\r
        obj.easing    = ease[ easing ] || ease.circular;\r
        // 現在 GPUレイヤーのtop になっているか?将来については phase で判定\r
        obj.gpuParent = obj.gpuParent || false;\r
        obj.phase     = duration === 0 ? 9 : obj.phase === 9 ? 9 : 0; //\r
-       obj.wait      = X.Type.isFinite( wait ) ? wait : 1000;\r
+       obj.wait      = X_Type_isFinite( wait ) ? wait : 1000;\r
                \r
        obj.startTime = X_Timer_now();\r
        obj.startX    = ( start.x || start.x === 0 ) ? start.x : obj.x || 0;\r
@@ -115,7 +117,7 @@ Node.prototype.animate = function( start, dest, duration, easing, wait ){
        if( X_Node_Anime_hasTransition ){\r
                \r
                if( obj.gpuTimerID ){\r
-                       X.Timer.remove( obj.gpuTimerID );\r
+                       X_Timer_remove( obj.gpuTimerID );\r
                        delete obj.gpuTimerID;\r
                };              \r
                \r
@@ -123,28 +125,39 @@ 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.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
+Node.prototype[ 'stop' ] = function(){\r
+       var obj = this[ '_anime' ];\r
+       \r
+       if( !obj ) return this;\r
+       \r
        if( X_Node_Anime_hasTransition ){\r
                obj.phase = 100;\r
                X_Node_Anime_needsDetection = true;\r
                X_Node_Anime_reserveUpdate();\r
        } 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
+               //obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID );\r
+               delete this[ '_anime' ];\r
        };\r
        return this;\r
 };\r
@@ -154,24 +167,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
+                       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_UA[ 'Opera' ] ?\r
+                                       X_Timer_once( 0, 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
+       var i = X_Node_ANIMATIONS.length, c = false, ret, xnode;\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
@@ -179,12 +194,12 @@ function X_Node_Anime_updateAnimations( v, updateNow ){
        \r
        for( ; i; ){\r
                xnode = X_Node_ANIMATIONS[ --i ];\r
-               //console.log( 'phase : ' + xnode._id + ' ' + xnode._anime.phase + ' ' + xnode._anime.duration );\r
+               //console.log( 'phase : ' + xnode[ '_id' ] + ' ' + xnode[ '_anime' ].phase + ' ' + xnode[ '_anime' ].duration );\r
                ret = X_Node_Anime_updateAnimation( xnode );\r
                if( ret === true ){\r
                        X_Node_ANIMATIONS.splice( i, 1 );\r
-                       xnode._anime.gpuTimerID && X.Timer.remove( xnode._anime.gpuTimerID );\r
-                       delete xnode._anime;\r
+                       xnode[ '_anime' ].gpuTimerID && X_Timer_remove( xnode[ '_anime' ].gpuTimerID );\r
+                       delete xnode[ '_anime' ];\r
                } else\r
                if( ret !== false ){\r
                        c = true;\r
@@ -200,7 +215,7 @@ function X_Node_Anime_updateAnimations( v, updateNow ){
        };\r
 };\r
 \r
-// TODO X.Timer.requestFrame 経由の BEFORE_UPDATE で更新を行う\r
+// TODO X_Timer_requestFrame 経由の BEFORE_UPDATE で更新を行う\r
 function X_Node_Anime_detectAnimationLayers(){\r
        var i = X_Node_ANIMATIONS.length,\r
                l = i,\r
@@ -215,44 +230,44 @@ function X_Node_Anime_detectAnimationLayers(){
                        if( xnode.parent === _xnode.parent ){\r
                                continue;\r
                        } else\r
-                       if( _xnode.contains( xnode ) ){\r
-                               if( ( _xnode._anime.phase === 3 && _xnode._anime.gpuParent ) || _xnode._anime.phase === 10 ){\r
-                                       _xnode._anime.phase = 15;\r
+                       if( _xnode[ 'contains' ]( xnode ) ){\r
+                               if( ( _xnode[ '_anime' ].phase === 3 && _xnode[ '_anime' ].gpuParent ) || _xnode[ '_anime' ].phase === 10 ){\r
+                                       _xnode[ '_anime' ].phase = 15;\r
                                } else\r
-                               if( xnode._anime.gpuParent ){\r
+                               if( xnode[ '_anime' ].gpuParent ){\r
                                        parent = true;\r
-                                       xnode._anime.phase = xnode._anime.phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄\r
+                                       xnode[ '_anime' ].phase = xnode[ '_anime' ].phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄\r
                                } else\r
-                               if( [ 7, 8, 9, 13, 14 ].indexOf( xnode._anime.phase ) !== -1 ){// GPU レイヤーの中止\r
+                               if( [ 7, 8, 9, 13, 14 ].indexOf( xnode[ '_anime' ].phase ) !== -1 ){// GPU レイヤーの中止\r
                                        parent = true;\r
-                                       xnode._anime.phase -= 8;\r
+                                       xnode[ '_anime' ].phase -= 8;\r
                                };\r
                                break;\r
                        } else\r
-                       if( xnode.contains( _xnode ) ){\r
-                               if( ( xnode._anime.phase === 3 && xnode._anime.gpuParent ) || xnode._anime.phase === 10 ){\r
-                                       xnode._anime.phase = 15;\r
+                       if( xnode[ 'contains' ]( _xnode ) ){\r
+                               if( ( xnode[ '_anime' ].phase === 3 && xnode[ '_anime' ].gpuParent ) || xnode[ '_anime' ].phase === 10 ){\r
+                                       xnode[ '_anime' ].phase = 15;\r
                                } else\r
-                               if( _xnode._anime.gpuParent ){\r
+                               if( _xnode[ '_anime' ].gpuParent ){\r
                                        hasGPUChild = true;\r
-                                       _xnode._anime.phase = _xnode._anime.phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄\r
+                                       _xnode[ '_anime' ].phase = _xnode[ '_anime' ].phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄\r
                                } else\r
-                               if( [ 7, 8, 9, 13, 14 ].indexOf( _xnode._anime.phase ) !== -1 ){// GPU レイヤーの中止\r
+                               if( [ 7, 8, 9, 13, 14 ].indexOf( _xnode[ '_anime' ].phase ) !== -1 ){// GPU レイヤーの中止\r
                                        hasGPUChild = true;\r
-                                       _xnode._anime.phase -= 8;\r
+                                       _xnode[ '_anime' ].phase -= 8;\r
                                };\r
                                break;\r
                        };\r
                };\r
                \r
-               if( !parent && xnode._anime.phase !== 15 ){\r
-                       if( xnode._anime.phase === 0 ){\r
+               if( !parent && xnode[ '_anime' ].phase !== 15 ){\r
+                       if( xnode[ '_anime' ].phase === 0 ){\r
                                // 新規\r
-                               xnode._anime.phase = hasGPUChild ? 7 : 8;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
+                               xnode[ '_anime' ].phase = hasGPUChild ? 7 : 8;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
                        } else\r
-                       if( [ 3, 4, 10, 100 ].indexOf( xnode._anime.phase ) === -1 ){\r
+                       if( [ 3, 4, 10, 100 ].indexOf( xnode[ '_anime' ].phase ) === -1 ){\r
                                // 非GPU -> GPU\r
-                               xnode._anime.phase = hasGPUChild ? 13 : 14;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
+                               xnode[ '_anime' ].phase = hasGPUChild ? 13 : 14;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
                        };\r
                };\r
        };\r
@@ -264,7 +279,7 @@ function X_Node_Anime_detectAnimationLayers(){
  * 0:無, 1:子のGPU解除待 2:GPU予約, 3:GPU now!, 4:GPU解除予約\r
  */\r
 function X_Node_Anime_updateAnimation( xnode ){\r
-       var obj   = xnode._anime,\r
+       var obj   = xnode[ '_anime' ],\r
                phase = obj.phase,\r
                current, time;\r
        switch( phase ){\r
@@ -278,45 +293,45 @@ function X_Node_Anime_updateAnimation( xnode ){
                        break;\r
                case  0 : // 開始位置+アニメーションの設定 \r
                case  8 :\r
-                       X_ViewPort.unlisten( X.Event.AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
+                       X_ViewPort[ 'unlisten' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
                        \r
-                       xnode.css({\r
-                               willChange               : X_Node_Anime_transitionProps + ',opacity,width,height',\r
+                       xnode[ 'css' ]({\r
+                               //willChange               : X_Node_Anime_transitionProps + ',opacity,width,height',\r
                                backfaceVisibility       : 'hidden',\r
                                transitionTimingFunction : obj.easing.style,\r
                                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
+                       xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_START, 'gpu' : phase === 8 } );\r
                        ++obj.phase;\r
                        break;\r
                case  1 :\r
                case  9 : // 終了位置の設定\r
                        obj.gpuParent = phase === 9;\r
                        if( obj.duration ){\r
-                               xnode.listenOnce( 'transitionend', X_Node_Anime_onTransitionEnd );\r
+                               xnode[ 'listenOnce' ]( 'transitionend', X_Node_Anime_onTransitionEnd );\r
                        \r
-                               xnode.css({\r
+                               xnode[ 'css' ]({\r
                                        transitionProperty : X_Node_Anime_transitionProps + ',opacity,width,height',\r
                                        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
                        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
@@ -326,10 +341,10 @@ function X_Node_Anime_updateAnimation( xnode ){
 \r
                case 10 :\r
                        // アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機)\r
-                       X_Node_Anime_clearTransition( xnode ); // TODO X_Node_Anime_releaseGPULayer に移動?\r
+                       //X_Node_Anime_clearTransition( xnode ); // TODO X_Node_Anime_releaseGPULayer に移動?\r
                        if( !obj.gpuTimerID ){\r
                                if( obj.wait ){\r
-                                       obj.gpuTimerID = X.Timer.once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );\r
+                                       obj.gpuTimerID = X_Timer_once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );\r
                                } else {\r
                                        X_Node_Anime_releaseGPULayer.call( xnode );\r
                                };\r
@@ -351,7 +366,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[ 'asyncDispatch' ]( time, { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );\r
                        } else {\r
                                current = X_Node_Anime_getComputedPosition( xnode );\r
                                obj.startX    = current.x;\r
@@ -366,17 +381,18 @@ function X_Node_Anime_updateAnimation( xnode ){
                \r
                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 の解除' + xnode[ '_tag' ] + xnode[ 'getOrder' ]() );\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
-                       X_ViewPort.listenOnce( X.Event.AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
+                       //obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID );\r
+                       //delete obj.gpuTimerID;\r
+                       X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
                        return true;\r
                \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
@@ -388,7 +404,7 @@ function X_Node_Anime_updateAnimation( xnode ){
 };\r
 \r
 function X_Node_Anime_getComputedPosition( that ) {\r
-       var matrix = X_node_CSS_getComputedStyle( that._rawObject, null ),\r
+       var matrix = X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ),\r
                x, y;\r
 \r
        if ( X_Node_Anime_hasTransform ) {\r
@@ -404,51 +420,59 @@ 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( '[TransitionEnd] ' + ( this[ '_anime' ] && this[ '_anime' ].phase ) );\r
+       \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
-       console.log( 'トランジション終了' );\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
+       this[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : this[ '_anime' ].gpuParent } );\r
        X_Node_Anime_onTransition = false;\r
        \r
+       X_Node_Anime_clearTransition( this ); // iOS 大丈夫??\r
+       \r
        X_Node_Anime_needsDetection = true;\r
        // iOS は transitionend 内の 更新でアニメーション可能 iOS3, iOS4 で確認 \r
        // win+Gecko は不可\r
        X_Node_Anime_updateAnimations( 0, X_Node_updateOnTransitionEnd );\r
        \r
-       return X.Callback.PREVENT_DEFAULT | X.Callback.STOP_PROPAGATION;\r
+       return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION;\r
 };\r
 \r
 function X_Node_Anime_releaseGPULayer(){\r
-       var obj = this._anime, tmp;\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
        X_Node_Anime_updatePosition( this, obj.destX, obj.destY, obj.destA, false );\r
        X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );\r
        delete obj.gpuTimerID;\r
-       delete this._anime;\r
-       console.log( 'GPUレイヤーの破棄を指示' );\r
+       delete this[ '_anime' ];\r
+       //console.log( 'GPUレイヤーの破棄を指示' );\r
        \r
-       X_ViewPort.listenOnce( X.Event.AFTER_UPDATE, this, X_Node_Anime_gpuReleased );\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
-       this.dispatch( { type : X.Event.GPU_RELEASED, gpu : true } );\r
+       //console.log( 'GPU レイヤーが解放されました' );\r
+       this[ 'dispatch' ]( { type : X_EVENT_GPU_RELEASED, 'gpu' : true } );\r
 };\r
 \r
 function X_Node_Anime_clearTransition( xnode ){\r
        // 開始座標のセット(新規のみ)\r
        // アニメーション指定のセット(または解除)(対象のみ)\r
        // 目標座標のセット\r
-       xnode.unlisten( 'transitionend', X_Node_Anime_onTransitionEnd );\r
+       xnode[ 'unlisten' ]( 'transitionend', X_Node_Anime_onTransitionEnd );\r
 \r
-       xnode.css({\r
-               willChange               : '',\r
+       xnode[ 'css' ]({\r
+               //willChange               : '',\r
                backfaceVisibility       : '',\r
                transitionTimingFunction : '',\r
                transitionDelay          : '',\r
@@ -457,42 +481,44 @@ 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 x:' + x + ' gpu:' + !!useGPU );\r
        if( X_Node_Anime_hasTransform ){\r
-               xnode.css({\r
+               xnode[ 'css' ]({\r
                        transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ),\r
                        opacity   : opacity\r
                });\r
        } else {\r
-               xnode.css({\r
+               xnode[ 'css' ]({\r
                        left    : ( x | 0 ) + 'px',\r
                        top     : ( y | 0 ) + 'px',\r
                        opacity : opacity\r
                });\r
        };\r
 \r
-       if( useGPU ){\r
-               if( xnode._flags & X_Node_State.GPU_RELEASE_RESERVED ){\r
-                       xnode._flags &= X_Node_BitMask_RESET_GPU;\r
-                       xnode._flags |= X_Node_State.GPU_NOW;\r
-               } else\r
-               if( xnode._flags & X_Node_State.GPU_NOW ){\r
+       if( X_Node_Anime_translateZ ){\r
+               if( useGPU ){\r
+                       if( xnode[ '_flags' ] & X_Node_State.GPU_RELEASE_RESERVED ){\r
+                               xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+                               xnode[ '_flags' ] |= X_Node_State.GPU_NOW;\r
+                       } else\r
+                       if( xnode[ '_flags' ] & X_Node_State.GPU_NOW ){\r
+                       } else {\r
+                               xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+                               xnode[ '_flags' ] |= X_Node_State.GPU_RESERVED;\r
+                       };\r
                } else {\r
-                       xnode._flags &= X_Node_BitMask_RESET_GPU;\r
-                       xnode._flags |= X_Node_State.GPU_RESERVED;\r
-               };\r
-       } else {\r
-               if( xnode._flags & X_Node_State.GPU_NOW ){\r
-                       xnode._flags &= X_Node_BitMask_RESET_GPU;\r
-                       xnode._flags |= X_Node_State.GPU_RELEASE_RESERVED;                      \r
-               } else\r
-               if( xnode._flags & X_Node_State.GPU_RESERVED ){\r
-                       xnode._flags &= X_Node_BitMask_RESET_GPU;\r
-               };\r
+                       if( xnode[ '_flags' ] & X_Node_State.GPU_NOW ){\r
+                               xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+                               xnode[ '_flags' ] |= X_Node_State.GPU_RELEASE_RESERVED;                 \r
+                       } else\r
+                       if( xnode[ '_flags' ] & X_Node_State.GPU_RESERVED ){\r
+                               xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+                       };\r
+               };              \r
        };\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
@@ -501,16 +527,16 @@ function X_Node_Anime_updateAnimationsNoTransition(){
        \r
        for( ; i; ){\r
                xnode = X_Node_ANIMATIONS[ --i ];\r
-               obj   = xnode._anime;\r
+               obj   = xnode[ '_anime' ];\r
 \r
                if( obj.destTime <= now ){\r
                        X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );\r
 \r
-                       delete xnode._anime;\r
+                       delete xnode[ '_anime' ];\r
                        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
@@ -524,14 +550,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_Node_Anime_updateTimerID = X.Timer.requestFrame( X_Node_Anime_updateAnimationsNoTransition );\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