X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F02_dom%2F10_XNodeAnime.js;h=cbf6a33e070bbc07114809df21b71146863a36f0;hb=d93e0f2faddc687d56a9528402f74ba2415a0407;hp=ceaabc6bd0103c91193928ae0e64b2e7bfe965b8;hpb=629dcf47fbdb2b56567a1019d22b8a2eeb4f4ed6;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 ceaabc6..cbf6a33 100644
--- a/0.6.x/js/02_dom/10_XNodeAnime.js
+++ b/0.6.x/js/02_dom/10_XNodeAnime.js
@@ -1,427 +1,462 @@
 
+var X_NodeAnime_QUEUE           = [],
+	X_NodeAnime_uid             = 0,
+	X_NodeAnime_reserved        = false,
+	X_NodeAnime_updateTimerID   = 0,
+	X_NodeAnime_needsDetection  = false,
+	
+	X_NodeAnime_hasTransform    = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],
+	/* 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)' : '',
 
-var
-	ease = {
-		quadratic: {
-			style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-			fn: function (k) {
-				return k * ( 2 - k );
-			}
-		},
-		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: {
-			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: {
-			style: '',
-			fn: function (k) {
-				if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
-					return 7.5625 * k * k;
-				} else if ( k < ( 2 / 2.75 ) ) {
-					return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
-				} else if ( k < ( 2.5 / 2.75 ) ) {
-					return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
-				} else {
-					return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
-				}
-			}
-		},
-		elastic: {
-			style: '',
-			fn: function (k) {
-				var f = 0.22,
-					e = 0.4;
+	X_NodeAnime_transitionProps = X_NodeAnime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top';
 
-				if ( k === 0 ) { return 0; }
-				if ( k == 1 ) { return 1; }
+/*
+ * phase:
+ *  0: アニメーション無
+ *  1: 登録されたばかり
+ *  2: 準待機
+ *  3: 後続待機
+ *  4: 強制停止(GPU転送予約)
+ *  5: GPU解除待ち
+ *  6: 開始可能
+ *  7: アニメーション中
+ * TODO node.css( 'opacity' ) の上書き
+ */
 
-				return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 );
-			}
-		}
-	};
-		
-// 新規アニメーションが追加された場合、
-// tree が dirty なら AFTER_COMMIT を待つ
-// 1) xnode の既存アニメーションとの親子関係の調査
-// 親なら -> 既存アニメーションの GPU レイヤー解除
-// 子なら -> GPU レイヤーを設定しない
-// 2) 目標座標のセット
-// 3) アニメーション完了後も GPU レイヤーはしばらく解除しない スクロール等の連続アニメーション時に GPU 転送時間で画面ががたつくから
-// アニメ中の remove
-
-var X_Node_ANIMATIONS            = [],
-	X_Node_Anime_updateTimerID   = 0,
-	X_Node_Anime_needsDetection  = 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';
+var X_NODE_ANIME_RESET = 1,
+	X_NODE_ANIME_STAY_GPU = 2;
 
