X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F02_dom%2F10_XNodeAnime.js;h=0b5a8a8d64c54651e085434134f0942118354dad;hb=6c4c72f7e862c9f950bfb3562adda24c39498abd;hp=56c8adf9401b8c7cf1082e89801a767ec230590d;hpb=5d1a420699bfb2a488fb7a33cb1f9d6ed3164ee4;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 56c8adf..0b5a8a8 100644 --- a/0.6.x/js/02_dom/10_XNodeAnime.js +++ b/0.6.x/js/02_dom/10_XNodeAnime.js @@ -68,11 +68,11 @@ var X_Node_ANIMATIONS = [], /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox, 手当てが済むまでここは常に false */ X_Node_Anime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '', /* Opera12(XP,8.1) 切った方がスムース, win Safari3 で、たまに動作が止まってしまう、、、 */ - X_Node_Anime_hasTransition = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X_UA[ 'Opera' ] && !( X_UA[ 'Webkit' ] <= 528.16 ), + X_Node_Anime_hasTransition = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X_UA[ 'Opera' ], // && !( X_UA[ 'Webkit' ] <= 528.16 ), X_Node_Anime_transitionProps = X_Node_Anime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top', // transitionEnd イベント中に要素の更新( X_Node_startUpdate() )ができるか? // iOS3+4 では可能、iOS6.1.5 で不可。TODO iOS5 及び他の環境で調査。ダメな場合、anime.html が正しく描画されない。 - X_Node_updateOnTransitionEnd = X_UA[ 'iOS' ] < 6; + X_Node_updateOnTransitionEnd = false; //X_UA[ 'iOS' ] < 6; // gpu化だけ transformX , willChange // 終了位置の変更 @@ -85,6 +85,7 @@ var X_Node_ANIMATIONS = [], * TODO : skew * TODO : filter * TODO 前回位置からの継続 + * TODO scrollLeft, scrollTop */ Node.prototype[ 'animate' ] = function( start, dest, duration, easing, wait ){ var isNew = !this[ '_anime' ], @@ -183,7 +184,7 @@ function X_Node_Anime_reserveUpdate( before ){ }; function X_Node_Anime_updateAnimations( v, updateNow ){ - var i = X_Node_ANIMATIONS.length, ret, c = false; + var i = X_Node_ANIMATIONS.length, c = false, ret, xnode; // console.log( v.type || v ); @@ -328,9 +329,12 @@ function X_Node_Anime_updateAnimation( xnode ){ case 3 : // アニメーションの解除 obj.phase = obj.gpuParent ? 10 : 4; + + console.log( '#### アニメーションの解除 ' + obj.phase ); + // このタイミングで animation 関連の css を削除したところ(X_Node_Anime_clearTransition)、iOS3、4 で再描画忘れが度々起きるように、、、 if( !obj.gpuParent ) X_Node_Anime_clearTransition( xnode ); - xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } ); + //xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } ); break; case 4 : @@ -342,6 +346,7 @@ function X_Node_Anime_updateAnimation( xnode ){ // アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機) //X_Node_Anime_clearTransition( xnode ); // TODO X_Node_Anime_releaseGPULayer に移動? if( !obj.gpuTimerID ){ + console.log( '#### アニメーションは停止 ' + obj.wait ); if( obj.wait ){ obj.gpuTimerID = X_Timer_once( obj.wait, xnode, X_Node_Anime_releaseGPULayer ); } else { @@ -365,7 +370,7 @@ function X_Node_Anime_updateAnimation( xnode ){ X_Node_Anime_clearTransition( xnode ); X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, phase === 14 ); obj.phase = phase === 14 ? 10 : 4; - xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } ); + xnode[ 'asyncDispatch' ]( time, { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } ); } else { current = X_Node_Anime_getComputedPosition( xnode ); obj.startX = current.x; @@ -384,7 +389,8 @@ function X_Node_Anime_updateAnimation( xnode ){ // console.log( 'GPU有効で停止(待機)している xnode のGPU解除' ); X_Node_Anime_clearTransition( xnode ); X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false ); - obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID ); + //obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID ); + //delete obj.gpuTimerID; X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased ); return true; @@ -418,7 +424,7 @@ function X_Node_Anime_getComputedPosition( that ) { }; function X_Node_Anime_onTransitionEnd( e ){ - // console.log( 'アニメ終了[onTransitionEnd] ' + ( this[ '_anime' ] && this[ '_anime' ].phase ) ); + console.log( '[TransitionEnd] ' + ( this[ '_anime' ] && this[ '_anime' ].phase ) ); if( !this[ '_anime' ] || this[ '_anime' ].phase !== 2 ){ // ここで return してしまうと、view の更新イベント待ちの場合、アニメが止まる @@ -428,6 +434,8 @@ function X_Node_Anime_onTransitionEnd( e ){ this[ '_anime' ].phase = 3; + X_Node_Anime_clearTransition( this ); // X_EVENT_ANIME_END より前で呼んでおく + X_Node_Anime_onTransition = true; this[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : this[ '_anime' ].gpuParent } ); X_Node_Anime_onTransition = false; @@ -451,7 +459,7 @@ function X_Node_Anime_releaseGPULayer(){ X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 ); delete obj.gpuTimerID; delete this[ '_anime' ]; - //console.log( 'GPUレイヤーの破棄を指示' ); + console.log( 'GPUレイヤーの破棄を指示' ); X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, X_Node_Anime_gpuReleased ); }; @@ -477,7 +485,7 @@ function X_Node_Anime_clearTransition( xnode ){ }; function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){ - // console.log( 'updatePosition y:' + y + ' gpu:' + !!useGPU ); + console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU ); if( X_Node_Anime_hasTransform ){ xnode[ 'css' ]({ transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ),