Version 0.6.190, fix X.UI.ScrollBox & X.UI.Gesture.

[pettanr/clientJs.git] / 0.6.x / js / 02_dom / 10_XNodeAnime.js

diff --git a/0.6.x/js/02_dom/10_XNodeAnime.js b/0.6.x/js/02_dom/10_XNodeAnime.js
index 7064166..2520f14 100644 (file)
--- a/0.6.x/js/02_dom/10_XNodeAnime.js
+++ b/0.6.x/js/02_dom/10_XNodeAnime.js
@@ -47,7 +47,10 @@ var
                        }\r
                }\r
        };\r
-               \r
+\r
+// お約束\r
+// transform や transition animation は スタイルシートに書かない\r
+\r
 // 新規アニメーションが追加された場合、\r
 // tree が dirty なら AFTER_COMMIT を待つ\r
 // 1) xnode の既存アニメーションとの親子関係の調査\r
@@ -68,11 +71,11 @@ var X_Node_ANIMATIONS            = [],
        /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */\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   = false && !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !( X_UA[ 'iOS' ] < 6 ) && !X_UA[ 'Opera' ] && !X_UA[ 'Blink' ], // && !( 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 = false; //X_UA[ 'iOS' ] < 6;\r
+       X_Node_updateOnTransitionEnd = false;\r
 \r
 // gpu化だけ transformX , willChange\r
 // 終了位置の変更\r
@@ -101,7 +104,14 @@ var X_Node_ANIMATIONS            = [],
  */\r
 function X_Node_animate( start, dest, duration, easing, wait ){\r
        var isNew = !this[ '_anime' ],\r
-               obj   = this[ '_anime' ] || ( this[ '_anime' ] = {} );\r
+               obj   = this[ '_anime' ];\r
+       \r
+       if( !obj ){\r
+               this[ '_anime' ] = obj = X_Node_Anime_getComputedPosition( this );\r
+               obj.destX = obj.x;\r
+               obj.destY = obj.y;\r
+               obj.destA = obj.a;\r
+       };\r
        \r
        obj.duration  = 0 <= duration && X_Type_isFinite( duration ) ? duration : 500;\r
        obj.easing    = ease[ easing ] || ease[ 'circular' ];\r
@@ -344,7 +354,7 @@ function X_Node_Anime_updateAnimation( xnode ){
                case 3 : // TransitionEnd　-> アニメーションの解除\r
                        obj.phase = obj.gpuParent ? 10 : 4;\r
                        \r
-                       console.log( '#### アニメーションの解除 ' + obj.phase );\r
+                       //console.log( '#### アニメーションの解除 ' + obj.phase );\r
                        \r
                        // このタイミングで animation 関連の css を削除したところ(X_Node_Anime_clearTransition)、iOS3、4 で再描画忘れが度々起きるように、、、\r
                        if( !obj.gpuParent ) X_Node_Anime_clearTransition( xnode );\r
@@ -358,7 +368,7 @@ function X_Node_Anime_updateAnimation( xnode ){
                case 10 :\r
                        // アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機)\r
                        if( !obj.gpuTimerID ){\r
-                               console.log( '#### アニメーションは停止 ' + obj.wait );\r
+                               //console.log( '#### アニメーションは停止 ' + obj.wait );\r
                                if( obj.wait ){\r
                                        obj.gpuTimerID = X_Timer_once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );\r
                                } else {\r
@@ -419,20 +429,32 @@ function X_Node_Anime_updateAnimation( xnode ){
        };\r
 };\r
 \r
-function X_Node_Anime_getComputedPosition( that ) {\r
-       var matrix = X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ),\r
-               x, y;\r
+function X_Node_Anime_getComputedPosition( that ){\r
+       var raw = that[ '_rawObject' ],\r
+               x = 0, y = 0, a = 1, matrix;\r
 \r
-       if ( X_Node_Anime_hasTransform ) {\r
-               matrix = matrix[ X_Node_CSS_VENDER_PREFIX[ 'transform' ] ].split( ')' )[ 0 ].split( ', ' );\r
-               x = + ( matrix[ 12 ] || matrix[ 4 ] );\r
-               y = + ( matrix[ 13 ] || matrix[ 5 ] );\r
-       } else {\r
-               x = + parseFloat( matrix.left );\r
-               y = + parseFloat( matrix.top  );\r
+       if( raw ){\r
+               if( X_Node_Anime_hasTransform ){\r
+                       matrix = X_Node_CSS_getComputedStyle( raw, null );\r
+                       matrix = matrix[ X_Node_CSS_VENDER_PREFIX[ 'transform' ] ].split( ')' )[ 0 ].split( ', ' );\r
+                       x = + ( matrix[ 12 ] || matrix[ 4 ] );\r
+                       y = + ( matrix[ 13 ] || matrix[ 5 ] );\r
+                       a = matrix[ X_Node_CSS_Support[ 'opacity' ] ];\r
+               } else\r
+               if( X_Node_CSS_getComputedStyle ){\r
+                       matrix = X_Node_CSS_getComputedStyle( raw, null );\r
+                       x = parseFloat( matrix[ 'left' ] );\r
+                       y = parseFloat( matrix[ 'top' ]  );\r
+                       a = matrix[ X_Node_CSS_Support[ 'opacity' ] ];\r
+               } else\r
+               if( matrix = raw.currentStyle || raw.style ){\r
+                       x = parseFloat( matrix[ 'left' ] );\r
+                       y = parseFloat( matrix[ 'top' ]  );\r
+                       a = matrix[ 'opacity' ];\r
+               };              \r
        };\r
-       \r
-       return { x : x, y : y, a : matrix[ X_Node_CSS_Support[ 'opacity' ] ] };\r
+\r
+       return { x : x, y : y, a : a };\r
 };\r
 \r
 function X_Node_Anime_onTransitionEnd( e ){\r
@@ -471,7 +493,7 @@ 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
@@ -547,7 +569,7 @@ function X_Node_Anime_updateAnimationsNoTransition( e ){
 \r
                        delete xnode[ '_anime' ];\r
                        X_Node_ANIMATIONS.splice( i, 1 );\r
-                       console.log( obj.destA );\r
+                       //console.log( obj.destA );\r
                        // filter な 親が解除されないと子要素への filter が反映されない\r
                        xnode[ 'asyncDispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : false } );\r
                } else {\r