-Node.prototype.animate = function( start, dest, duration, easing, wait ){
-	var obj = this._anime || ( this._anime = {} ), current;
+/**
+ * GPU サポートの効いたアニメーションの設定 X.Event.ANIME_START, X.Event.ANIME_END, X.Event.GPU_RELEASED
+ * @alias Node.prototype.animate
+ * @param {object} start { x : 0, y : 0, opacity : 1 }
+ * @param {object} dest  { x : 100, y : 100, opacity : 0 }
+ * @param {number=} duartion アニメーション時間 ms
+ * @param {string=} easing 'quadratic', 'circular', 'back', 'bounce', 'elastic'
+ * @param {number=} wait GPU レイヤーの遅延解除 ms
+ * @param {number=} option フォールバックについて
+ * @return {Node} メソッドチェーン
+ */
+function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
+	var list  = X_NodeAnime_QUEUE,
+		obj   = this[ '_anime' ];
 	
-	if( X_Node_Anime_hasTransition && this._rawObject ){
-		current = X_Node_Anime_getComputedPosition( this );
+	if( !( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ){
+		alert( '@animate 要素はツリーに追加されていません!' );
+		// それでもアニメーションしてタイマー代わりにするとか、、、?
+		return this;
 	};
 	
-	obj.duration  = X.Type.isFinite( duration ) && 0 <= 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.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.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;
-
-	
-	if( obj.gpuTimerID ){
-		X.Timer.remove( obj.gpuTimerID );
-		delete obj.gpuTimerID;
+	if( !obj ){
+		this[ '_anime' ] = obj = {
+				x : 0, y : 0, a : 1,
+				duration : 0
+				//phase, lazyRelease, easing, follower, releaseNow
+			};
 	};
 	
-	X_Node_Anime_needsDetection = true;
-	if( X_Node_Anime_hasTransition ){
-		X_Node_Anime_reserveUpdate();
+	if( 0 <= duration && X_Type_isFinite( duration ) ){
+		obj.duration  = duration;
+	};
+
+	obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];
+		
+// form :
+	obj.startX = obj.x = X_NodeAnime_getFinite( start[ 'x' ],       obj.x );
+	obj.startY = obj.y = X_NodeAnime_getFinite( start[ 'y' ],       obj.y );
+	obj.startA = obj.a = X_NodeAnime_getFinite( start[ 'opacity' ], obj.a );
+
+ // to :
+	obj.destX  = X_NodeAnime_getFinite( dest[ 'x' ],       obj.x );
+	obj.destY  = X_NodeAnime_getFinite( dest[ 'y' ],       obj.y );
+	obj.destA  = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.a );
+
+	obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0;
+	obj.inited = false;
+
+	if( !obj.duration && 6 <= obj.phase ){
+		this[ 'stop' ](); // 現在値で停止
 	} else {
-		X_Node_Anime_updateTimerID || ( X_Node_Anime_updateTimerID = X.Timer.requestFrame( X_Node_Anime_updateAnimationsNoTransition ) );		
+		if( !obj.phase ){
+			list[ list.length ] = this;
+			obj.phase = 1;
+			obj.uid   = ++X_NodeAnime_uid;
+			X_NodeAnime_needsDetection = true;
+		} else
+		if( obj.phase < 4 ){
+			list.splice( list.indexOf( this ), 1 );
+			list[ list.length ] = this;
+			obj.uid   = ++X_NodeAnime_uid;
+			X_NodeAnime_needsDetection = true;
+		} else
+		if( obj.duration ){
+			// リストの先頭にいるため検査不要でアニメーション開始可能 4, 5, 6, 7
+			obj.phase = 6;
+		} else
+		// GPU 転送予約、または transform や opacity の値のみ設定
+		if( obj.phase !== 5 ){ // GPU解除待ち ではない -> 4. 6, 7
+			obj.phase      = 4; // 強制停止(GPU転送予約)または値のみ更新
+			obj.releaseNow = false; // TODO folower がいるため GPU 転送できないケースあり
+			X_NodeAnime_needsDetection = true;
+		};
+		
+		if( !X_NodeAnime_reserved ){
+			X_NodeAnime_reserved = true;
+			
+			if( X_Node_updateTimerID ){
+				if( X_NodeAnime_updateTimerID ) X_NodeAnime_updateTimerID = X_Timer_cancelFrame( X_NodeAnime_updateTimerID );
+
+				X_System[ 'listen' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );
+			} else {
+				X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );
+				X_NodeAnime_updateTimerID = X_Timer_requestFrame( X_NodeAnime_updateAnimations );
+			};
+		};	
 	};
 
-	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 );
-	
 	return this;
 };
 
