OSDN Git Service

(root) / pettanr / clientJs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Version 0.6.214, bug fixes X.KB.
[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 4613689..2c877f2 100644 (file)
--- a/0.6.x/js/02_dom/10_XNodeAnime.js
+++ b/0.6.x/js/02_dom/10_XNodeAnime.js
@@ -7,13 +7,13 @@ var X_NodeAnime_QUEUE           = [],
        \r
        X_NodeAnime_hasTransform    = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],\r
        \r
-       X_NodeAnime_hasDXTransform  = 5.5 <= X_UA[ 'IE' ] && X_UA[ 'IE' ] < 9 && X_UA[ 'ActiveX' ],\r
+       X_NodeAnime_hasDXTransform  = 5.5 <= X_UA[ 'IE' ] && X_UA[ 'IE' ] < 9 && X_UA[ 'ActiveX' ], // IEHost が 11 の場合不可\r
        \r
        /* Opera mobile で  translateZ(0) が有効だと XY が 0 0 になる */\r
        /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */\r
-       X_NodeAnime_translateZ      = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '',\r
-\r
-       X_NodeAnime_transitionProps = X_NodeAnime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top';\r
+       X_NodeAnime_translateZ      = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] &&\r
+                                                                       !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] &&\r
+                                                                       !( X_UA[ 'IE' ] === 11 ) && !( X_UA[ 'IEHost' ] === 11 ) ? ' translateZ(0)' : '',\r
 \r
 /*\r
  * phase:\r
@@ -25,19 +25,18 @@ var X_NodeAnime_QUEUE           = [],
  *  5: GPU解除待ち\r
  *  6: 開始可能\r
  *  7: アニメーション中\r
- * TODO node.css( 'opacity' ) の上書き\r
  */\r
 \r
-var X_NODE_ANIME_RESET = 1,\r
+       X_NODE_ANIME_RESET = 1,\r
        X_NODE_ANIME_STAY_GPU = 2,\r
        \r
        X_NodeAnime_DEFAULT = {\r
-               x        : X_NodeAnime_hasTransform ? 0 : NaN,\r
-               y        : X_NodeAnime_hasTransform ? 0 : NaN,\r
-               toX      : X_NodeAnime_hasTransform ? 0 : NaN,\r
-               toY      : X_NodeAnime_hasTransform ? 0 : NaN,\r
-               fromX    : X_NodeAnime_hasTransform ? 0 : NaN,\r
-               fromY    : X_NodeAnime_hasTransform ? 0 : NaN,\r
+               x        : NaN,\r
+               y        : NaN,\r
+               toX      : NaN,\r
+               toY      : NaN,\r
+               fromX    : NaN,\r
+               fromY    : NaN,\r
                rotate   : NaN, fromRotate   : NaN, toRotate   : NaN,\r
                skewX    : NaN, fromSkewX    : NaN, toSkewX    : NaN,\r
                skewY    : NaN, fromSkewY    : NaN, toSkewY    : NaN,\r
@@ -45,10 +44,10 @@ var X_NODE_ANIME_RESET = 1,
                scaleY   : 1,   fromScaleY   : 1,   toScaleY   : 1,\r
                alpha    : NaN,\r
                scrollX  : NaN, fromScrollX  : NaN, toScrollX  : NaN,\r
-               scrollY  : NaN, fromScrollY  : NaN, toScrollY  : NaN,\r
-               doScroll : false//,\r
+               scrollY  : NaN, fromScrollY  : NaN, toScrollY  : NaN //,\r
+               //doScroll : false//,\r
                //duration : 0\r
-               //phase, lazyRelease, easing, follower, releaseNow, inited, progress doScroll, fallbackKind\r
+               //phase, lazyRelease, easing, follower, releaseNow, inited, progress, fallback\r
                // fromTime, toTime\r
        };\r
 \r
@@ -107,12 +106,6 @@ function X_Node_animate( obj ){
                a = this[ '_css' ] && parseFloat( this[ '_css' ].opacity );\r
                if( 0 <= a ) obj.alpha = a;\r
        };\r
-       \r
-       if( 0 <= duration && X_Type_isFinite( duration ) ){\r
-               obj.duration  = duration;\r
-       };\r
-\r
-       obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];\r
                \r
 // form :\r
        obj.fromX       = obj.x       = X_NodeAnime_getFinite( from[ 'x' ],       obj.x );\r
