// アニメ中の remove\r
\r
var X_Node_ANIMATIONS = [],\r
+ X_Node_Anime_reserved = false,\r
X_Node_Anime_updateTimerID = 0,\r
X_Node_Anime_needsDetection = false,\r
X_Node_Anime_hasTransform = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],\r
X_Node_Anime_hasTransition = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X.UA.Opera, // Opera12(XP,8.1) 切った方がスムース\r
X_Node_Anime_transitionProps = X_Node_Anime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top';\r
\r
+// gpu化だけ transformX , willChange\r
+// 終了位置の変更\r
+// 中断\r
+\r
+\r
Node.prototype.animate = function( start, dest, duration, easing, wait ){\r
- var obj = this._anime || ( this._anime = {} ), current;\r
- \r
- if( X_Node_Anime_hasTransition && this._rawObject ){\r
- current = {}; //X_Node_Anime_getComputedPosition( this );\r
- };\r
+ var obj = this._anime || ( this._anime = {} );\r
\r
- obj.duration = X.Type.isFinite( duration ) && 0 <= duration ? duration : 500;\r
+ obj.duration = 0 <= duration && X.Type.isFinite( duration ) ? duration : 500;\r
obj.easing = ease[ easing ] || ease.circular;\r
// 現在 GPUレイヤーのtop になっているか？将来については phase で判定\r
obj.gpuParent = obj.gpuParent || false;\r
- obj.phase = duration === 0 ? 9 : 0; //\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 || current && current.x || 0;\r
- obj.startY = ( start.y || start.y === 0 ) ? start.y : obj.y || current && current.y || 0;\r
- obj.startA = 0 <= start.opacity && start.opacity <= 1 ? start.opacity : obj.a || current && current.a || 1;\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.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
\r
X_Node_Anime_needsDetection = true;\r
if( X_Node_Anime_hasTransition ){\r
- X_Node_Anime_reserveUpdate();\r
+ X_Node_Anime_reserveUpdate( true );\r
} else {\r
X_Node_Anime_updateTimerID || ( X_Node_Anime_updateTimerID = X.Timer.requestFrame( X_Node_Anime_updateAnimationsNoTransition ) ); \r
};\r
return this;\r
};\r
\r
-function X_Node_Anime_reserveUpdate(){\r
- if( !X_Node_Anime_updateTimerID ){\r
- // Opera12 requestAnimationFrame では transition が動かない、、、\r
- X_Node_Anime_updateTimerID =\r
- X_UA.Opera ?\r
- X.Timer.once( 0, X_Node_Anime_updateAnimations ) :\r
- X.Timer.requestFrame( X_Node_Anime_updateAnimations );\r
+function X_Node_Anime_reserveUpdate( before ){\r
+ if( !X_Node_Anime_reserved ){\r
+ X_Node_Anime_reserved = true;\r
+ \r
+ if( X_Node_updateTimerID ){\r
+ console.log( before ? '> BEFORE_UPDATE' : '> UPDATED' );\r
+ X_System.listenOnce( before ? X.Event.BEFORE_UPDATE : X.Event.UPDATED, X_Node_Anime_updateAnimations );\r
+ } else {\r
+ console.log( '> Timer' );\r
+ // Opera12 requestAnimationFrame では transition が動かない、、、\r
+ X_Node_Anime_updateTimerID =\r
+ X_UA.Opera ?\r
+ X.Timer.once( 0, X_Node_Anime_updateAnimations ) :\r
+ X.Timer.requestFrame( X_Node_Anime_updateAnimations ); \r
+ };\r
};\r
};\r
\r
-function X_Node_Anime_updateAnimations(){\r
+function X_Node_Anime_updateAnimations( v ){\r
var i = X_Node_ANIMATIONS.length, ret, c = false;\r
\r
+ console.log( v.type || v );\r
+ \r
//console.log( 'updateAnimations ' + i + ' ' + X_Node_Anime_needsDetection );\r
\r
if( X_Node_Anime_needsDetection ) X_Node_Anime_detectAnimationLayers();\r
};\r
};\r
\r
+ if( X_Node_Anime_updateTimerID && X_Node_updateTimerID ) X_Node_startUpdate();\r
+ \r
X_Node_Anime_updateTimerID = 0;\r
+ X_Node_Anime_reserved = false;\r
if( c ){\r
X_Node_Anime_reserveUpdate();\r
};\r
function X_Node_Anime_detectAnimationLayers(){\r
var i = X_Node_ANIMATIONS.length,\r
l = i,\r
- j, xnode, parent, hasGPUChild, changed, remove;\r
+ j, xnode, parent, hasGPUChild, remove;\r
\r
for( ; i; ){\r
xnode = X_Node_ANIMATIONS[ --i ];\r
parent = hasGPUChild = false;\r
- //console.log( 'koko- ' + xnode._id + ' ' + xnode._anime.phase );\r
for( j = l; j; ){\r
_xnode = X_Node_ANIMATIONS[ --j ];\r
\r
if( xnode.parent === _xnode.parent ){\r
- //console.log( 'cont ' + xnode._anime.phase );\r
continue;\r
} else\r
if( _xnode.contains( xnode ) ){\r
- if( _xnode._anime.phase === 3 || _xnode._anime.phase === 10 ){\r
+ if( ( _xnode._anime.phase === 3 && _xnode._anime.gpuParent ) || _xnode._anime.phase === 10 ){\r
_xnode._anime.phase = 15;\r
} else\r
if( xnode._anime.gpuParent ){\r
- changed = parent = true;\r
+ parent = true;\r
xnode._anime.phase = xnode._anime.phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄\r
} else\r
if( [ 7, 8, 9, 13, 14 ].indexOf( xnode._anime.phase ) !== -1 ){// GPU レイヤーの中止\r
- changed = parent = true;\r
+ parent = true;\r
xnode._anime.phase -= 8;\r
};\r
break;\r
} else\r
if( xnode.contains( _xnode ) ){\r
- if( xnode._anime.phase === 3 || xnode._anime.phase === 10 ){\r
+ if( ( xnode._anime.phase === 3 && xnode._anime.gpuParent ) || xnode._anime.phase === 10 ){\r
xnode._anime.phase = 15;\r
} else\r
if( _xnode._anime.gpuParent ){\r
- changed = hasGPUChild = true;\r
+ hasGPUChild = true;\r
_xnode._anime.phase = _xnode._anime.phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄\r
} else\r
if( [ 7, 8, 9, 13, 14 ].indexOf( _xnode._anime.phase ) !== -1 ){// GPU レイヤーの中止\r
- changed = hasGPUChild = true;\r
+ hasGPUChild = true;\r
_xnode._anime.phase -= 8;\r
};\r
break;\r
if( !parent && xnode._anime.phase !== 15 ){\r
if( xnode._anime.phase === 0 ){\r
// 新規\r
- changed = changed || !xnode._anime.gpuParent;\r
xnode._anime.phase = hasGPUChild ? 7 : 8;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
} else\r
if( [ 3, 4, 10, 100 ].indexOf( xnode._anime.phase ) === -1 ){\r
// 非GPU -> GPU\r
- changed = changed || !xnode._anime.gpuParent;\r
- //console.log( 'koko? ' + xnode._anime.phase );\r
xnode._anime.phase = hasGPUChild ? 13 : 14;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
};\r
};\r
break;\r
case 0 : // 開始位置+アニメーションの設定 \r
case 8 :\r
+ X_Node_Anime_readyTransition( xnode );\r
X_Node_Anime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, phase === 8 );\r
++obj.phase;\r
break;\r
case 1 :\r
case 9 : // 終了位置の設定\r
obj.gpuParent = phase === 9;\r
- X_Node_Anime_updateTransition( xnode, obj.duration, obj.easing );\r
+ obj.duration ? X_Node_Anime_updateTransition( xnode ) : X_Node_Anime_clearTransition( xnode );\r
X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, obj.gpuParent );\r
obj.phase = 2;\r
break;\r
return false;\r
\r
case 3 : // アニメーションの解除\r
- X_Node_Anime_updateTransition( xnode, 0 );\r
+ X_Node_Anime_clearTransition( xnode );\r
obj.phase = obj.gpuParent ? 10 : 4;\r
break;\r
\r
now = X_Timer_now();\r
time = obj.duration - now + obj.startTime;\r
if( time < 16 ){\r
- X_Node_Anime_updateTransition( xnode, 0 );\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
} else {\r
obj.startA = current.a;\r
obj.duration = time;\r
obj.startTime = now;\r
- //X_Node_Anime_updateTransition( xnode, time, obj.easing );\r
X_Node_Anime_updatePosition( xnode, current.x, current.y, current.a, phase === 14 );\r
obj.phase = phase === 14 ? 9 : 1;\r
};\r
case 15 :\r
// GPU有効で停止（待機）している xnode の解除\r
console.log( 'GPU有効で停止（待機）している xnode の解除' + xnode._tag + xnode.getOrder() );\r
- X_Node_Anime_updateTransition( xnode, 0 );\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
return true;\r
console.log( 'stop() gpu:' + obj.gpuParent );\r
current = X_Node_Anime_getComputedPosition( xnode );\r
\r
- X_Node_Anime_updateTransition( xnode, 0 );\r
+ X_Node_Anime_clearTransition( xnode );\r
X_Node_Anime_updatePosition( xnode, current.x, current.y, current.a, obj.gpuParent );\r
obj.phase = obj.gpuParent ? 10 : 4;\r
break;\r
X_Node_Anime_needsDetection = true;\r
X_Node_Anime_reserveUpdate();\r
console.log( 'トランジション終了' );\r
- return X.Callback.UN_LISTEN | X.Callback.PREVENT_DEFAULT;\r
+ return X.Callback.UN_LISTEN | X.Callback.PREVENT_DEFAULT | X.Callback.STOP_PROPAGATION;\r
};\r
\r
function X_Node_Anime_releaseGPULayer(){\r
console.log( 'GPUレイヤーの破棄' );\r
};\r
\r
-function X_Node_Anime_updateTransition( xnode, time, easing ){\r
+function X_Node_Anime_readyTransition( xnode ){\r
+ xnode.css({\r
+ willChange : X_Node_Anime_transitionProps + ',opacity,width,height',\r
+ backfaceVisibility : 'hidden',\r
+ transitionTimingFunction : xnode._anime.easing.style,\r
+ transitionDelay : '0s'\r
+ });\r
+};\r
+\r
+function X_Node_Anime_updateTransition( xnode ){\r
// 開始座標のセット(新規のみ)\r
// アニメーション指定のセット(または解除)(対象のみ)\r
// 目標座標のセット\r
- if( time ){\r
- xnode.listenOnce( 'transitionend', X_Node_Anime_onTransitionEnd );\r
- } else {\r
- xnode.unlisten( 'transitionend', X_Node_Anime_onTransitionEnd );\r
- };\r
+ xnode.listenOnce( 'transitionend', X_Node_Anime_onTransitionEnd );\r
+\r
+ xnode.css({\r
+ transitionProperty : X_Node_Anime_transitionProps + ',opacity,width,height',\r
+ transitionDuration : xnode._anime.duration + 'ms'\r
+ });\r
+};\r
+\r
+function X_Node_Anime_clearTransition( xnode ){\r
+ // 開始座標のセット(新規のみ)\r
+ // アニメーション指定のセット(または解除)(対象のみ)\r
+ // 目標座標のセット\r
+ xnode.unlisten( 'transitionend', X_Node_Anime_onTransitionEnd );\r
+\r
xnode.css({\r
- transitionProperty : X_Node_Anime_transitionProps + ',opacity',\r
- willChange : time ? X_Node_Anime_transitionProps + ',opacity' : '',\r
- backfaceVisibility : time ? 'hidden' : '',\r
- transitionTimingFunction : time ? easing.style : '',\r
- transitionDelay : '0s',\r
- transitionDuration : time ? time + 'ms' : ''\r
+ willChange : '',\r
+ backfaceVisibility : '',\r
+ transitionTimingFunction : '',\r
+ transitionDelay : '',\r
+ transitionDuration : ''\r
});\r
};\r
\r
OSDN Git Service