-Node.prototype.stop = function(){
-	var obj = this._anime;
-	if( !obj ) return;
-	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;		
+function X_NodeAnime_getFinite( a, b ){
+	if( a || a === 0 ) return a;
+	if( b || b === 0 ) return b;
+	return NaN;
+};
+
+/*
+ * 1.アニメーション中の要素の停止 ->後続アニメーションの開始
+ * 2.アニメーション待機中の要素の停止 -> 後続アニメーションの再調査
+ */
+/**
+ * アニメーションの停止。
+ * @alias Node.prototype.stop
+ * @return {Node} メソッドチェーン
+ */
+function X_Node_stop( option ){
+	var obj    = this[ '_anime' ],
+		list   = X_NodeAnime_QUEUE,
+		i, rm, j, xnode, _obj;
+	
+	if( !obj || !obj.phase ) return this;
+
+	switch( obj.phase ){
+		case 6 : // アニメーション開始可能 ??
+		case 2 : // 準待機
+		case 3 : // アニメーション待機中
+			X_NodeAnime_needsDetection = true;
+		case 1 :
+			rm = true;
+
+		case 4 : // 強制停止(GPU転送予約)
+		case 7 : // アニメーション中
+			if( option & X_NODE_ANIME_RESET ){
+				obj.startX = obj.startY = obj.destX = obj.destY = obj.x = obj.y = 0;
+				obj.startA = obj.destA = obj.a = 1;
+			}; // TODO 終了値で停止も,,,
+			
+			// obj.canceled = true;
+			
+			if( rm ) break; // 1,2,3,6 の場合ここまで
+		
+			obj.destX = obj.x;
+			obj.destY = obj.y;
+			obj.destA = obj.a;
+
+			obj.phase = 4; // 強制解除
+			X_NodeAnime_needsDetection = true;
+			
+		case 5 : // GPU解除待ち
+			obj.releaseNow = !( option & X_NODE_ANIME_STAY_GPU );
+			break;
 	};
+
+	if( rm ){
+		list.splice( list.indexOf( this ), 1 );
+		obj.phase = 0;	
+	};
+
 	return this;
 };
+/*
+ * remove(append swap 等でない部的に呼ばれている場合も), kill 時に
+ */
+function X_NodeAnime_stopNow( xnode ){
+	var obj   = xnode[ '_anime' ],
+		flags = xnode[ '_flags' ],
+		list  = X_NodeAnime_QUEUE,
+		skipUpdate;
+	
+	// if( !obj || !obj.phase ) return; 呼び出し側で検証済
 
-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 );
+	X_NodeAnime_needsDetection = true;
+	list.splice( list.indexOf( xnode ), 1 );
+	obj.phase = 0;
+
+	// この部分 startUpdate へ?
+	if( flags & ~X_Node_BitMask_RESET_GPU ){
+		skipUpdate = flags & X_NodeFlags_GPU_RESERVED;
+		( flags & X_NodeFlags_GPU_RELEASE_RESERVED ) || X_NodeAnime_updatePosition( xnode, obj.x, obj.y, obj.a, false );
+		skipUpdate || ( xnode[ '_rawObject' ].style.cssText = X_Node_CSS_objToCssText( xnode ) );
+		xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
 	};
 };
 
-function X_Node_Anime_updateAnimations(){
-	var i = X_Node_ANIMATIONS.length, ret, c = false;
-	
-	//console.log( 'updateAnimations ' + i + ' ' + X_Node_Anime_needsDetection );
-	
-	if( X_Node_Anime_needsDetection ) X_Node_Anime_detectAnimationLayers();
+/*
+ * 1. 新規アニメーションが現在アニメーション中の要素の親か子であればアニメーションを待機
+ */
+function X_NodeAnime_detectWaitAnimation( xnode, duration, isTest ){
+	var list = X_NodeAnime_QUEUE,
+		i    = 0, _xnode;
 	
-	for( ; i; ){
-		xnode = X_Node_ANIMATIONS[ --i ];
-		//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;
-		} else
-		if( ret !== false ){
-			c = true;
+	for( ; _xnode = list[ i ]; ++i ){
+		if( _xnode === xnode ) break;
+		
+		// アニメーションの優先度はリストにいる順
+		// まず先行する後続待機要素の中に、親子関係のものがいないか？探す
+		if( _xnode[ '_anime' ].phase <= 3 ){
+			if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){ // 祖先か？見た方が早そう
+				// -> いる、このような要素が複数いる場合、誰に後続すればいいか？判然としないため、準待機フラグを立てる
+				return 2;
+			};
 		};
 	};
-	
-	X_Node_Anime_updateTimerID = 0;
-	if( c ){
-		X_Node_Anime_reserveUpdate();
+
+	// -> いない、アニメーション中(開始可能も)の要素の中に、親子関係のものがいないか？探す
+	//           -> いる、待機状態へ
+	//           -> いない、アニメーションが可能
+	for( i = 0; _xnode = list[ i ]; ++i ){
+		if( _xnode === xnode ) break;
+
+		if( 6 <= _xnode[ '_anime' ].phase ){
+			if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){
+				return isTest ? 3 : _xnode;
+			};
+		};
 	};
+	// アニメーション可能
+	return duration ? 6 : 4; // duration がない場合は、アニメーション強制停止へ進みそこから GPU 解除待ちへ
 };
 
-// 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;
-
-	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 ];
+function X_NodeAnime_updateAnimations( e ){
+	var list = X_NodeAnime_QUEUE,
+		now  = X_Timer_now(),
+		c    = false,
+		i, xnode, obj, _xnode,
+		rm, easing, lazy;
+	
+	if( X_NodeAnime_needsDetection ){
+		X_NodeAnime_needsDetection = false;
+		
+		//
+		list.sort( X_NodeAnime_sortAnimationNode );
+		
+		for( i = 0; xnode = list[ i ]; ++i ){
+			obj = xnode[ '_anime' ];
 			
-			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;
-				} else
-				if( xnode._anime.gpuParent ){
-					changed = 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( obj.phase <= 3 ){
+				if( !X_Type_isNumber( obj.phase = _xnode = X_NodeAnime_detectWaitAnimation( xnode, obj.duration ) ) ){
+					_xnode[ '_anime' ].follower = true;
+					obj.phase = 3; // 後続待機
 				};
-				break;
-			} else
-			if( xnode.contains( _xnode ) ){
-				if( xnode._anime.phase === 3 || 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 レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄
-				} else
-				if( [ 7, 8, 9, 13, 14 ].indexOf( _xnode._anime.phase ) !== -1 ){// GPU レイヤーの中止
-					changed = hasGPUChild = true;
-					_xnode._anime.phase -= 8;
-				};
-				break;
-			};
-		};
-		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 アニメをもつなら、タイミングをずらす。
-			} else
-			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 アニメをもつなら、タイミングをずらす。
+			} else {
+				obj.follower = false;
 			};
 		};
 	};
 	
