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=e68b852855547bf69c2883de602db02a96eafce2;hpb=eedd028ba64be2ea0828cf686f1d0ec3bb4010d5;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 e68b852..0b5a8a8 100644
--- a/0.6.x/js/02_dom/10_XNodeAnime.js
+++ b/0.6.x/js/02_dom/10_XNodeAnime.js
@@ -61,17 +61,18 @@ var X_Node_ANIMATIONS            = [],
 	X_Node_Anime_reserved        = false,
 	X_Node_Anime_updateTimerID   = 0,
 	X_Node_Anime_needsDetection  = false,
+	X_Node_Anime_onTransition    = false,
+	
 	X_Node_Anime_hasTransform    = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],
 	/* Opera mobile で  translateZ(0) が有効だと XY が 0 0 になる */
 	/* 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_Anime_onTransition    = false;
+	X_Node_updateOnTransitionEnd = false; //X_UA[ 'iOS' ] < 6;
 
 // gpu化だけ transformX , willChange
 // 終了位置の変更
@@ -84,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' ],
@@ -123,10 +125,19 @@ Node.prototype[ 'animate' ] = function( start, dest, duration, easing, wait ){
 		
 		X_Node_Anime_reserveUpdate( true );
 	} else {
-		X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );
-		X_Node_Anime_updateTimerID || ( X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition ) );
+		if( !X_Node_Anime_reserved ){
+			X_Node_Anime_reserved = true;
+			if( X_Node_updateTimerID ){
+				X_System[ 'listen' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );
+				X_Node_Anime_updateTimerID && X_Timer_cancelFrame( X_Node_Anime_updateTimerID );
+				X_Node_Anime_updateTimerID = 0;
+			} else {
+				X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );
+				X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition );
+			};
+		};
 		
-		isNew && this[ 'dispatch' ]( { type : X_EVENT_ANIME_START, gpu : false } );
+		isNew && this[ 'dispatch' ]( { type : X_EVENT_ANIME_START, 'gpu' : false } );
 	};
 	
 	// console.log( 'animate() ' + this[ '_id' ] + ' y:' + obj.startY + ' > ' + obj.destY + ' d:' + obj.duration );
@@ -146,7 +157,7 @@ Node.prototype[ 'stop' ] = function(){
 	} else {
 		X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );
 		//obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID );
-		delete this[ '_anime' ];		
+		delete this[ '_anime' ];
 	};
 	return this;
 };
@@ -173,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 );
 	
@@ -294,7 +305,7 @@ function X_Node_Anime_updateAnimation( xnode ){
 			//console.log( '開始位置 ' + phase );
 			X_Node_Anime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, phase === 8 );
 			
-			xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_START, gpu : phase === 8 } );
+			xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_START, 'gpu' : phase === 8 } );
 			++obj.phase;
 			break;
 		case  1 :
@@ -318,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 :
@@ -332,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 {
@@ -355,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;
@@ -374,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;
 		
@@ -408,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 の更新イベント待ちの場合、アニメが止まる
@@ -418,8 +434,10 @@ 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 } );
+	this[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : this[ '_anime' ].gpuParent } );
 	X_Node_Anime_onTransition = false;
 	
 	X_Node_Anime_needsDetection = true;
@@ -441,14 +459,14 @@ 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 );
 };
 
 function X_Node_Anime_gpuReleased(){
 	//console.log( 'GPU レイヤーが解放されました' );
-	this[ 'dispatch' ]( { type : X_EVENT_GPU_RELEASED, gpu : true } );
+	this[ 'dispatch' ]( { type : X_EVENT_GPU_RELEASED, 'gpu' : true } );
 };
 
 function X_Node_Anime_clearTransition( xnode ){
@@ -467,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 : '' ),
@@ -504,7 +522,7 @@ function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){
 	};
 };
 
-function X_Node_Anime_updateAnimationsNoTransition(){
+function X_Node_Anime_updateAnimationsNoTransition( e ){
 	var i = X_Node_ANIMATIONS.length,
 		now = X_Timer_now(),
 		obj,
@@ -522,7 +540,7 @@ function X_Node_Anime_updateAnimationsNoTransition(){
 			X_Node_ANIMATIONS.splice( i, 1 );
 			
 			// filter な 親が解除されないと子要素への filter が反映されない
-			xnode[ 'asyncDispatch' ]( { type : X_EVENT_ANIME_END, gpu : false } );
+			xnode[ 'asyncDispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : false } );
 		} else {
 			easing = obj.easing.fn( ( now - obj.startTime ) / obj.duration );
 			newX   = ( obj.destX - obj.startX ) * easing + obj.startX;
@@ -536,14 +554,21 @@ function X_Node_Anime_updateAnimationsNoTransition(){
 		};
 	};
 	
-	if( c ){
+	c && console.log( 'anime... ' + X_Node_updateTimerID );
+	
+	if( X_Node_Anime_reserved = c ){
 		if( X_Node_updateTimerID ){
-			X_System[ 'listen' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );
+			// scrollbox では X_System X_EVENT_UPDATED は不可。。。
+			!e || e.type !== X_EVENT_UPDATED ?
+				X_System[ 'listen' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition ) :
+				X_Node_Anime_updateTimerID && X_Timer_cancelFrame( X_Node_Anime_updateTimerID );
 			X_Node_Anime_updateTimerID = 0;
 		} else {
+			X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );
 			X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition );
 		};
 	} else {
+		X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );
 		X_Node_Anime_updateTimerID = 0;
 	};
 };