X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F02_dom%2F10_XNodeAnime.js;h=2c877f22d61cf9cb067c28123b5d08faeb773d40;hb=bfca1aa94da405643253af65c421f6665d6e6262;hp=3464ffb0e7396b43d2af1e4b328bbab097eb8707;hpb=99e4c667c30bf89551a3546d2cef55fc13b2c301;p=pettanr%2FclientJs.git diff --git a/0.6.x/js/02_dom/10_XNodeAnime.js b/0.6.x/js/02_dom/10_XNodeAnime.js index 3464ffb..2c877f2 100644 --- 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 = [], X_NodeAnime_hasTransform = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ], - X_NodeAnime_hasDXTransform = 5.5 <= X_UA[ 'IE' ] && X_UA[ 'IE' ] < 9 && X_UA[ 'ActiveX' ], + X_NodeAnime_hasDXTransform = 5.5 <= X_UA[ 'IE' ] && X_UA[ 'IE' ] < 9 && X_UA[ 'ActiveX' ], // IEHost が 11 の場合不可 /* Opera mobile で translateZ(0) が有効だと XY が 0 0 になる */ /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */ - X_NodeAnime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '', - - X_NodeAnime_transitionProps = X_NodeAnime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top'; + X_NodeAnime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && + !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] && + !( X_UA[ 'IE' ] === 11 ) && !( X_UA[ 'IEHost' ] === 11 ) ? ' translateZ(0)' : '', /* * phase: @@ -27,7 +27,7 @@ var X_NodeAnime_QUEUE = [], * 7: アニメーション中 */ -var X_NODE_ANIME_RESET = 1, + X_NODE_ANIME_RESET = 1, X_NODE_ANIME_STAY_GPU = 2, X_NodeAnime_DEFAULT = { @@ -47,7 +47,7 @@ var X_NODE_ANIME_RESET = 1, scrollY : NaN, fromScrollY : NaN, toScrollY : NaN //, //doScroll : false//, //duration : 0 - //phase, lazyRelease, easing, follower, releaseNow, inited, progress doScroll, fallbackKind + //phase, lazyRelease, easing, follower, releaseNow, inited, progress, fallback // fromTime, toTime }; @@ -144,16 +144,18 @@ function X_Node_animate( obj ){ obj.transform = ( X_Type_isFinite( obj.x ) || X_Type_isFinite( obj.y ) || obj.lazyRelease ) && X_NodeAnime_hasTransform; obj.doScroll = 0 <= obj.toScrollX || 0 <= obj.toScrollY; obj.fallback = 0; + obj.altX = fallback & 8 ? 'right' : 'left'; + obj.altY = fallback & 16 ? 'bottom' : 'top'; // scale - if( obj.toScaleX !== 1 && obj.fromScaleX !== 1 && obj.toScaleY !== 1 && obj.fromScaleY !== 1 ){ + if( obj.toScaleX !== 1 || obj.fromScaleX !== 1 || obj.toScaleY !== 1 || obj.fromScaleY !== 1 ){ sameRate = obj.fromScaleX === obj.fromScaleY && obj.toScaleX === obj.toScaleY; if( X_NodeAnime_hasTransform ){ obj.transform = true; } else - if( X_NodeAnime_hasDXTransform && ( fallback & 16 ) ){ // DX Transform - obj.fallback = 16; + if( X_NodeAnime_hasDXTransform && ( fallback & 32 ) ){ // DX Transform + obj.fallback = 32; } else if( ( fallback & 4 ) && sameRate ){ // zoom obj.fallback = 4; @@ -171,8 +173,8 @@ function X_Node_animate( obj ){ if( X_NodeAnime_hasTransform ){ obj.transform = true; } else - if( X_NodeAnime_hasDXTransform && ( fallback & 16 ) ){ // DX Transform - obj.fallback = 16; + if( X_NodeAnime_hasDXTransform && ( fallback & 32 ) ){ // DX Transform + obj.fallback = 32; }; }; @@ -315,7 +317,7 @@ function X_NodeAnime_stopNow( xnode ){ */ function X_NodeAnime_detectWaitAnimation( xnode, duration, isTest ){ var list = X_NodeAnime_QUEUE, - i = 0, _xnode; + i = 0, _xnode, obj; for( ; _xnode = list[ i ]; ++i ){ if( _xnode === xnode ) break; @@ -351,7 +353,7 @@ function X_NodeAnime_updateAnimations( e ){ now = X_Timer_now(), c = false, i, xnode, obj, _xnode, - rm, easing, lazy; + rm, progress, easing, lazy; if( X_NodeAnime_needsDetection ){ X_NodeAnime_needsDetection = false; @@ -381,8 +383,8 @@ function X_NodeAnime_updateAnimations( e ){ switch( obj.phase ){ case 7 : // アニメーション中 if( now < obj.toTime ){ - obj.progress = ( now - obj.fromTime ) / obj.duration; - easing = obj.easing( obj.progress ); + obj.progress = progress = ( now - obj.fromTime ) / obj.duration; + easing = obj.easing( progress ); obj.x = ( obj.toX - obj.fromX ) * easing + obj.fromX; obj.y = ( obj.toY - obj.fromY ) * easing + obj.fromY; obj.rotate = ( obj.toRotate - obj.fromRotate ) * easing + obj.fromRotate; @@ -393,7 +395,7 @@ function X_NodeAnime_updateAnimations( e ){ obj.alpha = ( obj.toAlpha - obj.fromAlpha ) * easing + obj.fromAlpha; obj.scrollX = ( obj.toScrollX - obj.fromScrollX ) * easing + obj.fromScrollX; obj.scrollY = ( obj.toScrollY - obj.fromScrollY ) * easing + obj.fromScrollY; - X_NodeAnime_updatePosition( xnode, obj, obj.progress, true ); + X_NodeAnime_updatePosition( xnode, obj, progress, true ); c = true; break; }; @@ -520,7 +522,7 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){ //console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU ); if( obj.transform ){ - if( x === x || y === y ) str += ' translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)'; + if( ( x === x || y === y ) && ( x !== 0 && y !== 0 ) ) str += ' translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)'; if( rotate < 0 || 0 < rotate ) str += ' rotate(' + rotate + 'deg)'; // opera は　rad? if( skewX < 0 || 0 < skewX ) str += ' skewX(' + skewX + 'deg)'; if( skewY < 0 || 0 < skewY ) str += ' skewY(' + skewY + 'deg)'; @@ -549,11 +551,11 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){ }; }; } else - if( obj.fallback === 16 ){ - xnode[ 'css' ]( 'dxtransform', [ x | 0, y | 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY ] ); + if( obj.fallback === 32 ){ + xnode[ 'css' ]( 'dxtransform', [ x | 0, y | 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY, obj.altX, obj.altY ] ); } else { - x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' ); - y === y && xnode[ 'css' ]( 'top', ( y | 0 ) + 'px' ); + x === x && xnode[ 'css' ]( obj.altX, ( x | 0 ) + 'px' ); + y === y && xnode[ 'css' ]( obj.altY, ( y | 0 ) + 'px' ); switch( obj.fallback ){ case 4 : @@ -570,8 +572,8 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){ if( obj.doScroll && xnode[ '_rawObject' ] ){ console.log( 'ok ' + ratio ); - xnode[ '_rawObject' ].scrollLeft = obj.scrollX | 0; - xnode[ '_rawObject' ].scrollTop = obj.scrollY | 0; + xnode[ '_rawObject' ].scrollLeft = obj.scrollX | 0; + xnode[ '_rawObject' ].scrollTop = obj.scrollY | 0; //X_Node_reserveUpdate(); };