-	X_Node_Anime_needsDetection = false;
-};
+	for( i = list.length; i; ){
+		rm    = false;
+		xnode = list[ --i ];
+		obj   = xnode[ '_anime' ];
 
-function X_Node_Anime_updateAnimation( xnode ){
-	var obj   = xnode._anime,
-		phase = obj.phase,
-		current, time;
-	switch( phase ){
-		case -1 :// 子の GPU レイヤー解除待ち
-		case  7 :
-			++obj.phase;
-			break;
-		case  0 : // 開始位置+アニメーションの設定 
-		case  8 :
-			X_Node_Anime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, 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;
-		
-		case 3 : // アニメーションの解除
-			X_Node_Anime_updateTransition( xnode, 0 );
-			obj.phase = obj.gpuParent ? 10 : 4;
-			break;
+		switch( obj.phase ){
+			case 7 : // アニメーション中
+				if( now < obj.destTime ){
+					easing = obj.progress  = obj.easing.fn( ( now - obj.startTime ) / obj.duration );
+					X_NodeAnime_updatePosition( xnode, 
+						obj.x = ( obj.destX - obj.startX ) * easing + obj.startX | 0,
+						obj.y = ( obj.destY - obj.startY ) * easing + obj.startY | 0,
+						obj.a = ( obj.destA - obj.startA ) * easing + obj.startA, true );
+					c = true;
+					break;
+				};
+				// アニメーション終了
+				xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_END );
+				
+			case 4 : // 強制停止(GPU転送予約)
+				lazy = !obj.follower && !obj.releaseNow && obj.lazyRelease;
+				X_NodeAnime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, !!lazy );
 
-		case 4 :
-			// アニメーションは停止・GPU = false -> リストから削除
-			obj.gpuParent = false;
-			return true;
+				//if( obj.canceled ){
+				//	xnode[ 'asyncDispatch' ]( X_EVENT_CANCELED );
+				//} else {
+					
+				//};
+				
+				if( lazy ){
+					console.log( 'アニメーション終了(' + obj.phase + ') -> GPU 解除待機 ' + lazy );
+					obj.releaseTime = now + lazy;
+					obj.phase = 5; // GPU解除待ち
+					c = true;
+				} else {
+					console.log( 'アニメーション終了(' + obj.phase + ') -> ' );
+					rm = true;
+				};
+				break;
 
-		case 10 :
-			// アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機)
-			if( !obj.gpuTimerID ){
-				obj.gpuTimerID = X.Timer.once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );
-			};
-			return false;
-		
-		case  5 :
-		case 13 :
-			// 子のGPU解除待ち
-			++obj.phase;
-			break;
-		
-		// GPU レイヤーの変更> アニメーションは継続,但し残り時間が短ければ停止
-		case  6 :		
-		case 14 :
-			now  = X_Timer_now();
-			time = obj.duration - now + obj.startTime;
-			if( time < 16 ){
-				X_Node_Anime_updateTransition( xnode, 0 );
-				X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, phase === 14 );
-				obj.phase = phase === 14 ? 10 : 4;
-			} else {
-				current = X_Node_Anime_getComputedPosition( xnode );
-				obj.startX    = current.x;
-				obj.startY    = current.y;
-				obj.startA    = current.a;
-				obj.duration  = time;
+			case 6 : // アニメーション開始可能
 				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;
-			};
-			break;
-		
-		case 15 :
-			// GPU有効で停止（待機）している xnode の解除
-			console.log( 'GPU有効で停止（待機）している xnode の解除' + xnode._tag + xnode.getOrder() );
-			X_Node_Anime_updateTransition( xnode, 0 );
-			X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );
-			obj.gpuTimerID && X.Timer.remove( obj.gpuTimerID );
-			return true;
+				obj.destTime  = now + obj.duration;
+				obj.phase     = 7; // アニメーション中
+				obj.progress  = 0;					
+				xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_START );
+				c = true;
+				//obj.canceled  = false;
+				( obj.inited && !X_NodeAnime_translateZ ) || X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, true );
+				break;
+			
+			case 5 : // GPU解除待ち
+				if( obj.releaseTime <= now || obj.follower || obj.releaseNow ){
+					X_NodeAnime_translateZ && X_NodeAnime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );
+					rm = true;
+				} else {
+					c = true;
+				};
+				break;
+			
+			default : // 2 or 3
+				// 待機状態でも親要素が GPU 化していなければ、開始値をセットすることは可能
+				obj.inited || X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, false );
+				obj.inited = false;
+				break;
+		};
 		
