\r
var\r
ease = {\r
- quadratic: {\r
+ 'quadratic' : {\r
style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\r
fn: function (k) {\r
return k * ( 2 - k );\r
}\r
},\r
- circular: {\r
+ 'circular' : {\r
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)\r
fn: function (k) {\r
return Math.sqrt( 1 - ( --k * k ) );\r
}\r
},\r
- back: {\r
+ 'back' : {\r
style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\r
fn: function (k) {\r
var b = 4;\r
return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1;\r
}\r
},\r
- bounce: {\r
+ 'bounce' : {\r
style: '',\r
fn: function (k) {\r
if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {\r
}\r
}\r
},\r
- elastic: {\r
+ 'elastic' : {\r
style: '',\r
fn: function (k) {\r
var f = 0.22,\r
}\r
}\r
};\r
- \r
+\r
+// お約束\r
+// transform や transition animation は スタイルシートに書かない\r
+\r
// 新規アニメーションが追加された場合、\r
// tree が dirty なら AFTER_COMMIT を待つ\r
// 1) xnode の既存アニメーションとの親子関係の調査\r
\r
X_Node_Anime_hasTransform = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],\r
/* Opera mobile で translateZ(0) が有効だと XY が 0 0 になる */\r
- /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox, 手当てが済むまでここは常に false */\r
+ /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */\r
X_Node_Anime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '',\r
/* Opera12(XP,8.1) 切った方がスムース, win Safari3 で、たまに動作が止まってしまう、、、 */\r
- X_Node_Anime_hasTransition = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X_UA[ 'Opera' ], // && !( X_UA[ 'Webkit' ] <= 528.16 ),\r
+ 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 ),\r
X_Node_Anime_transitionProps = X_Node_Anime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top',\r
// transitionEnd イベント中に要素の更新( X_Node_startUpdate() )ができるか?\r
// iOS3+4 では可能、iOS6.1.5 で不可。TODO iOS5 及び他の環境で調査。ダメな場合、anime.html が正しく描画されない。\r
- X_Node_updateOnTransitionEnd = X_UA[ 'iOS' ] < 6;\r
+ X_Node_updateOnTransitionEnd = false;\r
\r
// gpu化だけ transformX , willChange\r
// 終了位置の変更\r
// 中断\r
\r
/*\r
+ * TODO : DX Anime\r
* TODO : scale, ActiveX transform, zoom, fontSizeScale\r
* TODO : rotate, ActiveX transform -> 位置補正のために size 情報が必要なので、commitUpdate 後に計算して適用\r
* TODO : matrix\r
* TODO : skew\r
* TODO : filter\r
* TODO 前回位置からの継続\r
+ * TODO scrollLeft, scrollTop\r
*/\r
-Node.prototype[ 'animate' ] = function( start, dest, duration, easing, wait ){\r
+/**\r
+ * GPU サポートの効いたアニメーションの設定 X.Event.ANIME_START, X.Event.ANIME_END, X.Event.GPU_RELEASED\r
+ * \r
+ * @alias Node.prototype.animate\r
+ * @param {object} start { x : 0, y : 0, opacity : 1 }\r
+ * @param {object} dest { x : 100, y : 100, opacity : 0 }\r
+ * @param {number=} duartion アニメーション時間 ms\r
+ * @param {string=} easing 'quadratic', 'circular', 'back', 'bounce', 'elastic'\r
+ * @param {number=} wait GPU レイヤーの遅延解除 ms\r
+ * @return {Node} メソッドチェーン\r
+ */\r
+function X_Node_animate( start, dest, duration, easing, wait ){\r
var isNew = !this[ '_anime' ],\r
- obj = this[ '_anime' ] || ( this[ '_anime' ] = {} );\r
+ obj = this[ '_anime' ];\r
+ \r
+ if( !obj ){\r
+ this[ '_anime' ] = obj = X_Node_Anime_getComputedPosition( this );\r
+ obj.destX = obj.x;\r
+ obj.destY = obj.y;\r
+ obj.destA = obj.a;\r
+ };\r
\r
obj.duration = 0 <= duration && X_Type_isFinite( duration ) ? duration : 500;\r
- obj.easing = ease[ easing ] || ease.circular;\r
+ obj.easing = ease[ easing ] || ease[ 'circular' ];\r
// 現在 GPUレイヤーのtop になっているか?将来については phase で判定\r
obj.gpuParent = obj.gpuParent || false;\r
obj.phase = duration === 0 ? 9 : obj.phase === 9 ? 9 : 0; //\r
obj.wait = X_Type_isFinite( wait ) ? wait : 1000;\r
\r
obj.startTime = X_Timer_now();\r
- obj.startX = ( start.x || start.x === 0 ) ? start.x : obj.x || 0;\r
- obj.startY = ( start.y || start.y === 0 ) ? start.y : obj.y || 0;\r
+ obj.startX = ( start.x || start.x === 0 ) ? start.x : obj.x || NaN;\r
+ obj.startY = ( start.y || start.y === 0 ) ? start.y : obj.y || NaN;\r
obj.startA = 0 <= start.opacity && start.opacity <= 1 ? start.opacity : obj.a || 1;\r
\r
obj.destTime = obj.startTime + obj.duration;\r
- obj.destX = ( dest.x || dest.x === 0 ) ? dest.x : obj.destX || 0;\r
- obj.destY = ( dest.y || dest.y === 0 ) ? dest.y : obj.destY || 0;\r
+ obj.destX = ( dest.x || dest.x === 0 ) ? dest.x : obj.destX || NaN;\r
+ obj.destY = ( dest.y || dest.y === 0 ) ? dest.y : obj.destY || NaN;\r
obj.destA = 0 <= dest.opacity && dest.opacity <= 1 ? dest.opacity : obj.destA || 1;\r
\r
X_Node_ANIMATIONS.indexOf( this ) === -1 &&\r
return this;\r
};\r
\r
-Node.prototype[ 'stop' ] = function(){\r
+/**\r
+ * アニメーションの停止。\r
+ * @alias Node.prototype.stop\r
+ * @return {Node} メソッドチェーン\r
+ */\r
+function X_Node_stop(){\r
var obj = this[ '_anime' ];\r
\r
if( !obj ) return this;\r
};\r
\r
function X_Node_Anime_updateAnimations( v, updateNow ){\r
- var i = X_Node_ANIMATIONS.length, ret, c = false;\r
+ var i = X_Node_ANIMATIONS.length, c = false, ret, xnode;\r
\r
// console.log( v.type || v );\r
\r
function X_Node_Anime_detectAnimationLayers(){\r
var i = X_Node_ANIMATIONS.length,\r
l = i,\r
- j, xnode, parent, hasGPUChild, remove;\r
+ j, xnode, parent, _xnode, hasGPUChild, remove;\r
\r
for( ; i; ){\r
xnode = X_Node_ANIMATIONS[ --i ];\r
X_Node_Anime_needsDetection = false;\r
};\r
\r
-/* TODO\r
- * 0:無, 1:子のGPU解除待 2:GPU予約, 3:GPU now!, 4:GPU解除予約\r
- */\r
function X_Node_Anime_updateAnimation( xnode ){\r
var obj = xnode[ '_anime' ],\r
phase = obj.phase,\r
//console.log( 'duration = 0 の場合、アニメーションの解除' );\r
// duration = 0 の場合、アニメーションの解除\r
\r
- case 3 : // アニメーションの解除\r
+ case 3 : // TransitionEnd -> アニメーションの解除\r
obj.phase = obj.gpuParent ? 10 : 4;\r
+ \r
+ //console.log( '#### アニメーションの解除 ' + obj.phase );\r
+ \r
// このタイミングで animation 関連の css を削除したところ(X_Node_Anime_clearTransition)、iOS3、4 で再描画忘れが度々起きるように、、、\r
if( !obj.gpuParent ) X_Node_Anime_clearTransition( xnode );\r
- xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );\r
break;\r
\r
case 4 :\r
\r
case 10 :\r
// アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機)\r
- //X_Node_Anime_clearTransition( xnode ); // TODO X_Node_Anime_releaseGPULayer に移動?\r
if( !obj.gpuTimerID ){\r
+ //console.log( '#### アニメーションは停止 ' + obj.wait );\r
if( obj.wait ){\r
obj.gpuTimerID = X_Timer_once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );\r
} else {\r
X_Node_Anime_clearTransition( xnode );\r
X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, phase === 14 );\r
obj.phase = phase === 14 ? 10 : 4;\r
- xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );\r
+ xnode[ 'dispatch' ]( time, { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );\r
} else {\r
current = X_Node_Anime_getComputedPosition( xnode );\r
obj.startX = current.x;\r
// console.log( 'GPU有効で停止(待機)している xnode のGPU解除' );\r
X_Node_Anime_clearTransition( xnode );\r
X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );\r
- obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID );\r
+ //obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID );\r
+ //delete obj.gpuTimerID;\r
X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
return true;\r
\r
};\r
};\r
\r
-function X_Node_Anime_getComputedPosition( that ) {\r
- var matrix = X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ),\r
- x, y;\r
+function X_Node_Anime_getComputedPosition( that ){\r
+ var raw = that[ '_rawObject' ],\r
+ x = 0, y = 0, a = 1, matrix;\r
\r
- if ( X_Node_Anime_hasTransform ) {\r
- matrix = matrix[ X_Node_CSS_VENDER_PREFIX[ 'transform' ] ].split( ')' )[ 0 ].split( ', ' );\r
- x = + ( matrix[ 12 ] || matrix[ 4 ] );\r
- y = + ( matrix[ 13 ] || matrix[ 5 ] );\r
- } else {\r
- x = + parseInt( matrix.left );\r
- y = + parseInt( matrix.top );\r
+ if( raw ){\r
+ if( X_Node_Anime_hasTransform ){\r
+ matrix = X_Node_CSS_getComputedStyle( raw, null );\r
+ matrix = matrix[ X_Node_CSS_VENDER_PREFIX[ 'transform' ] ].split( ')' )[ 0 ].split( ', ' );\r
+ x = + ( matrix[ 12 ] || matrix[ 4 ] );\r
+ y = + ( matrix[ 13 ] || matrix[ 5 ] );\r
+ a = matrix[ X_Node_CSS_Support[ 'opacity' ] ];\r
+ } else\r
+ if( X_Node_CSS_getComputedStyle ){\r
+ matrix = X_Node_CSS_getComputedStyle( raw, null );\r
+ x = parseFloat( matrix[ 'left' ] );\r
+ y = parseFloat( matrix[ 'top' ] );\r
+ a = matrix[ X_Node_CSS_Support[ 'opacity' ] ];\r
+ } else\r
+ if( matrix = raw.currentStyle || raw.style ){\r
+ x = parseFloat( matrix[ 'left' ] );\r
+ y = parseFloat( matrix[ 'top' ] );\r
+ a = matrix[ 'opacity' ];\r
+ }; \r
};\r
- \r
- return { x : x, y : y, a : matrix[ X_Node_CSS_Support[ 'opacity' ] ] };\r
+\r
+ return { x : x, y : y, a : a };\r
};\r
\r
function X_Node_Anime_onTransitionEnd( e ){\r
- // console.log( 'アニメ終了[onTransitionEnd] ' + ( this[ '_anime' ] && this[ '_anime' ].phase ) );\r
+ console.log( '[TransitionEnd] ' + ( this[ '_anime' ] && this[ '_anime' ].phase ) );\r
\r
if( !this[ '_anime' ] || this[ '_anime' ].phase !== 2 ){\r
// ここで return してしまうと、view の更新イベント待ちの場合、アニメが止まる\r
X_Node_Anime_reserved && !X_Node_Anime_updateTimerID && !X_Node_updateTimerID && X_Node_Anime_reserveUpdate( X_Node_Anime_reserved = false );\r
- return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION;\r
+ return X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_STOP_PROPAGATION;\r
};\r
\r
this[ '_anime' ].phase = 3;\r
\r
+ X_Node_Anime_clearTransition( this ); // X_EVENT_ANIME_END より前で呼んでおく\r
+ \r
X_Node_Anime_onTransition = true;\r
this[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : this[ '_anime' ].gpuParent } );\r
X_Node_Anime_onTransition = false;\r
// win+Gecko は不可\r
X_Node_Anime_updateAnimations( 0, X_Node_updateOnTransitionEnd );\r
\r
- return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION;\r
+ return X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_STOP_PROPAGATION;\r
};\r
\r
function X_Node_Anime_releaseGPULayer(){\r
};\r
\r
function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){\r
- // console.log( 'updatePosition y:' + y + ' gpu:' + !!useGPU );\r
+ //console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU );\r
if( X_Node_Anime_hasTransform ){\r
xnode[ 'css' ]({\r
transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ),\r
opacity : opacity\r
});\r
} else {\r
- xnode[ 'css' ]({\r
- left : ( x | 0 ) + 'px',\r
- top : ( y | 0 ) + 'px',\r
- opacity : opacity\r
- });\r
+ x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' );\r
+ y === y && xnode[ 'css' ]( 'top', ( y | 0 ) + 'px' );\r
+ opacity === opacity && xnode[ 'css' ]( 'opacity', opacity );\r
};\r
\r
if( X_Node_Anime_translateZ ){\r
if( useGPU ){\r
- if( xnode[ '_flags' ] & X_Node_State.GPU_RELEASE_RESERVED ){\r
+ if( xnode[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){\r
xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
- xnode[ '_flags' ] |= X_Node_State.GPU_NOW;\r
+ xnode[ '_flags' ] |= X_NodeFlags_GPU_NOW;\r
} else\r
- if( xnode[ '_flags' ] & X_Node_State.GPU_NOW ){\r
- } else {\r
+ if( !( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ) ){\r
xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
- xnode[ '_flags' ] |= X_Node_State.GPU_RESERVED;\r
+ xnode[ '_flags' ] |= X_NodeFlags_GPU_RESERVED;\r
};\r
} else {\r
- if( xnode[ '_flags' ] & X_Node_State.GPU_NOW ){\r
+ if( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ){\r
xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
- xnode[ '_flags' ] |= X_Node_State.GPU_RELEASE_RESERVED; \r
+ xnode[ '_flags' ] |= X_NodeFlags_GPU_RELEASE_RESERVED;\r
} else\r
- if( xnode[ '_flags' ] & X_Node_State.GPU_RESERVED ){\r
+ if( xnode[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){\r
xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
};\r
}; \r
\r
delete xnode[ '_anime' ];\r
X_Node_ANIMATIONS.splice( i, 1 );\r
- \r
+ //console.log( obj.destA );\r
// filter な 親が解除されないと子要素への filter が反映されない\r
xnode[ 'asyncDispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : false } );\r
} else {\r
obj.x = newX;\r
obj.y = newY;\r
obj.a = newA;\r
- c = true; \r
+ c = true;\r
};\r
};\r
\r
- c && console.log( 'anime... ' + X_Node_updateTimerID );\r
+ //c && console.log( 'anime... ' + X_Node_updateTimerID );\r
\r
if( X_Node_Anime_reserved = c ){\r
if( X_Node_updateTimerID ){\r