X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F02_dom%2F10_XNodeAnime.js;h=39131958a1c61699fe92d84a3c22496dc09736ca;hb=2956150a7c2798e60639b36d69b0c13f6b20a62a;hp=0b5a8a8d64c54651e085434134f0942118354dad;hpb=adbf9e9a2c7d8e6857774f774742a7ff6fb50600;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 0b5a8a8..3913195 100644 --- a/0.6.x/js/02_dom/10_XNodeAnime.js +++ b/0.6.x/js/02_dom/10_XNodeAnime.js @@ -1,26 +1,26 @@ var ease = { - quadratic: { + 'quadratic' : { style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', fn: function (k) { return k * ( 2 - k ); } }, - circular: { + 'circular' : { style: 'cubic-bezier(0.1, 0.57, 0.1, 1)', // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 1) fn: function (k) { return Math.sqrt( 1 - ( --k * k ) ); } }, - back: { + 'back' : { style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)', fn: function (k) { var b = 4; return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1; } }, - bounce: { + 'bounce' : { style: '', fn: function (k) { if ( ( k /= 1 ) < ( 1 / 2.75 ) ) { @@ -34,7 +34,7 @@ var } } }, - elastic: { + 'elastic' : { style: '', fn: function (k) { var f = 0.22, @@ -79,6 +79,7 @@ var X_Node_ANIMATIONS = [], // 中断 /* + * TODO : DX Anime * TODO : scale, ActiveX transform, zoom, fontSizeScale * TODO : rotate, ActiveX transform -> 位置補正のために size 情報が必要なので、commitUpdate 後に計算して適用 * TODO : matrix @@ -92,20 +93,20 @@ Node.prototype[ 'animate' ] = function( start, dest, duration, easing, wait ){ obj = this[ '_anime' ] || ( this[ '_anime' ] = {} ); obj.duration = 0 <= duration && X_Type_isFinite( duration ) ? duration : 500; - obj.easing = ease[ easing ] || ease.circular; + obj.easing = ease[ easing ] || ease[ 'circular' ]; // 現在 GPUレイヤーのtop になっているか?将来については phase で判定 obj.gpuParent = obj.gpuParent || false; obj.phase = duration === 0 ? 9 : obj.phase === 9 ? 9 : 0; // obj.wait = X_Type_isFinite( wait ) ? wait : 1000; obj.startTime = X_Timer_now(); - obj.startX = ( start.x || start.x === 0 ) ? start.x : obj.x || 0; - obj.startY = ( start.y || start.y === 0 ) ? start.y : obj.y || 0; + obj.startX = ( start.x || start.x === 0 ) ? start.x : obj.x || NaN; + obj.startY = ( start.y || start.y === 0 ) ? start.y : obj.y || NaN; obj.startA = 0 <= start.opacity && start.opacity <= 1 ? start.opacity : obj.a || 1; obj.destTime = obj.startTime + obj.duration; - obj.destX = ( dest.x || dest.x === 0 ) ? dest.x : obj.destX || 0; - obj.destY = ( dest.y || dest.y === 0 ) ? dest.y : obj.destY || 0; + obj.destX = ( dest.x || dest.x === 0 ) ? dest.x : obj.destX || NaN; + obj.destY = ( dest.y || dest.y === 0 ) ? dest.y : obj.destY || NaN; obj.destA = 0 <= dest.opacity && dest.opacity <= 1 ? dest.opacity : obj.destA || 1; X_Node_ANIMATIONS.indexOf( this ) === -1 && @@ -489,14 +490,15 @@ function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){ if( X_Node_Anime_hasTransform ){ xnode[ 'css' ]({ transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ), - opacity : opacity + opacity : opacity === 1 ? '' : opacity }); } else { - xnode[ 'css' ]({ + x === x && xnode[ 'css' ]({ left : ( x | 0 ) + 'px', + opacity : opacity === 1 ? '' : opacity }); + y === y && xnode[ 'css' ]({ top : ( y | 0 ) + 'px', - opacity : opacity - }); + opacity : opacity === 1 ? '' : opacity }); }; if( X_Node_Anime_translateZ ){