\r
-\r
var\r
ease = {\r
quadratic: {\r
/* Opera mobile で translateZ(0) が有効だと XY が 0 0 になる */\r
/* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox, 手当てが済むまでここは常に false */\r
X_Node_Anime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA.OperaMobile && !X_UA.OperaTablet ? ' translateZ(0)' : '',\r
- X_Node_Anime_hasTransition = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X_UA.Opera, // Opera12(XP,8.1) 切った方がスムース\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_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
\r
/*\r
* TODO : scale, ActiveX transform, zoom, fontSizeScale\r
- * TODO : rotate, ActiveX transform\r
+ * TODO : rotate, ActiveX transform -> 位置補正のために size 情報が必要なので、commitUpdate 後に計算して適用\r
+ * TODO : matrix\r
+ * TODO : skew\r
+ * TODO : filter\r
+ * TODO 前回位置からの継続\r
*/\r
Node.prototype.animate = function( start, dest, duration, easing, wait ){\r
var isNew = !this._anime,\r
obj.destY = ( dest.y || dest.y === 0 ) ? dest.y : obj.destY || 0;\r
obj.destA = 0 <= dest.opacity && dest.opacity <= 1 ? dest.opacity : obj.destA || 1;\r
\r
+ X_Node_ANIMATIONS.indexOf( this ) === -1 &&\r
+ ( X_Node_ANIMATIONS[ X_Node_ANIMATIONS.length ] = this );\r
+\r
+ \r
if( X_Node_Anime_onTransition ) return this;\r
\r
if( X_Node_Anime_hasTransition ){\r
\r
isNew && this.dispatch( { type : X.Event.ANIME_START, gpu : false } );\r
};\r
-\r
- X_Node_ANIMATIONS.indexOf( this ) === -1 &&\r
- ( X_Node_ANIMATIONS[ X_Node_ANIMATIONS.length ] = this );\r
\r
console.log( 'animate ' + this._id + ' y:' + obj.startX + ' > ' + obj.destX + ' d:' + obj.duration );\r
\r
X_Node_Anime_reserved = true;\r
\r
if( X_Node_updateTimerID ){\r
- //console.log( before ? '> BEFORE_UPDATE' : '> UPDATED' );\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
} else {\r
- //console.log( '> Timer' );\r
+ console.log( '> Timer' );\r
// Opera12 requestAnimationFrame では transition が動かない、、、\r
X_Node_Anime_updateTimerID =\r
X_UA.Opera ?\r
\r
//console.log( v.type || v );\r
\r
- //console.log( 'updateAnimations ' + i + ' ' + X_Node_Anime_needsDetection );\r
+ //console.log( 'updateAnimations len:' + i + ' time:' + v + ' det:' + X_Node_Anime_needsDetection );\r
\r
if( X_Node_Anime_needsDetection ) X_Node_Anime_detectAnimationLayers();\r
\r
break;\r
case 0 : // 開始位置+アニメーションの設定 \r
case 8 :\r
- xnode.dispatch( { type : X.Event.ANIME_START, gpu : phase === 8 } );\r
X_ViewPort.unlisten( X.Event.AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
\r
- X_Node_Anime_readyTransition( xnode );\r
+ xnode.css({\r
+ //willChange : X_Node_Anime_transitionProps + ',opacity,width,height',\r
+ backfaceVisibility : 'hidden',\r
+ transitionTimingFunction : obj.easing.style,\r
+ transitionDelay : '0s' // 0.001 にすると transitionend のタイミングが狂う、、、\r
+ });\r
+ \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
++obj.phase;\r
break;\r
case 1 :\r
xnode.listenOnce( 'transitionend', X_Node_Anime_onTransitionEnd );\r
\r
xnode.css({\r
- transitionProperty : X_Node_Anime_transitionProps + ',opacity,width,height', // X_Node_Anime_readyTransitionに移動??\r
- transitionDuration : obj.duration + 'ms'\r
+ transitionProperty : X_Node_Anime_transitionProps + ',opacity,width,height',\r
+ transitionDuration : obj.duration + 'ms'\r
});\r
\r
+ console.log( '修了位置 ' + phase );\r
X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, obj.gpuParent );\r
- obj.phase = 2; \r
+ obj.phase = 2;\r
break;\r
};\r
console.log( 'duration = 0 の場合、アニメーションの解除' );\r
\r
case 3 : // アニメーションの解除\r
obj.phase = obj.gpuParent ? 10 : 4;\r
- // このタイミングで animation 関連の css を削除したところ、iOS3、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
break;\r
\r
case 10 :\r
// アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機)\r
- X_Node_Anime_clearTransition( xnode ); // TODO X_Node_Anime_releaseGPULayer に移動?\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
console.log( '_anime無' );\r
return;\r
};\r
+ X_Node_Anime_clearTransition( this );\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
this.dispatch( { type : X.Event.GPU_RELEASED, gpu : true } );\r
};\r
\r
-function X_Node_Anime_readyTransition( xnode ){\r
- xnode.css({\r
- //zIndex : 0,\r
- //willChange : X_Node_Anime_transitionProps + ',opacity,width,height',\r
- backfaceVisibility : 'hidden',\r
- transitionTimingFunction : xnode._anime.easing.style,\r
- transitionDelay : '0s' // 0.001 にすると transitionend のタイミングが狂う、、、\r
- });\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
- //zIndex : 1,\r
//willChange : '',\r
backfaceVisibility : '',\r
transitionTimingFunction : '',\r
opacity : opacity\r
});\r
};\r
- // xnode._anime.x, y\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
+ } else\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
+ };\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
+ } else\r
+ if( xnode._flags & X_Node_State.GPU_RESERVED ){\r
+ xnode._flags &= X_Node_BitMask_RESET_GPU;\r
+ };\r
+ }; \r
+ };\r
};\r
\r
function X_Node_Anime_updateAnimationsNoTransition(){\r
\r
if( obj.destTime <= now ){\r
X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );\r
- //xnode.asyncDispatch( 'transitionend' );\r
+\r
delete xnode._anime;\r
X_Node_ANIMATIONS.splice( i, 1 );\r
\r