@@ -137,29 +130,32 @@ function X_Node_animate( obj ){
        obj.toScrollX                 = X_NodeAnime_getFinite( dest[ 'scrollX' ], obj.scrollX );\r
        obj.toScrollY                 = X_NodeAnime_getFinite( dest[ 'scrollY' ], obj.scrollY );\r
 \r
-       if( obj.toRotate && obj.rotate !== obj.rotate ) obj.rotate = 0;\r
-       if( obj.toSkewX  && obj.skewX  !== obj.skewX  ) obj.skewX  = 0;\r
-       if( obj.toSkewY  && obj.skewY  !== obj.skewY  ) obj.skewY  = 0;\r
+       if( X_Type_isFinite( obj.toX ) && X_Type_isNaN( obj.x ) ) obj.x = obj.fromX = 0;\r
+       if( X_Type_isFinite( obj.toY ) && X_Type_isNaN( obj.y ) ) obj.y = obj.fromY = 0;\r
+       \r
+       if( obj.toRotate && X_Type_isNaN( obj.rotate ) ) obj.rotate = obj.fromRotate = 0;\r
+       if( obj.toSkewX  && X_Type_isNaN( obj.skewX  ) ) obj.skewX  = obj.fromSkewX  = 0;\r
+       if( obj.toSkewY  && X_Type_isNaN( obj.skewY  ) ) obj.skewY  = obj.fromSkewY  = 0;\r
 \r
+       obj.duration    = 0 <= duration    && X_Type_isFinite( duration    ) ? duration    : 0;\r
        obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0;\r
-       obj.inited    = false;\r
-       obj.doScroll  = 0 <= obj.toScrollX || 0 <= obj.toScrollY;\r
-       obj.transform = false;\r
-       obj.fallback  = 0;\r
-       \r
-       if( obj.fromX === obj.fromX || obj.fromY === obj.fromY ){\r
-               obj.transform = !!X_NodeAnime_hasTransform;\r
-       };\r
+       obj.easing      = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];\r
+       obj.inited      = false;\r
+       obj.transform   = ( X_Type_isFinite( obj.x ) || X_Type_isFinite( obj.y ) || obj.lazyRelease ) && X_NodeAnime_hasTransform;\r
+       obj.doScroll    = 0 <= obj.toScrollX || 0 <= obj.toScrollY;\r
+       obj.fallback    = 0;\r
+       obj.altX        = fallback & 8  ? 'right'  : 'left'; \r
+       obj.altY        = fallback & 16 ? 'bottom' : 'top';\r
        \r
        // scale\r