-		case 100 : // stop() : アニメーションの中断して削除
-			console.log( 'stop() gpu:' + obj.gpuParent );
-			current = X_Node_Anime_getComputedPosition( xnode );
-						
-			X_Node_Anime_updateTransition( xnode, 0 );
-			X_Node_Anime_updatePosition( xnode, current.x, current.y, current.a, obj.gpuParent );
-			obj.phase = obj.gpuParent ? 10 : 4;
-			break;
+		obj.releaseNow = false;
 		
+		if( rm ){
+			X_NodeAnime_translateZ && xnode[ 'asyncDispatch' ]( X_EVENT_GPU_RELEASED );
+			// 後続のアニメーションがある場合
+			if( obj.follower ) X_NodeAnime_needsDetection = c = true;
+			list.splice( i, 1 );
+			obj.phase = 0;
+		};
 	};
-};
-
-function X_Node_Anime_getComputedPosition( that ) {
-	var matrix = X_node_CSS_getComputedStyle( that._rawObject, null ),
-		x, y;
-
-	if ( X_Node_Anime_hasTransform ) {
-		matrix = matrix[ X_Node_CSS_VENDER_PREFIX[ 'transform' ] ].split( ')' )[ 0 ].split( ', ' );
-		x = + ( matrix[ 12 ] || matrix[ 4 ] );
-		y = + ( matrix[ 13 ] || matrix[ 5 ] );
+	
+	//c && console.log( 'anime... ' + X_Node_updateTimerID );
+	
+	if( X_NodeAnime_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_NodeAnime_updateAnimations ) :
+				X_NodeAnime_updateTimerID && X_Timer_cancelFrame( X_NodeAnime_updateTimerID );
+			X_NodeAnime_updateTimerID = 0;
+		} else {
+			X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );
+			X_NodeAnime_updateTimerID = X_Timer_requestFrame( X_NodeAnime_updateAnimations );
+		};
 	} else {
-		x = + parseInt( matrix.left );
-		y = + parseInt( matrix.top );
+		X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );
+		X_NodeAnime_updateTimerID = 0;
 	};
