* TODO : filter\r
* TODO 前回位置からの継続\r
*/\r
-Node.prototype.animate = function( start, dest, duration, easing, wait ){\r
- var isNew = !this._anime,\r
- obj = this._anime || ( this._anime = {} );\r
+Node.prototype[ 'animate' ] = function( start, dest, duration, easing, wait ){\r
+ var isNew = !this[ '_anime' ],\r
+ obj = this[ '_anime' ] || ( this[ '_anime' ] = {} );\r
\r
obj.duration = 0 <= duration && X_Type_isFinite( duration ) ? duration : 500;\r
obj.easing = ease[ easing ] || ease.circular;\r
if( X_Node_Anime_hasTransition ){\r
\r
if( obj.gpuTimerID ){\r
- X.Timer.remove( obj.gpuTimerID );\r
+ X_Timer_remove( obj.gpuTimerID );\r
delete obj.gpuTimerID;\r
}; \r
\r
\r
X_Node_Anime_reserveUpdate( true );\r
} else {\r
- X_System.unlisten( X_Event.UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
- X_Node_Anime_updateTimerID || ( X_Node_Anime_updateTimerID = X.Timer.requestFrame( X_Node_Anime_updateAnimationsNoTransition ) );\r
+ X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
+ X_Node_Anime_updateTimerID || ( X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition ) );\r
\r
- isNew && this.dispatch( { type : X_Event.ANIME_START, gpu : false } );\r
+ isNew && this[ 'dispatch' ]( { type : X_EVENT_ANIME_START, gpu : false } );\r
};\r
\r
- console.log( 'animate ' + this._id + ' y:' + obj.startX + ' > ' + obj.destX + ' d:' + obj.duration );\r
+ console.log( 'animate ' + this[ '_id' ] + ' y:' + obj.startX + ' > ' + obj.destX + ' d:' + obj.duration );\r
\r
return this;\r
};\r
\r
-Node.prototype.stop = function(){\r
- var obj = this._anime;\r
+Node.prototype[ 'stop' ] = function(){\r
+ var obj = this[ '_anime' ];\r
if( !obj ) return;\r
if( X_Node_Anime_hasTransition ){\r
obj.phase = 100;\r
X_Node_Anime_reserveUpdate();\r
} else {\r
X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );\r
- //obj.gpuTimerID && X.Timer.remove( obj.gpuTimerID );\r
- delete this._anime; \r
+ //obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID );\r
+ delete this[ '_anime' ]; \r
};\r
return this;\r
};\r
if( X_Node_updateTimerID ){\r
console.log( before ? '> BEFORE_UPDATE' : '> UPDATED' );\r
before = false;\r
- X_System.listenOnce( before ? X_Event.BEFORE_UPDATE : X_Event.UPDATED, X_Node_Anime_updateAnimations );\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
+ X_Timer_once( 0, X_Node_Anime_updateAnimations ) :\r
+ X_Timer_requestFrame( X_Node_Anime_updateAnimations ); \r
};\r
};\r
};\r
\r
for( ; i; ){\r
xnode = X_Node_ANIMATIONS[ --i ];\r
- //console.log( 'phase : ' + xnode._id + ' ' + xnode._anime.phase + ' ' + xnode._anime.duration );\r
+ //console.log( 'phase : ' + xnode[ '_id' ] + ' ' + xnode[ '_anime' ].phase + ' ' + xnode[ '_anime' ].duration );\r
ret = X_Node_Anime_updateAnimation( xnode );\r
if( ret === true ){\r
X_Node_ANIMATIONS.splice( i, 1 );\r
- xnode._anime.gpuTimerID && X.Timer.remove( xnode._anime.gpuTimerID );\r
- delete xnode._anime;\r
+ xnode[ '_anime' ].gpuTimerID && X_Timer_remove( xnode[ '_anime' ].gpuTimerID );\r
+ delete xnode[ '_anime' ];\r
} else\r
if( ret !== false ){\r
c = true;\r
};\r
};\r
\r
-// TODO X.Timer.requestFrame 経由の BEFORE_UPDATE で更新を行う\r
+// TODO X_Timer_requestFrame 経由の BEFORE_UPDATE で更新を行う\r
function X_Node_Anime_detectAnimationLayers(){\r
var i = X_Node_ANIMATIONS.length,\r
l = i,\r
if( xnode.parent === _xnode.parent ){\r
continue;\r
} else\r
- if( _xnode.contains( xnode ) ){\r
- if( ( _xnode._anime.phase === 3 && _xnode._anime.gpuParent ) || _xnode._anime.phase === 10 ){\r
- _xnode._anime.phase = 15;\r
+ if( _xnode[ 'contains' ]( xnode ) ){\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
+ if( xnode[ '_anime' ].gpuParent ){\r
parent = true;\r
- xnode._anime.phase = xnode._anime.phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄\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
+ if( [ 7, 8, 9, 13, 14 ].indexOf( xnode[ '_anime' ].phase ) !== -1 ){// GPU レイヤーの中止\r
parent = true;\r
- xnode._anime.phase -= 8;\r
+ xnode[ '_anime' ].phase -= 8;\r
};\r
break;\r
} else\r
- if( xnode.contains( _xnode ) ){\r
- if( ( xnode._anime.phase === 3 && xnode._anime.gpuParent ) || xnode._anime.phase === 10 ){\r
- xnode._anime.phase = 15;\r
+ if( xnode[ 'contains' ]( _xnode ) ){\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
+ if( _xnode[ '_anime' ].gpuParent ){\r
hasGPUChild = true;\r
- _xnode._anime.phase = _xnode._anime.phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄\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
+ if( [ 7, 8, 9, 13, 14 ].indexOf( _xnode[ '_anime' ].phase ) !== -1 ){// GPU レイヤーの中止\r
hasGPUChild = true;\r
- _xnode._anime.phase -= 8;\r
+ _xnode[ '_anime' ].phase -= 8;\r
};\r
break;\r
};\r
};\r
\r
- if( !parent && xnode._anime.phase !== 15 ){\r
- if( xnode._anime.phase === 0 ){\r
+ if( !parent && xnode[ '_anime' ].phase !== 15 ){\r
+ if( xnode[ '_anime' ].phase === 0 ){\r
// 新規\r
- xnode._anime.phase = hasGPUChild ? 7 : 8;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
+ xnode[ '_anime' ].phase = hasGPUChild ? 7 : 8;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
} else\r
- if( [ 3, 4, 10, 100 ].indexOf( xnode._anime.phase ) === -1 ){\r
+ if( [ 3, 4, 10, 100 ].indexOf( xnode[ '_anime' ].phase ) === -1 ){\r
// 非GPU -> GPU\r
- xnode._anime.phase = hasGPUChild ? 13 : 14;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
+ xnode[ '_anime' ].phase = hasGPUChild ? 13 : 14;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
};\r
};\r
};\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
+ var obj = xnode[ '_anime' ],\r
phase = obj.phase,\r
current, time;\r
switch( phase ){\r
break;\r
case 0 : // 開始位置+アニメーションの設定 \r
case 8 :\r
- X_ViewPort.unlisten( X_Event.AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
+ X_ViewPort[ 'unlisten' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
\r
- xnode.css({\r
+ xnode[ 'css' ]({\r
//willChange : X_Node_Anime_transitionProps + ',opacity,width,height',\r
backfaceVisibility : 'hidden',\r
transitionTimingFunction : obj.easing.style,\r
console.log( '開始位置 ' + phase );\r
X_Node_Anime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, phase === 8 );\r
\r
- xnode.dispatch( { type : X_Event.ANIME_START, gpu : phase === 8 } );\r
+ xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_START, gpu : phase === 8 } );\r
++obj.phase;\r
break;\r
case 1 :\r
case 9 : // 終了位置の設定\r
obj.gpuParent = phase === 9;\r
if( obj.duration ){\r
- xnode.listenOnce( 'transitionend', X_Node_Anime_onTransitionEnd );\r
+ xnode[ 'listenOnce' ]( 'transitionend', X_Node_Anime_onTransitionEnd );\r
\r
- xnode.css({\r
+ xnode[ 'css' ]({\r
transitionProperty : X_Node_Anime_transitionProps + ',opacity,width,height',\r
transitionDuration : obj.duration + 'ms'\r
});\r
obj.phase = obj.gpuParent ? 10 : 4;\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
+ xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_END, gpu : obj.gpuParent } );\r
break;\r
\r
case 4 :\r
//X_Node_Anime_clearTransition( xnode ); // TODO X_Node_Anime_releaseGPULayer に移動?\r
if( !obj.gpuTimerID ){\r
if( obj.wait ){\r
- obj.gpuTimerID = X.Timer.once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );\r
+ obj.gpuTimerID = X_Timer_once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );\r
} else {\r
X_Node_Anime_releaseGPULayer.call( xnode );\r
};\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' ]( { type : X_EVENT_ANIME_END, gpu : obj.gpuParent } );\r
} else {\r
current = X_Node_Anime_getComputedPosition( xnode );\r
obj.startX = current.x;\r
\r
case 15 :\r
// GPU有効で停止（待機）している xnode の解除\r
- //console.log( 'GPU有効で停止（待機）している xnode の解除' + xnode._tag + xnode.getOrder() );\r
+ //console.log( 'GPU有効で停止（待機）している xnode の解除' + xnode[ '_tag' ] + xnode[ 'getOrder' ]() );\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
- X_ViewPort.listenOnce( X_Event.AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
+ obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID );\r
+ X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
return true;\r
\r
case 100 : // stop() : アニメーションを中断して削除\r
};\r
\r
function X_Node_Anime_getComputedPosition( that ) {\r
- var matrix = X_node_CSS_getComputedStyle( that._rawObject, null ),\r
+ var matrix = X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ),\r
x, y;\r
\r
if ( X_Node_Anime_hasTransform ) {\r
};\r
\r
function X_Node_Anime_onTransitionEnd( e ){\r
- if( !this._anime || this._anime.phase !== 2 ) return X.Callback.PREVENT_DEFAULT | X.Callback.STOP_PROPAGATION;\r
- this._anime.phase = 3;\r
+ if( !this[ '_anime' ] || this[ '_anime' ].phase !== 2 ) return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION;\r
+ this[ '_anime' ].phase = 3;\r
\r
console.log( 'トランジション終了' );\r
\r
X_Node_Anime_onTransition = true;\r
- this.dispatch( { type : X_Event.ANIME_END, gpu : this._anime.gpuParent } );\r
+ this[ 'dispatch' ]( { type : X_EVENT_ANIME_END, gpu : this[ '_anime' ].gpuParent } );\r
X_Node_Anime_onTransition = false;\r
\r
X_Node_Anime_needsDetection = true;\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
- var obj = this._anime, tmp;\r
+ var obj = this[ '_anime' ], tmp;\r
if( !obj ){\r
console.log( '_anime無' );\r
return;\r
X_Node_Anime_updatePosition( this, obj.destX, obj.destY, obj.destA, false );\r
X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );\r
delete obj.gpuTimerID;\r
- delete this._anime;\r
+ delete this[ '_anime' ];\r
console.log( 'GPUレイヤーの破棄を指示' );\r
\r
- X_ViewPort.listenOnce( X_Event.AFTER_UPDATE, this, X_Node_Anime_gpuReleased );\r
+ X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, X_Node_Anime_gpuReleased );\r
};\r
\r
function X_Node_Anime_gpuReleased(){\r
console.log( 'GPU レイヤーが解放されました' );\r
- this.dispatch( { type : X_Event.GPU_RELEASED, gpu : true } );\r
+ this[ 'dispatch' ]( { type : X_EVENT_GPU_RELEASED, gpu : true } );\r
};\r
\r
function X_Node_Anime_clearTransition( xnode ){\r
// 開始座標のセット(新規のみ)\r
// アニメーション指定のセット(または解除)(対象のみ)\r
// 目標座標のセット\r
- xnode.unlisten( 'transitionend', X_Node_Anime_onTransitionEnd );\r
+ xnode[ 'unlisten' ]( 'transitionend', X_Node_Anime_onTransitionEnd );\r
\r
- xnode.css({\r
+ xnode[ 'css' ]({\r
//willChange : '',\r
backfaceVisibility : '',\r
transitionTimingFunction : '',\r
function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){\r
//console.log( 'y : ' + y + ' gpu : ' + !!useGPU );\r
if( X_Node_Anime_hasTransform ){\r
- xnode.css({\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
+ xnode[ 'css' ]({\r
left : ( x | 0 ) + 'px',\r
top : ( y | 0 ) + 'px',\r
opacity : opacity\r
\r
if( X_Node_Anime_translateZ ){\r
if( useGPU ){\r
- if( xnode._flags & X_Node_State.GPU_RELEASE_RESERVED ){\r
- xnode._flags &= X_Node_BitMask_RESET_GPU;\r
- xnode._flags |= X_Node_State.GPU_NOW;\r
+ if( xnode[ '_flags' ] & X_Node_State.GPU_RELEASE_RESERVED ){\r
+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+ xnode[ '_flags' ] |= X_Node_State.GPU_NOW;\r
} else\r
- if( xnode._flags & X_Node_State.GPU_NOW ){\r
+ if( xnode[ '_flags' ] & X_Node_State.GPU_NOW ){\r
} else {\r
- xnode._flags &= X_Node_BitMask_RESET_GPU;\r
- xnode._flags |= X_Node_State.GPU_RESERVED;\r
+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+ xnode[ '_flags' ] |= X_Node_State.GPU_RESERVED;\r
};\r
} else {\r
- if( xnode._flags & X_Node_State.GPU_NOW ){\r
- xnode._flags &= X_Node_BitMask_RESET_GPU;\r
- xnode._flags |= X_Node_State.GPU_RELEASE_RESERVED; \r
+ if( xnode[ '_flags' ] & X_Node_State.GPU_NOW ){\r
+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+ xnode[ '_flags' ] |= X_Node_State.GPU_RELEASE_RESERVED; \r
} else\r
- if( xnode._flags & X_Node_State.GPU_RESERVED ){\r
- xnode._flags &= X_Node_BitMask_RESET_GPU;\r
+ if( xnode[ '_flags' ] & X_Node_State.GPU_RESERVED ){\r
+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
};\r
}; \r
};\r
\r
for( ; i; ){\r
xnode = X_Node_ANIMATIONS[ --i ];\r
- obj = xnode._anime;\r
+ obj = xnode[ '_anime' ];\r
\r
if( obj.destTime <= now ){\r
X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );\r
\r
- delete xnode._anime;\r
+ delete xnode[ '_anime' ];\r
X_Node_ANIMATIONS.splice( i, 1 );\r
\r
// filter な 親が解除されないと子要素への filter が反映されない\r
- xnode.asyncDispatch( { type : X_Event.ANIME_END, gpu : false } );\r
+ xnode[ 'asyncDispatch' ]( { type : X_EVENT_ANIME_END, gpu : false } );\r
} else {\r
easing = obj.easing.fn( ( now - obj.startTime ) / obj.duration );\r
newX = ( obj.destX - obj.startX ) * easing + obj.startX;\r
\r
if( c ){\r
if( X_Node_updateTimerID ){\r
- X_System.listen( X_Event.UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
+ X_System[ 'listen' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
X_Node_Anime_updateTimerID = 0;\r
} else {\r
- X_Node_Anime_updateTimerID = X.Timer.requestFrame( X_Node_Anime_updateAnimationsNoTransition );\r
+ X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition );\r
};\r
} else {\r
X_Node_Anime_updateTimerID = 0;\r
OSDN Git Service