-       if( obj.toScaleX !== 1 && obj.fromScaleX !== 1 && obj.toScaleY !== 1 && obj.fromScaleY !== 1 ){\r
+       if( obj.toScaleX !== 1 || obj.fromScaleX !== 1 || obj.toScaleY !== 1 || obj.fromScaleY !== 1 ){\r
                sameRate = obj.fromScaleX === obj.fromScaleY && obj.toScaleX === obj.toScaleY;\r
                \r
                if( X_NodeAnime_hasTransform ){\r
                        obj.transform = true;\r
                } else\r
-               if( X_NodeAnime_hasDXTransform && ( fallback & 16 ) ){ // DX Transform\r
-                       obj.fallback = 16;\r
+               if( X_NodeAnime_hasDXTransform && ( fallback & 32 ) ){ // DX Transform\r
+                       obj.fallback = 32;\r
                } else\r
                if( ( fallback & 4 ) && sameRate ){ // zoom\r
                        obj.fallback = 4;\r
@@ -173,12 +169,12 @@ function X_Node_animate( obj ){
        };\r
 \r
        // rotate, skew\r
-       if( obj.toRotate === obj.toRotate || obj.toSkewX === obj.toSkewX || obj.toSkewY === obj.toSkewY ){\r
+       if( X_Type_isFinite( obj.rotate ) || X_Type_isFinite( obj.skewX ) || X_Type_isFinite( obj.skewY ) ){\r
                if( X_NodeAnime_hasTransform ){\r
                        obj.transform = true;\r
                } else\r
-               if( X_NodeAnime_hasDXTransform && ( fallback & 16 ) ){ // DX Transform\r
-                       obj.fallback = 16;\r
+               if( X_NodeAnime_hasDXTransform && ( fallback & 32 ) ){ // DX Transform\r
+                       obj.fallback = 32;\r
                };\r
        };\r
 \r
@@ -321,7 +317,7 @@ function X_NodeAnime_stopNow( xnode ){
  */\r
 function X_NodeAnime_detectWaitAnimation( xnode, duration, isTest ){\r
        var list = X_NodeAnime_QUEUE,\r
-               i    = 0, _xnode;\r
+               i    = 0, _xnode, obj;\r
        \r
        for( ; _xnode = list[ i ]; ++i ){\r
                if( _xnode === xnode ) break;\r
@@ -341,8 +337,8 @@ function X_NodeAnime_detectWaitAnimation( xnode, duration, isTest ){
        //           -> いない、アニメーションが可能\r
        for( i = 0; _xnode = list[ i ]; ++i ){\r
                if( _xnode === xnode ) break;\r
-\r
-               if( 6 <= _xnode[ '_anime' ].phase ){\r
+               obj = _xnode[ '_anime' ];\r
+               if( 6 <= obj.phase ){\r
                        if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){\r
                                return isTest ? 3 : _xnode;\r
                        };\r
@@ -357,7 +353,7 @@ function X_NodeAnime_updateAnimations( e ){
                now  = X_Timer_now(),\r
                c    = false,\r
                i, xnode, obj, _xnode,\r
-               rm, easing, lazy;\r
+               rm, progress, easing, lazy;\r
        \r
        if( X_NodeAnime_needsDetection ){\r
                X_NodeAnime_needsDetection = false;\r
@@ -387,8 +383,8 @@ function X_NodeAnime_updateAnimations( e ){
                switch( obj.phase ){\r
                        case 7 : // アニメーション中\r
                                if( now < obj.toTime ){\r
-                                       obj.progress = ( now - obj.fromTime ) / obj.duration;\r
-                                       easing      = obj.easing( obj.progress );\r
+                                       obj.progress = progress = ( now - obj.fromTime ) / obj.duration;\r
+                                       easing      = obj.easing( progress );\r
                                        obj.x       = ( obj.toX       - obj.fromX       ) * easing + obj.fromX;\r
                                        obj.y       = ( obj.toY       - obj.fromY       ) * easing + obj.fromY;\r
                                        obj.rotate  = ( obj.toRotate  - obj.fromRotate  ) * easing + obj.fromRotate;\r
@@ -399,7 +395,7 @@ function X_NodeAnime_updateAnimations( e ){
                                        obj.alpha   = ( obj.toAlpha   - obj.fromAlpha   ) * easing + obj.fromAlpha;\r
                                        obj.scrollX = ( obj.toScrollX - obj.fromScrollX ) * easing + obj.fromScrollX;\r
                                        obj.scrollY = ( obj.toScrollY - obj.fromScrollY ) * easing + obj.fromScrollY;\r
-                                       X_NodeAnime_updatePosition( xnode, obj, obj.progress, true );\r
+                                       X_NodeAnime_updatePosition( xnode, obj, progress, true );\r
                                        c = true;\r
                                        break;\r
                                };\r
@@ -511,6 +507,8 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){
                scaleX = obj.scaleX = obj.toScaleX;\r
                scaleY = obj.scaleY = obj.toScaleY;\r
                alpha  = obj.alpha  = obj.toAlpha;\r
+               obj.scrollX = obj.toScrollX;\r
+               obj.scrollY = obj.toScrollY;\r
        } else {\r
                x      = obj.x;\r
                y      = obj.y;\r
@@ -524,7 +522,7 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){
        \r
        //console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU );\r
        if( obj.transform ){\r
-               if( x === x || y === y ) str += ' translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)';\r
+               if( ( x === x || y === y ) && ( x !== 0 && y !== 0 ) ) str += ' translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)';\r
                if( rotate < 0 || 0 < rotate ) str += ' rotate(' + rotate + 'deg)'; // opera は　rad?\r
                if( skewX  < 0 || 0 < skewX  ) str += ' skewX('  + skewX  + 'deg)';\r
                if( skewY  < 0 || 0 < skewY  ) str += ' skewY('  + skewY  + 'deg)';\r
@@ -553,11 +551,11 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){
                        };              \r
                };              \r
        } else\r
-       if( obj.fallback === 16 ){\r
-               xnode[ 'css' ]( 'dxtransform', [ x || 0, y || 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY ] );\r
+       if( obj.fallback === 32 ){\r
+               xnode[ 'css' ]( 'dxtransform', [ x | 0, y | 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY, obj.altX, obj.altY ] );\r
        } else {\r
-               x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' );\r
-               y === y && xnode[ 'css' ]( 'top',  ( y | 0 ) + 'px' );\r
+               x === x && xnode[ 'css' ]( obj.altX, ( x | 0 ) + 'px' );\r
+               y === y && xnode[ 'css' ]( obj.altY, ( y | 0 ) + 'px' );\r
                \r
                switch( obj.fallback ){\r
                        case 4 :\r
@@ -572,6 +570,13 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){
                };\r
        };\r
        \r
+       if( obj.doScroll && xnode[ '_rawObject' ] ){\r
+               console.log( 'ok ' + ratio );\r
+               xnode[ '_rawObject' ].scrollLeft = obj.scrollX | 0;\r
+               xnode[ '_rawObject' ].scrollTop  = obj.scrollY | 0;\r
+               //X_Node_reserveUpdate();\r
+       };\r
+       \r
        alpha === alpha && xnode[ 'css' ]( 'opacity', alpha );\r
 };\r
 \r
クライアント側 js 開発用
About OSDN
Find Software
Develop Software
Help