-	
-	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;
-	X_Node_Anime_needsDetection = true;
-	X_Node_Anime_reserveUpdate();
-	console.log( 'トランジション終了' );
-	return X.Callback.UN_LISTEN | X.Callback.PREVENT_DEFAULT;
-};
-
-function X_Node_Anime_releaseGPULayer(){
-	var obj = this._anime;
-	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レイヤーの破棄' );
-};
-
-function X_Node_Anime_updateTransition( xnode, time, easing ){
-	// 開始座標のセット(新規のみ)
-	// アニメーション指定のセット(または解除)(対象のみ)
-	// 目標座標のセット
-	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' : ''
-	});
+/*
+ * アニメーション開始、アニメーション中、強制停止(GPU転送予約)、GPU解除待ち の要素をリストの先頭に
+ */
+function X_NodeAnime_sortAnimationNode( xnode1, xnode2 ){
+	var a = 4 <= xnode1[ '_anime' ].phase,
+		b = 4 <= xnode2[ '_anime' ].phase;
+	
+    if( ( a && b ) && ( !a && !b ) ){ // Chrome のみ
+        return xnode1[ '_anime' ].uid - xnode2[ '_anime' ].uid;
+    };
+    return a ? -1 : 1;
 };
 
-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 : '' ),
+function X_NodeAnime_updatePosition( xnode, x, y, opacity, useGPU ){
+	//console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU );
+	if( X_NodeAnime_hasTransform ){
+		xnode[ 'css' ]({
+			transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_NodeAnime_translateZ : '' ),
 			opacity   : opacity
 		});
 	} else {
-		xnode.css({
-			left    : ( x | 0 ) + 'px',
-			top     : ( y | 0 ) + 'px',
-			opacity : opacity
-		});
+		x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' );
+		y === y && xnode[ 'css' ]( 'top', ( y | 0 ) + 'px' );
+		opacity === opacity && xnode[ 'css' ]( 'opacity', opacity );
 	};
-	// xnode._anime.x, y
-};
 
-function X_Node_Anime_updateAnimationsNoTransition(){
-	var i = X_Node_ANIMATIONS.length,
-		now = X_Timer_now(),
-		obj,
-		newX, newY, newA, easing,
-		c = false;
-	
-	for( ; i; ){
-		xnode = X_Node_ANIMATIONS[ --i ];
-		obj   = xnode._anime;
-
-		if( obj.destTime <= now ){
-			X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );
-			xnode.asyncDispatch( 'transitionend' );
-			
-			X_Node_ANIMATIONS.splice( i, 1 );
-			delete xnode._anime;			
+	if( X_NodeAnime_translateZ ){
+		if( useGPU ){
+			if( xnode[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){
+				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
+				xnode[ '_flags' ] |= X_NodeFlags_GPU_NOW;
+			} else
+			if( !( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ) ){
+				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
+				xnode[ '_flags' ] |= X_NodeFlags_GPU_RESERVED;
+			};
 		} else {
-			easing = obj.easing.fn( ( now - obj.startTime ) / obj.duration );
-			newX   = ( obj.destX - obj.startX ) * easing + obj.startX;
-			newY   = ( obj.destY - obj.startY ) * easing + obj.startY;
-			newA   = ( obj.destA - obj.startA ) * easing + obj.startA;
-			X_Node_Anime_updatePosition( xnode, newX, newY, newA, false );
-			obj.x = newX;
-			obj.y = newY;
-			obj.a = newA;
-			c = true;	
-		};
-	};
-	
-	if( c ){
-		X_Node_Anime_updateTimerID = X.Timer.requestFrame( X_Node_Anime_updateAnimationsNoTransition );
-	} else {
-		X_Node_Anime_updateTimerID = 0;
+			if( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ){
+				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
+				xnode[ '_flags' ] |= X_NodeFlags_GPU_RELEASE_RESERVED;
+			} else
+			if( xnode[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){
+				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
+			};
+		};		
 	};
 };
 
+
+var
+	X_NodeAnime_ease = {
+		'quadratic' : {
+			style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+			fn: function (k) {
+				return k * ( 2 - k );
+			}
+		},
+		'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' : {
+			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' : {
+			style: '',
+			fn: function (k) {
+				if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
+					return 7.5625 * k * k;
+				} else if ( k < ( 2 / 2.75 ) ) {
+					return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
+				} else if ( k < ( 2.5 / 2.75 ) ) {
+					return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
+				} else {
+					return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
+				}
+			}
+		},
+		'elastic' : {
+			style: '',
+			fn: function (k) {
+				var f = 0.22,
+					e = 0.4;
+
+				if ( k === 0 ) { return 0; }
+				if ( k == 1 ) { return 1; }
+
+				return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 );
+			}
+		}
+	};