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=ec0dac9cde6e1e53cbb82f612d728f4dd41f1e2f;hpb=29f2a2e24ee1eea5a80e1345570fd75de6dcdbf4;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 ec0dac9..0b5a8a8 100644
--- a/0.6.x/js/02_dom/10_XNodeAnime.js
+++ b/0.6.x/js/02_dom/10_XNodeAnime.js
@@ -1,5 +1,4 @@
 
-
 var
 	ease = {
 		quadratic: {
@@ -59,168 +58,216 @@ var
 // アニメ中の remove
 
 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 になる */
-	X_Node_Anime_translateZ      = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X.UA.OperaMobile && !X.UA.OperaTablet ? ' translateZ(0)' : '',
-	X_Node_Anime_hasTransition   = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X.UA.Opera, // Opera12(XP,8.1) 切った方がスムース
-	X_Node_Anime_transitionProps = X_Node_Anime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top';
+	/* 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_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 = false; //X_UA[ 'iOS' ] < 6;
 
-Node.prototype.animate = function( start, dest, duration, easing, wait ){
-	var obj = this._anime || ( this._anime = {} ), current;
-	
-	if( X_Node_Anime_hasTransition && this._rawObject ){
-		current = {}; //X_Node_Anime_getComputedPosition( this );
-	};
+// gpu化だけ transformX , willChange
+// 終了位置の変更
+// 中断
+
+/*
+ * TODO : scale,  ActiveX transform, zoom, fontSizeScale
+ * TODO : rotate, ActiveX transform -> 位置補正のために size 情報が必要なので、commitUpdate 後に計算して適用
+ * TODO : matrix
+ * TODO : skew
+ * TODO : filter
+ * TODO 前回位置からの継続
+ * TODO scrollLeft, scrollTop
+ */
+Node.prototype[ 'animate' ] = function( start, dest, duration, easing, wait ){
+	var isNew = !this[ '_anime' ],
+		obj   = this[ '_anime' ] || ( this[ '_anime' ] = {} );
 	
-	obj.duration  = X.Type.isFinite( duration ) && 0 <= duration ? duration : 500;
+	obj.duration  = 0 <= duration && X_Type_isFinite( duration ) ? duration : 500;
 	obj.easing    = ease[ easing ] || ease.circular;
 	// 現在 GPUレイヤーのtop になっているか？将来については phase で判定
 	obj.gpuParent = obj.gpuParent || false;
-	obj.phase     = duration === 0 ? 9 : 0; //
-	obj.wait      = X.Type.isFinite( wait ) ? wait : 1000;
+	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 || current && current.x || 0;
-	obj.startY    = ( start.y || start.y === 0 ) ? start.y : obj.y || current && current.y || 0;
-	obj.startA    = 0 <= start.opacity && start.opacity <= 1 ? start.opacity : obj.a || current && current.a || 1;
+	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.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.destA     = 0 <= dest.opacity && dest.opacity <= 1 ? dest.opacity : obj.destA || 1;
 
+	X_Node_ANIMATIONS.indexOf( this ) === -1 &&
+		( X_Node_ANIMATIONS[ X_Node_ANIMATIONS.length ] = this );
+
 	
-	if( obj.gpuTimerID ){
-		X.Timer.remove( obj.gpuTimerID );
-		delete obj.gpuTimerID;
-	};
-	
-	X_Node_Anime_needsDetection = true;
+	if( X_Node_Anime_onTransition ) return this;
+
 	if( X_Node_Anime_hasTransition ){
-		X_Node_Anime_reserveUpdate();
+		
+		if( obj.gpuTimerID ){
+			X_Timer_remove( obj.gpuTimerID );
+			delete obj.gpuTimerID;
+		};		
+		
+		X_Node_Anime_needsDetection = true;
+		
+		X_Node_Anime_reserveUpdate( true );
 	} else {
-		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 } );
 	};
-
-	X_Node_ANIMATIONS.indexOf( this ) === -1 &&
-		( X_Node_ANIMATIONS[ X_Node_ANIMATIONS.length ] = this );
 	
-	//console.log( 'animate ' + this._id + ' y:' + obj.startY + ' > ' + obj.destY + ' d:' + obj.duration );
+	// console.log( 'animate() ' + this[ '_id' ] + ' y:' + obj.startY + ' > ' + obj.destY + ' d:' + obj.duration );
 	
 	return this;
 };
 
