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=7064166116729e2853bfdf5e4daf8d3cb37d23da;hpb=a39b7dc7bfb4f60a4b014b0f7cf376b6bbfe0e3b;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 7064166..cbf6a33 100644
--- a/0.6.x/js/02_dom/10_XNodeAnime.js
+++ b/0.6.x/js/02_dom/10_XNodeAnime.js
@@ -1,506 +1,386 @@
 
-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;
-
-				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 );
-			}
-		}
-	};
-		
-// 新規アニメーションが追加された場合、
-// tree が dirty なら AFTER_COMMIT を待つ
-// 1) xnode の既存アニメーションとの親子関係の調査
-// 親なら -> 既存アニメーションの GPU レイヤー解除
-// 子なら -> GPU レイヤーを設定しない
-// 2) 目標座標のセット
-// 3) アニメーション完了後も GPU レイヤーはしばらく解除しない スクロール等の連続アニメーション時に GPU 転送時間で画面ががたつくから
-// アニメ中の 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,
+var X_NodeAnime_QUEUE           = [],
+	X_NodeAnime_uid             = 0,
+	X_NodeAnime_reserved        = false,
+	X_NodeAnime_updateTimerID   = 0,
+	X_NodeAnime_needsDetection  = false,
 	
-	X_Node_Anime_hasTransform    = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],
+	X_NodeAnime_hasTransform    = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],
 	/* Opera mobile で  translateZ(0) が有効だと XY が 0 0 になる */
 	/* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */
-	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;
-
-// gpu化だけ transformX , willChange
-// 終了位置の変更
-// 中断
+	X_NodeAnime_translateZ      = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '',
+
+	X_NodeAnime_transitionProps = X_NodeAnime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top';
 
 /*
- * TODO : DX Anime
- * TODO : scale,  ActiveX transform, zoom, fontSizeScale
- * TODO : rotate, ActiveX transform -> 位置補正のために size 情報が必要なので、commitUpdate 後に計算して適用
- * TODO : matrix
- * TODO : skew
- * TODO : filter
- * TODO 前回位置からの継続
- * TODO scrollLeft, scrollTop
+ * phase:
+ *  0: アニメーション無
+ *  1: 登録されたばかり
+ *  2: 準待機
+ *  3: 後続待機
+ *  4: 強制停止(GPU転送予約)
+ *  5: GPU解除待ち
+ *  6: 開始可能
+ *  7: アニメーション中
+ * TODO node.css( 'opacity' ) の上書き
  */
