X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F02_dom%2F10_XNodeAnime.js;h=31e853a2ffdedc2a653ebc062ed35b1fe3fa3f6d;hb=6b28a86cc49680dac50278ff5617bfe7a3d98613;hp=0b5a8a8d64c54651e085434134f0942118354dad;hpb=36f999435e807f3d04f899b2a84eb1dc31df34b7;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 0b5a8a8..31e853a 100644
--- a/0.6.x/js/02_dom/10_XNodeAnime.js
+++ b/0.6.x/js/02_dom/10_XNodeAnime.js
@@ -1,26 +1,26 @@
 
 var
 	ease = {
-		quadratic: {
+		'quadratic' : {
 			style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
 			fn: function (k) {
 				return k * ( 2 - k );
 			}
 		},
-		circular: {
+		'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: {
+		'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: {
+		'bounce' : {
 			style: '',
 			fn: function (k) {
 				if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
@@ -34,7 +34,7 @@ var
 				}
 			}
 		},
-		elastic: {
+		'elastic' : {
 			style: '',
 			fn: function (k) {
 				var f = 0.22,
@@ -47,7 +47,10 @@ var
 			}
 		}
 	};
-		
+
+// お約束
+// transform や transition animation は スタイルシートに書かない
+
 // 新規アニメーションが追加された場合、
 // tree が dirty なら AFTER_COMMIT を待つ
 // 1) xnode の既存アニメーションとの親子関係の調査
@@ -65,20 +68,21 @@ var X_Node_ANIMATIONS            = [],
 	
 	X_Node_Anime_hasTransform    = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],
 	/* Opera mobile で  translateZ(0) が有効だと XY が 0 0 になる */
-	/* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox, 手当てが済むまでここは常に false */
+	/* 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_hasTransition   = false && !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !( X_UA[ 'iOS' ] < 6 ) && !X_UA[ 'Opera' ] && !X_UA[ 'Blink' ], // && !( 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;
+	X_Node_updateOnTransitionEnd = false;
 
 // gpu化だけ transformX , willChange
 // 終了位置の変更
 // 中断
 
 /*
+ * TODO : DX Anime
  * TODO : scale,  ActiveX transform, zoom, fontSizeScale
  * TODO : rotate, ActiveX transform -> 位置補正のために size 情報が必要なので、commitUpdate 後に計算して適用
  * TODO : matrix
@@ -87,25 +91,43 @@ var X_Node_ANIMATIONS            = [],
  * TODO 前回位置からの継続
  * TODO scrollLeft, scrollTop
  */
-Node.prototype[ 'animate' ] = function( start, dest, duration, easing, wait ){
+/**
+ * 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
+ * @return {Node} メソッドチェーン
+ */
+function X_Node_animate( start, dest, duration, easing, wait ){
 	var isNew = !this[ '_anime' ],
-		obj   = this[ '_anime' ] || ( this[ '_anime' ] = {} );
+		obj   = this[ '_anime' ];
+	
+	if( !obj ){
+		this[ '_anime' ] = obj = X_Node_Anime_getComputedPosition( this );
+		obj.destX = obj.x;
+		obj.destY = obj.y;
+		obj.destA = obj.a;
+	};
 	
 	obj.duration  = 0 <= duration && X_Type_isFinite( duration ) ? duration : 500;
-	obj.easing    = ease[ easing ] || ease.circular;
+	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 || 0;
-	obj.startY    = ( start.y || start.y === 0 ) ? start.y : obj.y || 0;
+	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;
 	
 	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.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 &&
@@ -145,7 +167,12 @@ Node.prototype[ 'animate' ] = function( start, dest, duration, easing, wait ){
 	return this;
 };
 
-Node.prototype[ 'stop' ] = function(){
+/**
+ * アニメーションの停止。
+ * @alias Node.prototype.stop
+ * @return {Node} メソッドチェーン
+ */
+function X_Node_stop(){
 	var obj = this[ '_anime' ];
 	
 	if( !obj ) return this;
@@ -219,7 +246,7 @@ function X_Node_Anime_updateAnimations( v, updateNow ){
 function X_Node_Anime_detectAnimationLayers(){
 	var i = X_Node_ANIMATIONS.length,
 		l = i,
-		j, xnode, parent, hasGPUChild, remove;
+		j, xnode, parent, _xnode, hasGPUChild, remove;
 
 	for( ; i; ){
 		xnode = X_Node_ANIMATIONS[ --i ];
@@ -275,9 +302,6 @@ 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' ],
 		phase = obj.phase,
@@ -327,14 +351,13 @@ function X_Node_Anime_updateAnimation( xnode ){
 			//console.log( 'duration = 0 の場合、アニメーションの解除' );
 			// duration = 0 の場合、アニメーションの解除
 			
-		case 3 : // アニメーションの解除
+		case 3 : // TransitionEnd　-> アニメーションの解除
 			obj.phase = obj.gpuParent ? 10 : 4;
 			
-			console.log( '#### アニメーションの解除 ' + obj.phase );
+			//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 :
@@ -344,9 +367,8 @@ function X_Node_Anime_updateAnimation( xnode ){
 
 		case 10 :
 			// アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機)
-			//X_Node_Anime_clearTransition( xnode ); // TODO X_Node_Anime_releaseGPULayer に移動?
 			if( !obj.gpuTimerID ){
-				console.log( '#### アニメーションは停止 ' + obj.wait );
+				//console.log( '#### アニメーションは停止 ' + obj.wait );
 				if( obj.wait ){
 					obj.gpuTimerID = X_Timer_once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );
 				} else {
@@ -370,7 +392,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[ 'asyncDispatch' ]( time, { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );
+				xnode[ 'dispatch' ]( time, { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );
 			} else {
 				current = X_Node_Anime_getComputedPosition( xnode );
 				obj.startX    = current.x;
@@ -407,20 +429,34 @@ function X_Node_Anime_updateAnimation( xnode ){
 	};
 };
 
-function X_Node_Anime_getComputedPosition( that ) {
-	var matrix = X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ),
-		x, y;
+function X_Node_Anime_getComputedPosition( that ){
+	var raw = that[ '_rawObject' ],
+		x = NaN, y = NaN, a = 1, style, matrix;
 
-	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 = + parseInt( matrix.left );
-		y = + parseInt( matrix.top );
+	if( raw ){
+		if( X_Node_Anime_hasTransform ){
+			if( style = X_Node_CSS_getComputedStyle( raw, null ) ){
+				matrix = ( style[ X_Node_CSS_VENDER_PREFIX[ 'transform' ] ] || '' ).split( ')' )[ 0 ].split( ', ' );
+				x = + ( matrix[ 12 ] || matrix[ 4 ] );
+				y = + ( matrix[ 13 ] || matrix[ 5 ] );
+				a = matrix[ X_Node_CSS_Support[ 'opacity' ] ];				
+			};
+		} else
+		if( X_Node_CSS_getComputedStyle ){
+			if( style = X_Node_CSS_getComputedStyle( raw, null ) ){
+				x = parseFloat( style[ 'left' ] );
+				y = parseFloat( style[ 'top' ]  );
+				a = parseFloat( style[ X_Node_CSS_Support[ 'opacity' ] ] );				
+			};
+		} else
+		if( style = ( raw.currentStyle || raw.style ) ){
+			x = parseFloat( style[ 'left' ] );
+			y = parseFloat( style[ 'top' ]  );
+			a = parseFloat( ( style[ 'filter' ] || 'opacity=1' ).split( 'opacity=' )[ 1 ] );
+		};
 	};
-	
-	return { x : x, y : y, a : matrix[ X_Node_CSS_Support[ 'opacity' ] ] };
+
+	return { x : x, y : y, a : a };
 };
 
 function X_Node_Anime_onTransitionEnd( e ){
@@ -429,7 +465,7 @@ function X_Node_Anime_onTransitionEnd( e ){
 	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;
+		return X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_STOP_PROPAGATION;
 	};
 	
 	this[ '_anime' ].phase = 3;
@@ -445,7 +481,7 @@ function X_Node_Anime_onTransitionEnd( e ){
 	// win+Gecko は不可
 	X_Node_Anime_updateAnimations( 0, X_Node_updateOnTransitionEnd );
 	
-	return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION;
+	return X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_STOP_PROPAGATION;
 };
 
 function X_Node_Anime_releaseGPULayer(){
@@ -459,7 +495,7 @@ function X_Node_Anime_releaseGPULayer(){
 	X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );
 	delete obj.gpuTimerID;
 	delete this[ '_anime' ];
-	console.log( 'GPUレイヤーの破棄を指示' );
+	//console.log( 'GPUレイヤーの破棄を指示' );
 	
 	X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, X_Node_Anime_gpuReleased );
 };
@@ -485,37 +521,34 @@ function X_Node_Anime_clearTransition( xnode ){
 };
 
 function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){
-	console.log( 'updatePosition x:' + x + ' 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 : '' ),
 			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 );
 	};
 
 	if( X_Node_Anime_translateZ ){
 		if( useGPU ){
-			if( xnode[ '_flags' ] & X_Node_State.GPU_RELEASE_RESERVED ){
+			if( xnode[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){
 				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
-				xnode[ '_flags' ] |= X_Node_State.GPU_NOW;
+				xnode[ '_flags' ] |= X_NodeFlags_GPU_NOW;
 			} else
-			if( xnode[ '_flags' ] & X_Node_State.GPU_NOW ){
-			} else {
+			if( !( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ) ){
 				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
-				xnode[ '_flags' ] |= X_Node_State.GPU_RESERVED;
+				xnode[ '_flags' ] |= X_NodeFlags_GPU_RESERVED;
 			};
 		} else {
-			if( xnode[ '_flags' ] & X_Node_State.GPU_NOW ){
+			if( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ){
 				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
-				xnode[ '_flags' ] |= X_Node_State.GPU_RELEASE_RESERVED;			
+				xnode[ '_flags' ] |= X_NodeFlags_GPU_RELEASE_RESERVED;
 			} else
-			if( xnode[ '_flags' ] & X_Node_State.GPU_RESERVED ){
+			if( xnode[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){
 				xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
 			};
 		};		
@@ -538,7 +571,7 @@ function X_Node_Anime_updateAnimationsNoTransition( e ){
 
 			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 {
@@ -550,11 +583,11 @@ function X_Node_Anime_updateAnimationsNoTransition( e ){
 			obj.x = newX;
 			obj.y = newY;
 			obj.a = newA;
-			c = true;	
+			c = true;
 		};
 	};
 	
-	c && console.log( 'anime... ' + X_Node_updateTimerID );
+	//c && console.log( 'anime... ' + X_Node_updateTimerID );
 	
 	if( X_Node_Anime_reserved = c ){
 		if( X_Node_updateTimerID ){