-Node.prototype.stop = function(){
-	var obj = this._anime;
-	if( !obj ) return;
+Node.prototype[ 'stop' ] = function(){
+	var obj = this[ '_anime' ];
+	
+	if( !obj ) return this;
+	
 	if( X_Node_Anime_hasTransition ){
 		obj.phase = 100;
 		X_Node_Anime_needsDetection = true;
 		X_Node_Anime_reserveUpdate();
 	} else {
 		X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );
-		obj.gpuTimerID && X.Timer.remove( obj.gpuTimerID );
-		delete this._anime;		
+		//obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID );
+		delete this[ '_anime' ];
 	};
 	return this;
 };
 
-function X_Node_Anime_reserveUpdate(){
-	if( !X_Node_Anime_updateTimerID ){
-		// Opera12 requestAnimationFrame では transition が動かない、、、
-		X_Node_Anime_updateTimerID =
-			X_UA.Opera ?
-				X.Timer.once( 0, X_Node_Anime_updateAnimations ) :
-				X.Timer.requestFrame( X_Node_Anime_updateAnimations );
+function X_Node_Anime_reserveUpdate( before ){
+	if( !X_Node_Anime_reserved ){
+		X_Node_Anime_reserved = true;
+		
+		if( X_Node_updateTimerID ){
+			//console.log( before ? '> BEFORE_UPDATE' : '> UPDATED' );
+			before = false;
+			X_System[ 'listenOnce' ]( before ? X_EVENT_BEFORE_UPDATE : X_EVENT_UPDATED, X_Node_Anime_updateAnimations );
+		} else {
+			//console.log( '> Timer' );
+			// Opera12 requestAnimationFrame では transition が動かない、、、
+			X_Node_Anime_updateTimerID =
+				X_UA[ 'Opera' ] ?
+					X_Timer_once( 0, X_Node_Anime_updateAnimations ) :
+					X_Timer_requestFrame( X_Node_Anime_updateAnimations );
+		};
+	} else {
+		// console.log( ' X_Node_Anime_reserved 済、予約なし' );
 	};
 };
 
-function X_Node_Anime_updateAnimations(){
-	var i = X_Node_ANIMATIONS.length, ret, c = false;
+function X_Node_Anime_updateAnimations( v, updateNow ){
+	var i = X_Node_ANIMATIONS.length, c = false, ret, xnode;
 	
-	//console.log( 'updateAnimations ' + i + ' ' + X_Node_Anime_needsDetection );
+	// console.log( v.type || v );
+	
+	//console.log( 'updateAnimations len:' + i + ' time:' + v + ' det:' + X_Node_Anime_needsDetection );
 	
 	if( X_Node_Anime_needsDetection ) X_Node_Anime_detectAnimationLayers();
 	
 	for( ; i; ){
 		xnode = X_Node_ANIMATIONS[ --i ];
-		//console.log( 'phase : ' + xnode._id + ' ' + xnode._anime.phase + ' ' + xnode._anime.duration );
+		//console.log( 'phase : ' + xnode[ '_id' ] + ' ' + xnode[ '_anime' ].phase + ' ' + xnode[ '_anime' ].duration );
 		ret = X_Node_Anime_updateAnimation( xnode );
 		if( ret === true ){
 			X_Node_ANIMATIONS.splice( i, 1 );
-			xnode._anime.gpuTimerID && X.Timer.remove( xnode._anime.gpuTimerID );
-			delete xnode._anime;
+			xnode[ '_anime' ].gpuTimerID && X_Timer_remove( xnode[ '_anime' ].gpuTimerID );
+			delete xnode[ '_anime' ];
 		} else
 		if( ret !== false ){
 			c = true;
 		};
 	};
 	
+	if( ( X_Node_Anime_updateTimerID || updateNow ) && X_Node_updateTimerID ) X_Node_startUpdate();
+	
 	X_Node_Anime_updateTimerID = 0;
+	X_Node_Anime_reserved = false;
 	if( c ){
 		X_Node_Anime_reserveUpdate();
 	};
 };
 
-// TODO X.Timer.requestFrame 経由の BEFORE_UPDATE で更新を行う
+// TODO X_Timer_requestFrame 経由の BEFORE_UPDATE で更新を行う
 function X_Node_Anime_detectAnimationLayers(){
 	var i = X_Node_ANIMATIONS.length,
 		l = i,
-		j, xnode, parent, hasGPUChild, changed, remove;
+		j, xnode, parent, hasGPUChild, remove;
 
 	for( ; i; ){
 		xnode = X_Node_ANIMATIONS[ --i ];
 		parent = hasGPUChild = false;
-		//console.log( 'koko- ' + xnode._id + ' ' + xnode._anime.phase );
 		for( j = l; j; ){
 			_xnode = X_Node_ANIMATIONS[ --j ];
 			
 			if( xnode.parent === _xnode.parent ){
-				//console.log( 'cont ' + xnode._anime.phase );
 				continue;
 			} else
-			if( _xnode.contains( xnode ) ){
-				if( _xnode._anime.phase === 3 || _xnode._anime.phase === 10 ){
-					_xnode._anime.phase = 15;
+			if( _xnode[ 'contains' ]( xnode ) ){
+				if( ( _xnode[ '_anime' ].phase === 3 && _xnode[ '_anime' ].gpuParent ) || _xnode[ '_anime' ].phase === 10 ){
+					_xnode[ '_anime' ].phase = 15;
 				} else
-				if( xnode._anime.gpuParent ){
-					changed = parent = true;
-					xnode._anime.phase = xnode._anime.phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄
+				if( xnode[ '_anime' ].gpuParent ){
+					parent = true;
+					xnode[ '_anime' ].phase = xnode[ '_anime' ].phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄
 				} else
-				if( [ 7, 8, 9, 13, 14 ].indexOf( xnode._anime.phase ) !== -1 ){// GPU レイヤーの中止
-					changed = parent = true;
-					xnode._anime.phase -= 8;
+				if( [ 7, 8, 9, 13, 14 ].indexOf( xnode[ '_anime' ].phase ) !== -1 ){// GPU レイヤーの中止
+					parent = true;
+					xnode[ '_anime' ].phase -= 8;
 				};
 				break;
 			} else
-			if( xnode.contains( _xnode ) ){
-				if( xnode._anime.phase === 3 || xnode._anime.phase === 10 ){
-					xnode._anime.phase = 15;
+			if( xnode[ 'contains' ]( _xnode ) ){
+				if( ( xnode[ '_anime' ].phase === 3 && xnode[ '_anime' ].gpuParent ) || xnode[ '_anime' ].phase === 10 ){
+					xnode[ '_anime' ].phase = 15;
 				} else
-				if( _xnode._anime.gpuParent ){
-					changed = hasGPUChild = true;
-					_xnode._anime.phase = _xnode._anime.phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄
+				if( _xnode[ '_anime' ].gpuParent ){
+					hasGPUChild = true;
+					_xnode[ '_anime' ].phase = _xnode[ '_anime' ].phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄
 				} else
-				if( [ 7, 8, 9, 13, 14 ].indexOf( _xnode._anime.phase ) !== -1 ){// GPU レイヤーの中止
-					changed = hasGPUChild = true;
-					_xnode._anime.phase -= 8;
+				if( [ 7, 8, 9, 13, 14 ].indexOf( _xnode[ '_anime' ].phase ) !== -1 ){// GPU レイヤーの中止
+					hasGPUChild = true;
+					_xnode[ '_anime' ].phase -= 8;
 				};
 				break;
 			};
 		};
-		if( !parent && xnode._anime.phase !== 15 ){
-			if( xnode._anime.phase === 0 ){
+		
+		if( !parent && xnode[ '_anime' ].phase !== 15 ){
+			if( xnode[ '_anime' ].phase === 0 ){
 				// 新規
-				changed = changed || !xnode._anime.gpuParent;
-				xnode._anime.phase = hasGPUChild ? 7 : 8;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。
+				xnode[ '_anime' ].phase = hasGPUChild ? 7 : 8;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。
 			} else
-			if( [ 3, 4, 10, 100 ].indexOf( xnode._anime.phase ) === -1 ){
+			if( [ 3, 4, 10, 100 ].indexOf( xnode[ '_anime' ].phase ) === -1 ){
 				// 非GPU -> GPU
-				changed = changed || !xnode._anime.gpuParent;
-				//console.log( 'koko? ' + xnode._anime.phase );
-				xnode._anime.phase = hasGPUChild ? 13 : 14;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。
+				xnode[ '_anime' ].phase = hasGPUChild ? 13 : 14;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。
 			};
 		};
 	};
@@ -228,46 +275,83 @@ function X_Node_Anime_detectAnimationLayers(){
 	X_Node_Anime_needsDetection = false;
 };
 
+/* TODO
+ * 0:無, 1:子のGPU解除待 2:GPU予約, 3:GPU now!, 4:GPU解除予約
+ */
 function X_Node_Anime_updateAnimation( xnode ){
-	var obj   = xnode._anime,
+	var obj   = xnode[ '_anime' ],
 		phase = obj.phase,
 		current, time;
 	switch( phase ){
+		case 2 :
+			// アニメーション中
+			return false;
+		
 		case -1 :// 子の GPU レイヤー解除待ち
 		case  7 :
 			++obj.phase;
 			break;
 		case  0 : // 開始位置+アニメーションの設定 
 		case  8 :
+			X_ViewPort[ 'unlisten' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );
+			
+			xnode[ 'css' ]({
+				//willChange               : X_Node_Anime_transitionProps + ',opacity,width,height',
+				backfaceVisibility       : 'hidden',
+				transitionTimingFunction : obj.easing.style,
+				transitionDelay          : '0s' // 0.001 にすると transitionend のタイミングが狂う、、、
+			});
+			
+			//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 } );
 			++obj.phase;
 			break;
 		case  1 :
 		case  9 : // 終了位置の設定
 			obj.gpuParent = phase === 9;
-			X_Node_Anime_updateTransition( xnode, obj.duration, obj.easing );
-			X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, obj.gpuParent );
-			obj.phase = 2;
-			break;
-		
-		case 2 :
-			// アニメーション中
-			return false;
-		
+			if( obj.duration ){
+				xnode[ 'listenOnce' ]( 'transitionend', X_Node_Anime_onTransitionEnd );
+			
+				xnode[ 'css' ]({
+					transitionProperty : X_Node_Anime_transitionProps + ',opacity,width,height',
+					transitionDuration : obj.duration + 'ms'
+				});
+				
+				//console.log( '修了位置 ' + phase );
+				X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, obj.gpuParent );
+				obj.phase = 2;
+				break;
+			};
+			//console.log( 'duration = 0 の場合、アニメーションの解除' );
+			// duration = 0 の場合、アニメーションの解除
+			
 		case 3 : // アニメーションの解除
-			X_Node_Anime_updateTransition( xnode, 0 );
 			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 } );
 			break;
 
 		case 4 :
-			// アニメーションは停止・GPU = false -> リストから削除
+			// アニメーションは停止・GPU=false -> リストから削除
 			obj.gpuParent = false;
 			return true;
 
 		case 10 :
 			// アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機)
+			//X_Node_Anime_clearTransition( xnode ); // TODO X_Node_Anime_releaseGPULayer に移動?
 			if( !obj.gpuTimerID ){
-				obj.gpuTimerID = X.Timer.once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );
+				console.log( '#### アニメーションは停止 ' + obj.wait );
+				if( obj.wait ){
+					obj.gpuTimerID = X_Timer_once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );
+				} else {
+					X_Node_Anime_releaseGPULayer.call( xnode );
+				};
 			};
 			return false;
 		
@@ -283,9 +367,10 @@ function X_Node_Anime_updateAnimation( xnode ){
 			now  = X_Timer_now();
 			time = obj.duration - now + obj.startTime;
 			if( time < 16 ){
-				X_Node_Anime_updateTransition( xnode, 0 );
+				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[ 'asyncDispatch' ]( time, { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );
 			} else {
 				current = X_Node_Anime_getComputedPosition( xnode );
 				obj.startX    = current.x;
@@ -293,7 +378,6 @@ function X_Node_Anime_updateAnimation( xnode ){
 				obj.startA    = current.a;
 				obj.duration  = time;
 				obj.startTime = now;
-				//X_Node_Anime_updateTransition( xnode, time, obj.easing );
 				X_Node_Anime_updatePosition( xnode, current.x, current.y, current.a, phase === 14 );
 				obj.phase = phase === 14 ? 9 : 1;
 			};
@@ -301,17 +385,21 @@ function X_Node_Anime_updateAnimation( xnode ){
 		
 		case 15 :
 			// GPU有効で停止（待機）している xnode の解除
-			console.log( 'GPU有効で停止（待機）している xnode の解除' + xnode._tag + xnode.getOrder() );
-			X_Node_Anime_updateTransition( xnode, 0 );
+			//console.log( 'GPU有効で停止（待機）している xnode の解除' + xnode[ '_tag' ] + xnode[ 'getOrder' ]() );
+			// 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;
 		
-		case 100 : // stop() : アニメーションの中断して削除
-			console.log( 'stop() gpu:' + obj.gpuParent );
+		case 100 : // stop() : アニメーションを中断して削除
+			//console.log( 'stop() gpu:' + obj.gpuParent );
+			// console.log( 'アニメーションを中断して削除' );
 			current = X_Node_Anime_getComputedPosition( xnode );
 						
-			X_Node_Anime_updateTransition( xnode, 0 );
+			X_Node_Anime_clearTransition( xnode );
 			X_Node_Anime_updatePosition( xnode, current.x, current.y, current.a, obj.gpuParent );
 			obj.phase = obj.gpuParent ? 10 : 4;
 			break;
@@ -320,7 +408,7 @@ function X_Node_Anime_updateAnimation( xnode ){
 };
 
 function X_Node_Anime_getComputedPosition( that ) {
-	var matrix = X_node_CSS_getComputedStyle( that._rawObject, null ),
+	var matrix = X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ),
 		x, y;
 
 	if ( X_Node_Anime_hasTransform ) {
@@ -332,63 +420,109 @@ function X_Node_Anime_getComputedPosition( that ) {
 		y = + parseInt( matrix.top );
 	};
 	
-	return { x: x, y: y, a : matrix[ X_Node_CSS_Support[ 'opacity' ] ] };
+	return { x : x, y : y, a : matrix[ X_Node_CSS_Support[ 'opacity' ] ] };
 };
 
-function X_Node_Anime_onTransitionEnd(){
-	if( this._anime.phase !== 2 ) return X.Callback.PREVENT_DEFAULT;
-	this._anime.phase = 3;
+function X_Node_Anime_onTransitionEnd( e ){
+	console.log( '[TransitionEnd] ' + ( this[ '_anime' ] && this[ '_anime' ].phase ) );
+	
+	if( !this[ '_anime' ] || this[ '_anime' ].phase !== 2 ){
+		// ここで return してしまうと、view の更新イベント待ちの場合、アニメが止まる
+		X_Node_Anime_reserved && !X_Node_Anime_updateTimerID && !X_Node_updateTimerID && X_Node_Anime_reserveUpdate( X_Node_Anime_reserved = false );
+		return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION;
+	};
+	
+	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;
+	
 	X_Node_Anime_needsDetection = true;
-	X_Node_Anime_reserveUpdate();
-	console.log( 'トランジション終了' );
-	return X.Callback.UN_LISTEN | X.Callback.PREVENT_DEFAULT;
+	// iOS は transitionend 内の 更新でアニメーション可能 iOS3, iOS4 で確認 
+	// win+Gecko は不可
+	X_Node_Anime_updateAnimations( 0, X_Node_updateOnTransitionEnd );
+	
+	return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION;
 };
 
 function X_Node_Anime_releaseGPULayer(){
-	var obj = this._anime;
+	var obj = this[ '_anime' ], tmp;
+	if( !obj ){
+		// console.log( '_anime無' );
+		return;
+	};
+	X_Node_Anime_clearTransition( this );
 	X_Node_Anime_updatePosition( this, obj.destX, obj.destY, obj.destA, false );
 	X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );
 	delete obj.gpuTimerID;
-	delete this._anime;
-	console.log( 'GPUレイヤーの破棄' );
+	delete this[ '_anime' ];
+	console.log( 'GPUレイヤーの破棄を指示' );
+	
+	X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, X_Node_Anime_gpuReleased );
 };
 
-function X_Node_Anime_updateTransition( xnode, time, easing ){
+function X_Node_Anime_gpuReleased(){
+	//console.log( 'GPU レイヤーが解放されました' );
+	this[ 'dispatch' ]( { type : X_EVENT_GPU_RELEASED, 'gpu' : true } );
+};
+
+function X_Node_Anime_clearTransition( xnode ){
 	// 開始座標のセット(新規のみ)
 	// アニメーション指定のセット(または解除)(対象のみ)
 	// 目標座標のセット
-	if( time ){
-		xnode.listenOnce( 'transitionend', X_Node_Anime_onTransitionEnd );
-	} else {
-		xnode.unlisten( 'transitionend', X_Node_Anime_onTransitionEnd );
-	};
-	xnode.css({
-		transitionProperty       : X_Node_Anime_transitionProps + ',opacity',
-		willChange               : time ? X_Node_Anime_transitionProps + ',opacity' : '',
-		backfaceVisibility       : time ? 'hidden' : '',
-		transitionTimingFunction : time ? easing.style : '',
-		transitionDelay          : '0s',
-		transitionDuration       : time ? time + 'ms' : ''
+	xnode[ 'unlisten' ]( 'transitionend', X_Node_Anime_onTransitionEnd );
+
+	xnode[ 'css' ]({
+		//willChange               : '',
+		backfaceVisibility       : '',
+		transitionTimingFunction : '',
+		transitionDelay          : '',
+		transitionDuration       : ''
 	});
 };
 
 function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){
+	console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU );
 	if( X_Node_Anime_hasTransform ){
-		xnode.css({
+		xnode[ 'css' ]({
 			transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ),
 			opacity   : opacity
 		});
 	} else {
-		xnode.css({
+		xnode[ 'css' ]({
 			left    : ( x | 0 ) + 'px',
 			top     : ( y | 0 ) + 'px',
 			opacity : opacity
 		});
 	};
-	// xnode._anime.x, y
+
+	if( X_Node_Anime_translateZ ){
+		if( useGPU ){
+			if( xnode[ '_flags' ] & X_Node_State.GPU_RELEASE_RESERVED ){
+				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
+				xnode[ '_flags' ] |= X_Node_State.GPU_NOW;
+			} else
+			if( xnode[ '_flags' ] & X_Node_State.GPU_NOW ){
+			} else {
+				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
+				xnode[ '_flags' ] |= X_Node_State.GPU_RESERVED;
+			};
+		} else {
+			if( xnode[ '_flags' ] & X_Node_State.GPU_NOW ){
+				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
+				xnode[ '_flags' ] |= X_Node_State.GPU_RELEASE_RESERVED;			
+			} else
+			if( xnode[ '_flags' ] & X_Node_State.GPU_RESERVED ){
+				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
+			};
+		};		
+	};
 };
 
-function X_Node_Anime_updateAnimationsNoTransition(){
+function X_Node_Anime_updateAnimationsNoTransition( e ){
 	var i = X_Node_ANIMATIONS.length,
 		now = X_Timer_now(),
 		obj,
@@ -397,14 +531,16 @@ function X_Node_Anime_updateAnimationsNoTransition(){
 	
 	for( ; i; ){
 		xnode = X_Node_ANIMATIONS[ --i ];
-		obj   = xnode._anime;
+		obj   = xnode[ '_anime' ];
 
 		if( obj.destTime <= now ){
 			X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );
-			xnode.asyncDispatch( 'transitionend' );
-			
+
+			delete xnode[ '_anime' ];
 			X_Node_ANIMATIONS.splice( i, 1 );
-			delete xnode._anime;			
+			
+			// filter な 親が解除されないと子要素への filter が反映されない
+			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;
@@ -418,9 +554,21 @@ function X_Node_Anime_updateAnimationsNoTransition(){
 		};
 	};
 	
-	if( c ){
-		X_Node_Anime_updateTimerID = X.Timer.requestFrame( X_Node_Anime_updateAnimationsNoTransition );
+	c && console.log( 'anime... ' + X_Node_updateTimerID );
+	
+	if( X_Node_Anime_reserved = c ){
+		if( X_Node_updateTimerID ){
+			// 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;
 	};
 };