+
+var X_NODE_ANIME_RESET = 1,
+	X_NODE_ANIME_STAY_GPU = 2;
+
 /**
  * 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, wait ){
-	var isNew = !this[ '_anime' ],
-		obj   = this[ '_anime' ] || ( this[ '_anime' ] = {} );
+function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
+	var list  = X_NodeAnime_QUEUE,
+		obj   = this[ '_anime' ];
 	
-	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 : 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 || 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;
+	if( !( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ){
+		alert( '@animate 要素はツリーに追加されていません!' );
+		// それでもアニメーションしてタイマー代わりにするとか、、、?
+		return this;
+	};
 	
-	obj.destTime  = obj.startTime + obj.duration;
-	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 &&
-		( X_Node_ANIMATIONS[ X_Node_ANIMATIONS.length ] = this );
-
+	if( !obj ){
+		this[ '_anime' ] = obj = {
+				x : 0, y : 0, a : 1,
+				duration : 0
+				//phase, lazyRelease, easing, follower, releaseNow
+			};
+	};
 	
-	if( X_Node_Anime_onTransition ) return this;
+	if( 0 <= duration && X_Type_isFinite( duration ) ){
+		obj.duration  = duration;
+	};
 
-	if( X_Node_Anime_hasTransition ){
-		
-		if( obj.gpuTimerID ){
-			X_Timer_remove( obj.gpuTimerID );
-			delete obj.gpuTimerID;
-		};		
+	obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];
 		
-		X_Node_Anime_needsDetection = true;
-		
-		X_Node_Anime_reserveUpdate( true );
+// 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 {
-		if( !X_Node_Anime_reserved ){
-			X_Node_Anime_reserved = true;
+		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 ){
-				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;
+				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_Node_Anime_updateAnimationsNoTransition );
-				X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition );
+				X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );
+				X_NodeAnime_updateTimerID = X_Timer_requestFrame( X_NodeAnime_updateAnimations );
 			};
-		};
-		
-		isNew && this[ 'dispatch' ]( { type : X_EVENT_ANIME_START, 'gpu' : false } );
+		};	
 	};
-	
-	// console.log( 'animate() ' + this[ '_id' ] + ' y:' + obj.startY + ' > ' + obj.destY + ' d:' + obj.duration );
-	
+
 	return this;
 };
 
+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(){
-	var obj = this[ '_anime' ];
+function X_Node_stop( option ){
+	var obj    = this[ '_anime' ],
+		list   = X_NodeAnime_QUEUE,
+		i, rm, j, xnode, _obj;
 	
-	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' ];
+	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( 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 済、予約なし' );
+	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( v, updateNow ){
-	var i = X_Node_ANIMATIONS.length, c = false, ret, xnode;
-	
-	// 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();
+/*
+ * 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;
+			};
 		};
 	};
-	
-	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();
+
+	// -> いない、アニメーション中(開始可能も)の要素の中に、親子関係のものがいないか？探す
+	//           -> いる、待機状態へ
+	//           -> いない、アニメーションが可能
+	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, _xnode, hasGPUChild, remove;
-
-	for( ; i; ){
-		xnode = X_Node_ANIMATIONS[ --i ];
-		parent = hasGPUChild = false;
-		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 ){
-				continue;
-			} else
-			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 ){
-					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 レイヤーの中止
-					parent = true;
-					xnode[ '_anime' ].phase -= 8;
-				};
-				break;
-			} else
-			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 ){
-					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 レイヤーの中止
-					hasGPUChild = 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;
-			};
-		};
-		
-		if( !parent && xnode[ '_anime' ].phase !== 15 ){
-			if( xnode[ '_anime' ].phase === 0 ){
-				// 新規
-				xnode[ '_anime' ].phase = hasGPUChild ? 7 : 8;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。
-			} else
-			if( [ 3, 4, 10, 100 ].indexOf( xnode[ '_anime' ].phase ) === -1 ){
-				// 非GPU -> GPU
-				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 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;
-			if( obj.duration ){
-				xnode[ 'listenOnce' ]( 'transitionend', X_Node_Anime_onTransitionEnd );
-			
-				xnode[ 'css' ]({
-					transitionProperty : X_Node_Anime_transitionProps + ',opacity,width,height',
-					transitionDuration : obj.duration + 'ms'
-				});
+		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 );
 				
-				//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 : // TransitionEnd　-> アニメーションの解除
-			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 );
-			break;
+			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;
-
-		case 10 :
-			// アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機)
-			if( !obj.gpuTimerID ){
-				console.log( '#### アニメーションは停止 ' + obj.wait );
-				if( obj.wait ){
-					obj.gpuTimerID = X_Timer_once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );
+				//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 {
-					X_Node_Anime_releaseGPULayer.call( xnode );
+					console.log( 'アニメーション終了(' + obj.phase + ') -> ' );
+					rm = true;
 				};
-			};
-			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_clearTransition( xnode );
-				X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, phase === 14 );
-				obj.phase = phase === 14 ? 10 : 4;
-				xnode[ 'dispatch' ]( time, { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );
-			} else {
-				current = X_Node_Anime_getComputedPosition( xnode );
-				obj.startX    = current.x;
-				obj.startY    = current.y;
-				obj.startA    = current.a;
-				obj.duration  = time;
+				break;
+
+			case 6 : // アニメーション開始可能
 				obj.startTime = now;
-				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' ]() );
-			// 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 );
-			//delete obj.gpuTimerID;
-			X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );
-			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 );
-			// console.log( 'アニメーションを中断して削除' );
-			current = X_Node_Anime_getComputedPosition( xnode );
-						
-			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;
+		obj.releaseNow = false;
 		
-	};
-};
-
-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 ] );
-	} else {
-		x = + parseFloat( matrix.left );
-		y = + parseFloat( matrix.top  );
+		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;
+		};
 	};
 	
-	return { x : x, y : y, a : matrix[ X_Node_CSS_Support[ 'opacity' ] ] };
-};
-
-function X_Node_Anime_onTransitionEnd( e ){
-	console.log( '[TransitionEnd] ' + ( this[ '_anime' ] && this[ '_anime' ].phase ) );
+	//c && console.log( 'anime... ' + X_Node_updateTimerID );
 	
-	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;
+	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_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );
+		X_NodeAnime_updateTimerID = 0;
 	};
-	
-	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;
-	// 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' ], 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レイヤーの破棄を指示' );
+/*
+ * アニメーション開始、アニメーション中、強制停止(GPU転送予約)、GPU解除待ち の要素をリストの先頭に
+ */
+function X_NodeAnime_sortAnimationNode( xnode1, xnode2 ){
+	var a = 4 <= xnode1[ '_anime' ].phase,
+		b = 4 <= xnode2[ '_anime' ].phase;
 	
-	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 } );
-};
-
-function X_Node_Anime_clearTransition( xnode ){
-	// 開始座標のセット(新規のみ)
-	// アニメーション指定のセット(または解除)(対象のみ)
-	// 目標座標のセット
-	xnode[ 'unlisten' ]( 'transitionend', X_Node_Anime_onTransitionEnd );
-
-	xnode[ 'css' ]({
-		//willChange               : '',
-		backfaceVisibility       : '',
-		transitionTimingFunction : '',
-		transitionDelay          : '',
-		transitionDuration       : ''
-	});
+    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 ){
+function X_NodeAnime_updatePosition( xnode, x, y, opacity, useGPU ){
 	//console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU );
-	if( X_Node_Anime_hasTransform ){
+	if( X_NodeAnime_hasTransform ){
 		xnode[ 'css' ]({
-			transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ),
+			transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_NodeAnime_translateZ : '' ),
 			opacity   : opacity
 		});
 	} else {
@@ -509,7 +389,7 @@ function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){
 		opacity === opacity && xnode[ 'css' ]( 'opacity', opacity );
 	};
 
-	if( X_Node_Anime_translateZ ){
+	if( X_NodeAnime_translateZ ){
 		if( useGPU ){
 			if( xnode[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){
 				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
@@ -531,54 +411,52 @@ function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){
 	};
 };
 
-function X_Node_Anime_updateAnimationsNoTransition( e ){
-	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 );
+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; }
 
-			delete xnode[ '_anime' ];
-			X_Node_ANIMATIONS.splice( i, 1 );
-			console.log( obj.destA );
-			// 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;
-			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;
-		};
-	};
-	
-	//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;
+				return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 );
+			}
+		}
 	};
-};
-