\r
-var\r
- ease = {\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
- 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
- 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
- style: '',\r
- fn: function (k) {\r
- if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {\r
- return 7.5625 * k * k;\r
- } else if ( k < ( 2 / 2.75 ) ) {\r
- return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;\r
- } else if ( k < ( 2.5 / 2.75 ) ) {\r
- return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;\r
- } else {\r
- return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;\r
- }\r
- }\r
- },\r
- 'elastic' : {\r
- style: '',\r
- fn: function (k) {\r
- var f = 0.22,\r
- e = 0.4;\r
-\r
- if ( k === 0 ) { return 0; }\r
- if ( k == 1 ) { return 1; }\r
-\r
- return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 );\r
- }\r
- }\r
- };\r
- \r
-// 新規アニメーションが追加された場合、\r
-// tree が dirty なら AFTER_COMMIT を待つ\r
-// 1) xnode の既存アニメーションとの親子関係の調査\r
-// 親なら -> 既存アニメーションの GPU レイヤー解除\r
-// 子なら -> GPU レイヤーを設定しない\r
-// 2) 目標座標のセット\r
-// 3) アニメーション完了後も GPU レイヤーはしばらく解除しない スクロール等の連続アニメーション時に GPU 転送時間で画面ががたつくから\r
-// アニメ中の 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_onTransition = false,\r
+var X_NodeAnime_QUEUE = [],\r
+ X_NodeAnime_uid = 0,\r
+ X_NodeAnime_reserved = false,\r
+ X_NodeAnime_updateTimerID = 0,\r
+ X_NodeAnime_needsDetection = false,\r
+ \r
+ X_NodeAnime_hasTransform = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],\r
+ \r
+ X_NodeAnime_hasDXTransform = 5.5 <= X_UA[ 'IE' ] && X_UA[ 'IE' ] < 9 && X_UA[ 'ActiveX' ], // IEHost が 11 の場合不可\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
- 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_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 = false; //X_UA[ 'iOS' ] < 6;\r
-\r
-// gpu化だけ transformX , willChange\r
-// 終了位置の変更\r
-// 中断\r
+ /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */\r
+ X_NodeAnime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] &&\r
+ !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] &&\r
+ !( X_UA[ 'IE' ] === 11 ) && !( X_UA[ 'IEHost' ] === 11 ) ? ' translateZ(0)' : '',\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
+ * phase:\r
+ * 0: アニメーション無\r
+ * 1: 登録されたばかり\r
+ * 2: 準待機\r
+ * 3: 後続待機\r
+ * 4: 強制停止(GPU転送予約)\r
+ * 5: GPU解除待ち\r
+ * 6: 開始可能\r
+ * 7: アニメーション中\r
*/\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
- // 現在 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 || 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 || 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
- ( X_Node_ANIMATIONS[ X_Node_ANIMATIONS.length ] = this );\r
\r
+ X_NODE_ANIME_RESET = 1,\r
+ X_NODE_ANIME_STAY_GPU = 2,\r
\r
- if( X_Node_Anime_onTransition ) return this;\r
+ X_NodeAnime_DEFAULT = {\r
+ x : NaN,\r
+ y : NaN,\r
+ toX : NaN,\r
+ toY : NaN,\r
+ fromX : NaN,\r
+ fromY : NaN,\r
+ rotate : NaN, fromRotate : NaN, toRotate : NaN,\r
+ skewX : NaN, fromSkewX : NaN, toSkewX : NaN,\r
+ skewY : NaN, fromSkewY : NaN, toSkewY : NaN,\r
+ scaleX : 1, fromScaleX : 1, toScaleX : 1,\r
+ scaleY : 1, fromScaleY : 1, toScaleY : 1,\r
+ alpha : NaN,\r
+ scrollX : NaN, fromScrollX : NaN, toScrollX : NaN,\r
+ scrollY : NaN, fromScrollY : NaN, toScrollY : NaN //,\r
+ //doScroll : false//,\r
+ //duration : 0\r
+ //phase, lazyRelease, easing, follower, releaseNow, inited, progress, fallback\r
+ // fromTime, toTime\r
+ };\r
\r
- if( X_Node_Anime_hasTransition ){\r
- \r
- if( obj.gpuTimerID ){\r
- X_Timer_remove( obj.gpuTimerID );\r
- delete obj.gpuTimerID;\r
- }; \r
- \r
- X_Node_Anime_needsDetection = true;\r
- \r
- X_Node_Anime_reserveUpdate( true );\r
- } else {\r
- if( !X_Node_Anime_reserved ){\r
- X_Node_Anime_reserved = true;\r
- if( X_Node_updateTimerID ){\r
- X_System[ 'listen' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
- X_Node_Anime_updateTimerID && X_Timer_cancelFrame( X_Node_Anime_updateTimerID );\r
- X_Node_Anime_updateTimerID = 0;\r
- } else {\r
- X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
- X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition );\r
- };\r
- };\r
+/**\r
+ * GPU サポートの効いたアニメーションの設定\r
+ * <a href="https://outcloud.blogspot.jp/2015/12/pettanR-Node-Anime.html">ぺったんRフレームワークのアニメーションメソッド</a>\r
+ * @alias Node.prototype.animate\r
+ * @param {object} obj\r
+ * @return {Node} メソッドチェーン\r
+ * @example\r
+ * xnode.animate{\r
+ * from : {\r
+ * x : num,\r
+ * y : num,\r
+ * opacity : 0.0, //～1.0\r
+ * rotate : deg,\r
+ * skew : deg,\r
+ * skewX : deg,\r
+ * skewY : deg,\r
+ * scale : num,\r
+ * scaleX : num,\r
+ * scaleY : num,\r
+ * scrollX : num,\r
+ * scrollY : num\r
+ * },\r
+ * to : {}, // from と同じ\r
+ * duration : ms,\r
+ * lazyRelease : ms,\r
+ * easing : 'quadratic', // function, 'circular', 'back', 'bounce', 'elastic'\r
+ * fallback : bitFlag // 16:DXTransform, 8:css-p, 4:zoom(s) > 2:fontSize(s) > 1:width&height(vh,s)\r
+ * ** tree にいなくてもアニメーションを行いイベントを発生\r
+ * ** SVG transfrom\r
+ * fallbackWidth, fallbackHeight, transformOrigin( 0.5, 0.5 )\r
+ * }\r
+ */\r
+function X_Node_animate( obj ){\r
+ var list = X_NodeAnime_QUEUE,\r
+ from = obj[ 'from' ] || {},\r
+ dest = obj[ 'to' ] || {},\r
+ duration = obj[ 'duration' ],\r
+ lazyRelease = obj[ 'lazyRelease' ],\r
+ easing = obj[ 'easing' ],\r
+ fallback = obj[ 'fallback' ],\r
+ a, sameRate;\r
\r
- isNew && this[ 'dispatch' ]( { type : X_EVENT_ANIME_START, 'gpu' : false } );\r
- };\r
+ obj = this[ '_anime' ];\r
\r
- // console.log( 'animate() ' + this[ '_id' ] + ' y:' + obj.startY + ' > ' + obj.destY + ' d:' + obj.duration );\r
+ if( !( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ){\r
+ alert( '@animate 要素はツリーに追加されていません!' );\r
+ // それでもアニメーションしてタイマー代わりにするとか、、、?\r
+ return this;\r
+ };\r
\r
- return this;\r
-};\r
+ if( !obj ){\r
+ this[ '_anime' ] = obj = X_Object_copy( X_NodeAnime_DEFAULT );\r
+ a = this[ '_css' ] && parseFloat( this[ '_css' ].opacity );\r
+ if( 0 <= a ) obj.alpha = a;\r
+ };\r
+ \r
+// form :\r
+ obj.fromX = obj.x = X_NodeAnime_getFinite( from[ 'x' ], obj.x );\r
+ obj.fromY = obj.y = X_NodeAnime_getFinite( from[ 'y' ], obj.y );\r
+ obj.fromRotate = obj.rotate = X_NodeAnime_getFinite( from[ 'rotate' ], obj.rotate );\r
+ obj.fromSkewX = obj.skewX = X_NodeAnime_getFinite( from[ 'skewX' ], from[ 'skew' ], obj.skewX );\r
+ obj.fromSkewY = obj.skewY = X_NodeAnime_getFinite( from[ 'skewY' ], from[ 'skew' ], obj.skewY );\r
+ obj.fromScaleX = obj.scaleX = X_NodeAnime_getFinite( from[ 'scaleX' ], from[ 'scale' ], obj.scaleX );\r
+ obj.fromScaleY = obj.scaleY = X_NodeAnime_getFinite( from[ 'scaleY' ], from[ 'scale' ], obj.scaleY );\r
+ obj.fromAlpha = obj.alpha = X_NodeAnime_getFinite( from[ 'opacity' ], obj.alpha );\r
+ obj.fromScrollX = obj.scrollX = X_NodeAnime_getFinite( from[ 'scrollX' ], obj.scrollX );\r
+ obj.fromScrollY = obj.scrollY = X_NodeAnime_getFinite( from[ 'scrollY' ], obj.scrollY );\r
+ // to :\r
+ obj.toX = X_NodeAnime_getFinite( dest[ 'x' ], obj.x );\r
+ obj.toY = X_NodeAnime_getFinite( dest[ 'y' ], obj.y );\r
+ obj.toRotate = X_NodeAnime_getFinite( dest[ 'rotate' ], obj.rotate );\r
+ obj.toSkewX = X_NodeAnime_getFinite( dest[ 'skewX' ], dest[ 'skew' ], obj.skewX );\r
+ obj.toSkewY = X_NodeAnime_getFinite( dest[ 'skewY' ], dest[ 'skew' ], obj.skewY );\r
+ obj.toScaleX = X_NodeAnime_getFinite( dest[ 'scaleX' ], dest[ 'scale' ], obj.scaleX );\r
+ obj.toScaleY = X_NodeAnime_getFinite( dest[ 'scaleY' ], dest[ 'scale' ], obj.scaleY );\r
+ obj.toAlpha = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.alpha );\r
+ obj.toScrollX = X_NodeAnime_getFinite( dest[ 'scrollX' ], obj.scrollX );\r
+ obj.toScrollY = X_NodeAnime_getFinite( dest[ 'scrollY' ], obj.scrollY );\r
\r
-Node.prototype[ 'stop' ] = function(){\r
- var obj = this[ '_anime' ];\r
- \r
- if( !obj ) return this;\r
+ if( X_Type_isFinite( obj.toX ) && X_Type_isNaN( obj.x ) ) obj.x = obj.fromX = 0;\r
+ if( X_Type_isFinite( obj.toY ) && X_Type_isNaN( obj.y ) ) obj.y = obj.fromY = 0;\r
\r
- if( X_Node_Anime_hasTransition ){\r
- obj.phase = 100;\r
- X_Node_Anime_needsDetection = true;\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
- };\r
- return this;\r
-};\r
+ if( obj.toRotate && X_Type_isNaN( obj.rotate ) ) obj.rotate = obj.fromRotate = 0;\r
+ if( obj.toSkewX && X_Type_isNaN( obj.skewX ) ) obj.skewX = obj.fromSkewX = 0;\r
+ if( obj.toSkewY && X_Type_isNaN( obj.skewY ) ) obj.skewY = obj.fromSkewY = 0;\r
\r
-function X_Node_Anime_reserveUpdate( before ){\r
- if( !X_Node_Anime_reserved ){\r
- X_Node_Anime_reserved = true;\r
+ obj.duration = 0 <= duration && X_Type_isFinite( duration ) ? duration : 0;\r
+ obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0;\r
+ obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];\r
+ obj.inited = false;\r
+ obj.transform = ( X_Type_isFinite( obj.x ) || X_Type_isFinite( obj.y ) || obj.lazyRelease ) && X_NodeAnime_hasTransform;\r
+ obj.doScroll = 0 <= obj.toScrollX || 0 <= obj.toScrollY;\r
+ obj.fallback = 0;\r
+ obj.altX = fallback & 8 ? 'right' : 'left'; \r
+ obj.altY = fallback & 16 ? 'bottom' : 'top';\r
+ \r
+ // scale\r
+ if( obj.toScaleX !== 1 || obj.fromScaleX !== 1 || obj.toScaleY !== 1 || obj.fromScaleY !== 1 ){\r
+ sameRate = obj.fromScaleX === obj.fromScaleY && obj.toScaleX === obj.toScaleY;\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
- } 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
+ if( X_NodeAnime_hasTransform ){\r
+ obj.transform = true;\r
+ } else\r
+ if( X_NodeAnime_hasDXTransform && ( fallback & 32 ) ){ // DX Transform\r
+ obj.fallback = 32;\r
+ } else\r
+ if( ( fallback & 4 ) && sameRate ){ // zoom\r
+ obj.fallback = 4;\r
+ } else\r
+ if( ( fallback & 2 ) && sameRate ){ // fontSize\r
+ obj.fallback = 2;\r
+ } else\r
+ if( fallback & 1 ){ // width & height\r
+ obj.fallback = 1;\r
};\r
- } else {\r
- // console.log( ' X_Node_Anime_reserved 済、予約なし' );\r
};\r
-};\r
\r
-function X_Node_Anime_updateAnimations( v, updateNow ){\r
- var i = X_Node_ANIMATIONS.length, c = false, ret, xnode;\r
- \r
- // console.log( v.type || v );\r
- \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
- for( ; i; ){\r
- xnode = X_Node_ANIMATIONS[ --i ];\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
+ // rotate, skew\r
+ if( X_Type_isFinite( obj.rotate ) || X_Type_isFinite( obj.skewX ) || X_Type_isFinite( obj.skewY ) ){\r
+ if( X_NodeAnime_hasTransform ){\r
+ obj.transform = true;\r
} else\r
- if( ret !== false ){\r
- c = true;\r
+ if( X_NodeAnime_hasDXTransform && ( fallback & 32 ) ){ // DX Transform\r
+ obj.fallback = 32;\r
};\r
};\r
- \r
- if( ( X_Node_Anime_updateTimerID || updateNow ) && 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
-};\r
\r
-// TODO X_Timer_requestFrame 経由の BEFORE_UPDATE で更新を行う\r
-function X_Node_Anime_detectAnimationLayers(){\r
- var i = X_Node_ANIMATIONS.length,\r
- l = i,\r
- j, xnode, parent, hasGPUChild, remove;\r
-\r
- for( ; i; ){\r
- xnode = X_Node_ANIMATIONS[ --i ];\r
- parent = hasGPUChild = false;\r
- for( j = l; j; ){\r
- _xnode = X_Node_ANIMATIONS[ --j ];\r
- \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
- } else\r
- if( xnode[ '_anime' ].gpuParent ){\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
- 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' ].gpuParent ) || xnode[ '_anime' ].phase === 10 ){\r
- xnode[ '_anime' ].phase = 15;\r
- } else\r
- if( _xnode[ '_anime' ].gpuParent ){\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
- hasGPUChild = true;\r
- _xnode[ '_anime' ].phase -= 8;\r
- };\r
- break;\r
- };\r
+ if( !obj.duration && 6 <= obj.phase ){\r
+ this[ 'stop' ](); // 現在値で停止\r
+ } else {\r
+ if( !obj.phase ){\r
+ list[ list.length ] = this;\r
+ obj.phase = 1;\r
+ obj.uid = ++X_NodeAnime_uid;\r
+ X_NodeAnime_needsDetection = true;\r
+ } else\r
+ if( obj.phase < 4 ){\r
+ list.splice( list.indexOf( this ), 1 );\r
+ list[ list.length ] = this;\r
+ obj.uid = ++X_NodeAnime_uid;\r
+ X_NodeAnime_needsDetection = true;\r
+ } else\r
+ if( obj.duration ){\r
+ // リストの先頭にいるため検査不要でアニメーション開始可能 4, 5, 6, 7\r
+ obj.phase = 6;\r
+ } else\r
+ // GPU 転送予約、または transform や opacity の値のみ設定\r
+ if( obj.phase !== 5 ){ // GPU解除待ち ではない -> 4. 6, 7\r
+ obj.phase = 4; // 強制停止(GPU転送予約)または値のみ更新\r
+ obj.releaseNow = false; // TODO folower がいるため GPU 転送できないケースあり\r
+ X_NodeAnime_needsDetection = true;\r
};\r
\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
- } else\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
+ if( !X_NodeAnime_reserved ){\r
+ X_NodeAnime_reserved = true;\r
+ \r
+ if( X_Node_updateTimerID ){\r
+ if( X_NodeAnime_updateTimerID ) X_NodeAnime_updateTimerID = X_Timer_cancelFrame( X_NodeAnime_updateTimerID );\r
+\r
+ X_System[ 'listen' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );\r
+ } else {\r
+ X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );\r
+ X_NodeAnime_updateTimerID = X_Timer_requestFrame( X_NodeAnime_updateAnimations );\r
};\r
- };\r
+ }; \r
};\r
- \r
- X_Node_Anime_needsDetection = false;\r
+\r
+ return this;\r
};\r
\r
-/* TODO\r
- * 0:無, 1:子のGPU解除待 2:GPU予約, 3:GPU now!, 4:GPU解除予約\r
+function X_NodeAnime_getFinite( a, b, c ){\r
+ if( a || a === 0 ) return a;\r
+ if( b || b === 0 ) return b;\r
+ if( c || c === 0 ) return c;\r
+ return NaN;\r
+};\r
+\r
+/*\r
+ * 1.アニメーション中の要素の停止 ->後続アニメーションの開始\r
+ * 2.アニメーション待機中の要素の停止 -> 後続アニメーションの再調査\r
*/\r
-function X_Node_Anime_updateAnimation( xnode ){\r
- var obj = xnode[ '_anime' ],\r
- phase = obj.phase,\r
- current, time;\r
- switch( phase ){\r
- case 2 :\r
- // アニメーション中\r
- return false;\r
- \r
- case -1 :// 子の GPU レイヤー解除待ち\r
- case 7 :\r
- ++obj.phase;\r
- break;\r
- case 0 : // 開始位置+アニメーションの設定 \r
- case 8 :\r
- X_ViewPort[ 'unlisten' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
- \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
- case 9 : // 終了位置の設定\r
- obj.gpuParent = phase === 9;\r
- if( obj.duration ){\r
- xnode[ 'listenOnce' ]( 'transitionend', X_Node_Anime_onTransitionEnd );\r
- \r
- xnode[ 'css' ]({\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
- break;\r
- };\r
- //console.log( 'duration = 0 の場合、アニメーションの解除' );\r
- // duration = 0 の場合、アニメーションの解除\r
+/**\r
+ * アニメーションの停止。\r
+ * @alias Node.prototype.stop\r
+ * @return {Node} メソッドチェーン\r
+ */\r
+function X_Node_stop( option ){\r
+ var obj = this[ '_anime' ],\r
+ list = X_NodeAnime_QUEUE,\r
+ rm;\r
+ \r
+ if( !obj || !obj.phase ) return this;\r
+\r
+ switch( obj.phase ){\r
+ case 6 : // アニメーション開始可能 ??\r
+ case 2 : // 準待機\r
+ case 3 : // アニメーション待機中\r
+ X_NodeAnime_needsDetection = true;\r
+ case 1 :\r
+ rm = true;\r
+\r
+ case 4 : // 強制停止(GPU転送予約)\r
+ case 7 : // アニメーション中\r
+ if( option & X_NODE_ANIME_RESET ){\r
+ X_Object_override( obj, X_NodeAnime_DEFAULT );\r
+ }; // TODO 終了値で停止も,,,\r
\r
- case 3 : // アニメーションの解除\r
- obj.phase = obj.gpuParent ? 10 : 4;\r
+ // obj.canceled = true;\r
\r
- console.log( '#### アニメーションの解除 ' + obj.phase );\r
+ if( rm ) break; // 1,2,3,6 の場合ここまで\r
+ \r
+ obj.toX = obj.x;\r
+ obj.toY = obj.y;\r
+ obj.toRotate = obj.rotate;\r
+ obj.toSkewX = obj.skewX;\r
+ obj.toSkewY = obj.skewY;\r
+ obj.toScaleX = obj.scaleX;\r
+ obj.toScaleY = obj.scaleY;\r
+ obj.toAlpha = obj.alpha;\r
+ obj.toScrollX = obj.scrollX;\r
+ obj.toScrollY = obj.scrollY;\r
+\r
+ obj.phase = 4; // 強制解除\r
+ X_NodeAnime_needsDetection = true;\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
+ case 5 : // GPU解除待ち\r
+ obj.releaseNow = !( option & X_NODE_ANIME_STAY_GPU );\r
break;\r
+ };\r
\r
- case 4 :\r
- // アニメーションは停止・GPU=false -> リストから削除\r
- obj.gpuParent = false;\r
- return true;\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_releaseGPULayer.call( xnode );\r
- };\r
- };\r
- return false;\r
- \r
- case 5 :\r
- case 13 :\r
- // 子のGPU解除待ち\r
- ++obj.phase;\r
- break;\r
- \r
- // GPU レイヤーの変更> アニメーションは継続,但し残り時間が短ければ停止\r
- case 6 : \r
- case 14 :\r
- now = X_Timer_now();\r
- time = obj.duration - now + obj.startTime;\r
- if( time < 16 ){\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[ 'asyncDispatch' ]( time, { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );\r
- } else {\r
- current = X_Node_Anime_getComputedPosition( xnode );\r
- obj.startX = current.x;\r
- obj.startY = current.y;\r
- obj.startA = current.a;\r
- obj.duration = time;\r
- obj.startTime = now;\r
- X_Node_Anime_updatePosition( xnode, current.x, current.y, current.a, phase === 14 );\r
- obj.phase = phase === 14 ? 9 : 1;\r
- };\r
- break;\r
- \r
- case 15 :\r
- // GPU有効で停止（待機）している xnode の解除\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
- //delete obj.gpuTimerID;\r
- X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased );\r
- return true;\r
- \r
- case 100 : // stop() : アニメーションを中断して削除\r
- //console.log( 'stop() gpu:' + obj.gpuParent );\r
- // console.log( 'アニメーションを中断して削除' );\r
- current = X_Node_Anime_getComputedPosition( xnode );\r
- \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
- \r
+ if( rm ){\r
+ list.splice( list.indexOf( this ), 1 );\r
+ obj.phase = 0; \r
};\r
+\r
+ return this;\r
};\r
+/*\r
+ * remove(append swap 等でない部的に呼ばれている場合も), kill 時に\r
+ */\r
+function X_NodeAnime_stopNow( xnode ){\r
+ var obj = xnode[ '_anime' ],\r
+ flags = xnode[ '_flags' ],\r
+ list = X_NodeAnime_QUEUE,\r
+ skipUpdate;\r
+ \r
+ // if( !obj || !obj.phase ) return; 呼び出し側で検証済\r
\r
-function X_Node_Anime_getComputedPosition( that ) {\r
- var matrix = X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ),\r
- x, y;\r
+ X_NodeAnime_needsDetection = true;\r
+ list.splice( list.indexOf( xnode ), 1 );\r
+ obj.phase = 0;\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
+ // この部分 startUpdate へ?\r
+ if( flags & ~X_Node_BitMask_RESET_GPU ){\r
+ skipUpdate = flags & X_NodeFlags_GPU_RESERVED;\r
+ ( flags & X_NodeFlags_GPU_RELEASE_RESERVED ) || X_NodeAnime_updatePosition( xnode, obj, 0.5, false );\r
+ skipUpdate || ( xnode[ '_rawObject' ].style.cssText = X_Node_CSS_objToCssText( xnode ) );\r
+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
};\r
- \r
- return { x : x, y : y, a : matrix[ X_Node_CSS_Support[ 'opacity' ] ] };\r
};\r
\r
-function X_Node_Anime_onTransitionEnd( e ){\r
- console.log( '[TransitionEnd] ' + ( this[ '_anime' ] && this[ '_anime' ].phase ) );\r
+/*\r
+ * 1. 新規アニメーションが現在アニメーション中の要素の親か子であればアニメーションを待機\r
+ */\r
+function X_NodeAnime_detectWaitAnimation( xnode, duration, isTest ){\r
+ var list = X_NodeAnime_QUEUE,\r
+ i = 0, _xnode, obj;\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
+ for( ; _xnode = list[ i ]; ++i ){\r
+ if( _xnode === xnode ) break;\r
+ \r
+ // アニメーションの優先度はリストにいる順\r
+ // まず先行する後続待機要素の中に、親子関係のものがいないか？探す\r
+ if( _xnode[ '_anime' ].phase <= 3 ){\r
+ if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){ // 祖先か？見た方が早そう\r
+ // -> いる、このような要素が複数いる場合、誰に後続すればいいか？判然としないため、準待機フラグを立てる\r
+ return 2;\r
+ };\r
+ };\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
- \r
- X_Node_Anime_needsDetection = true;\r
- // iOS は transitionend 内の 更新でアニメーション可能 iOS3, iOS4 で確認 \r
- // win+Gecko は不可\r
- X_Node_Anime_updateAnimations( 0, X_Node_updateOnTransitionEnd );\r
- \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
- if( !obj ){\r
- // console.log( '_anime無' );\r
- return;\r
+ // -> いない、アニメーション中(開始可能も)の要素の中に、親子関係のものがいないか？探す\r
+ // -> いる、待機状態へ\r
+ // -> いない、アニメーションが可能\r
+ for( i = 0; _xnode = list[ i ]; ++i ){\r
+ if( _xnode === xnode ) break;\r
+ obj = _xnode[ '_anime' ];\r
+ if( 6 <= obj.phase ){\r
+ if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){\r
+ return isTest ? 3 : _xnode;\r
+ };\r
+ };\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
- delete this[ '_anime' ];\r
- console.log( 'GPUレイヤーの破棄を指示' );\r
- \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
-};\r
-\r
-function X_Node_Anime_clearTransition( xnode ){\r
- // 開始座標のセット(新規のみ)\r
- // アニメーション指定のセット(または解除)(対象のみ)\r
- // 目標座標のセット\r
- xnode[ 'unlisten' ]( 'transitionend', X_Node_Anime_onTransitionEnd );\r
-\r
- xnode[ 'css' ]({\r
- //willChange : '',\r
- backfaceVisibility : '',\r
- transitionTimingFunction : '',\r
- transitionDelay : '',\r
- transitionDuration : ''\r
- });\r
+ // アニメーション可能\r
+ return duration ? 6 : 4; // duration がない場合は、アニメーション強制停止へ進みそこから GPU 解除待ちへ\r
};\r
\r
-function X_Node_Anime_updatePosition( xnode, x, y, opacity, 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 === 1 ? '' : opacity\r
- });\r
- } else {\r
- x === x && xnode[ 'css' ]({\r
- left : ( x | 0 ) + 'px',\r
- opacity : opacity === 1 ? '' : opacity });\r
- y === y && xnode[ 'css' ]({\r
- top : ( y | 0 ) + 'px',\r
- opacity : opacity === 1 ? '' : opacity });\r
- };\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
+function X_NodeAnime_updateAnimations( e ){\r
+ var list = X_NodeAnime_QUEUE,\r
+ now = X_Timer_now(),\r
+ c = false,\r
+ i, xnode, obj, _xnode,\r
+ rm, progress, easing, lazy;\r
+ \r
+ if( X_NodeAnime_needsDetection ){\r
+ X_NodeAnime_needsDetection = false;\r
+ \r
+ //\r
+ list.sort( X_NodeAnime_sortAnimationNode );\r
+ \r
+ for( i = 0; xnode = list[ i ]; ++i ){\r
+ obj = xnode[ '_anime' ];\r
+ \r
+ if( obj.phase <= 3 ){\r
+ if( !X_Type_isNumber( obj.phase = _xnode = X_NodeAnime_detectWaitAnimation( xnode, obj.duration ) ) ){\r
+ _xnode[ '_anime' ].follower = true;\r
+ obj.phase = 3; // 後続待機\r
+ };\r
} else {\r
- xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
- xnode[ '_flags' ] |= X_Node_State.GPU_RESERVED;\r
+ obj.follower = false;\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
-\r
-function X_Node_Anime_updateAnimationsNoTransition( e ){\r
- var i = X_Node_ANIMATIONS.length,\r
- now = X_Timer_now(),\r
- obj,\r
- newX, newY, newA, easing,\r
- c = false;\r
\r
- for( ; i; ){\r
- xnode = X_Node_ANIMATIONS[ --i ];\r
+ for( i = list.length; i; ){\r
+ rm = false;\r
+ xnode = list[ --i ];\r
obj = xnode[ '_anime' ];\r
\r
- if( obj.destTime <= now ){\r
- X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );\r
+ switch( obj.phase ){\r
+ case 7 : // アニメーション中\r
+ if( now < obj.toTime ){\r
+ obj.progress = progress = ( now - obj.fromTime ) / obj.duration;\r
+ easing = obj.easing( progress );\r
+ obj.x = ( obj.toX - obj.fromX ) * easing + obj.fromX;\r
+ obj.y = ( obj.toY - obj.fromY ) * easing + obj.fromY;\r
+ obj.rotate = ( obj.toRotate - obj.fromRotate ) * easing + obj.fromRotate;\r
+ obj.skewX = ( obj.toSkewX - obj.fromSkewX ) * easing + obj.fromSkewX;\r
+ obj.skewY = ( obj.toSkewY - obj.fromSkewY ) * easing + obj.fromSkewY;\r
+ obj.scaleX = ( obj.toScaleX - obj.fromScaleX ) * easing + obj.fromScaleX;\r
+ obj.scaleY = ( obj.toScaleY - obj.fromScaleY ) * easing + obj.fromScaleY;\r
+ obj.alpha = ( obj.toAlpha - obj.fromAlpha ) * easing + obj.fromAlpha;\r
+ obj.scrollX = ( obj.toScrollX - obj.fromScrollX ) * easing + obj.fromScrollX;\r
+ obj.scrollY = ( obj.toScrollY - obj.fromScrollY ) * easing + obj.fromScrollY;\r
+ X_NodeAnime_updatePosition( xnode, obj, progress, true );\r
+ c = true;\r
+ break;\r
+ };\r
+ // アニメーション終了\r
+ xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_END );\r
+ \r
+ case 4 : // 強制停止(GPU転送予約)または transform や opacity の値のみ設定\r
+ lazy = !obj.follower && !obj.releaseNow && obj.lazyRelease;\r
+ X_NodeAnime_updatePosition( xnode, obj, 1, !!lazy );\r
\r
- delete xnode[ '_anime' ];\r
- X_Node_ANIMATIONS.splice( i, 1 );\r
+ //if( obj.canceled ){\r
+ // xnode[ 'asyncDispatch' ]( X_EVENT_CANCELED );\r
+ //} else {\r
+ \r
+ //};\r
+ \r
+ if( lazy ){\r
+ console.log( 'アニメーション終了(' + obj.phase + ') -> GPU 解除待機 ' + lazy );\r
+ obj.toTime = now + lazy;\r
+ obj.phase = 5; // GPU解除待ち\r
+ c = true;\r
+ } else {\r
+ console.log( 'アニメーション終了(' + obj.phase + ') -> ' );\r
+ rm = true;\r
+ };\r
+ break;\r
+\r
+ case 6 : // アニメーション開始可能\r
+ obj.fromTime = now;\r
+ obj.toTime = now + obj.duration;\r
+ obj.phase = 7; // アニメーション中\r
+ obj.progress = 0; \r
+ xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_START );\r
+ c = true;\r
+ //obj.canceled = false;\r
+ ( !obj.inited || X_NodeAnime_translateZ ) && X_NodeAnime_updatePosition( xnode, obj, 0, true );\r
+ break;\r
\r
- // filter な 親が解除されないと子要素への filter が反映されない\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
- newY = ( obj.destY - obj.startY ) * easing + obj.startY;\r
- newA = ( obj.destA - obj.startA ) * easing + obj.startA;\r
- X_Node_Anime_updatePosition( xnode, newX, newY, newA, false );\r
- obj.x = newX;\r
- obj.y = newY;\r
- obj.a = newA;\r
- c = true; \r
+ case 5 : // GPU解除待ち\r
+ if( obj.toTime <= now || obj.follower || obj.releaseNow ){\r
+ X_NodeAnime_translateZ && X_NodeAnime_updatePosition( xnode, obj, 1, false );\r
+ rm = true;\r
+ } else {\r
+ c = true;\r
+ };\r
+ break;\r
+ \r
+ default : // 2 or 3\r
+ // 待機状態でも親要素が GPU 化していなければ、開始値をセットすることは可能\r
+ obj.inited || X_NodeAnime_updatePosition( xnode, obj, 0, false );\r
+ obj.inited = true;\r
+ break;\r
+ };\r
+ \r
+ obj.releaseNow = false;\r
+ \r
+ if( rm ){\r
+ X_NodeAnime_translateZ && xnode[ 'asyncDispatch' ]( X_EVENT_GPU_RELEASED );\r
+ // 後続のアニメーションがある場合\r
+ if( obj.follower ) X_NodeAnime_needsDetection = c = true;\r
+ list.splice( i, 1 );\r
+ obj.phase = 0;\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_NodeAnime_reserved = c ){\r
if( X_Node_updateTimerID ){\r
// scrollbox では X_System X_EVENT_UPDATED は不可。。。\r
!e || e.type !== X_EVENT_UPDATED ?\r
- X_System[ 'listen' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition ) :\r
- X_Node_Anime_updateTimerID && X_Timer_cancelFrame( X_Node_Anime_updateTimerID );\r
- X_Node_Anime_updateTimerID = 0;\r
+ X_System[ 'listen' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations ) :\r
+ X_NodeAnime_updateTimerID && X_Timer_cancelFrame( X_NodeAnime_updateTimerID );\r
+ X_NodeAnime_updateTimerID = 0;\r
} else {\r
- X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
- X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition );\r
+ X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );\r
+ X_NodeAnime_updateTimerID = X_Timer_requestFrame( X_NodeAnime_updateAnimations );\r
};\r
} else {\r
- X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition );\r
- X_Node_Anime_updateTimerID = 0;\r
+ X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations );\r
+ X_NodeAnime_updateTimerID = 0;\r
+ };\r
+};\r
+\r
+/*\r
+ * アニメーション開始、アニメーション中、強制停止(GPU転送予約)、GPU解除待ち の要素をリストの先頭に\r
+ */\r
+function X_NodeAnime_sortAnimationNode( xnode1, xnode2 ){\r
+ var a = 4 <= xnode1[ '_anime' ].phase,\r
+ b = 4 <= xnode2[ '_anime' ].phase;\r
+ \r
+ if( ( a && b ) && ( !a && !b ) ){ // Chrome のみ\r
+ return xnode1[ '_anime' ].uid - xnode2[ '_anime' ].uid;\r
+ };\r
+ return a ? -1 : 1;\r
+};\r
+\r
+function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){\r
+ var str = '',\r
+ x, y, rotate, skewX, skewY, scaleX, scaleY, alpha,\r
+ scrollX, scrollY;\r
+ \r
+ if( ratio === 1 ){\r
+ x = obj.x = obj.toX;\r
+ y = obj.y = obj.toY;\r
+ rotate = X_Node_CSS_ieMathRangeFix( obj.rotate = obj.toRotate );\r
+ skewX = X_Node_CSS_ieMathRangeFix( obj.skewX = obj.toSkewX );\r
+ skewY = X_Node_CSS_ieMathRangeFix( obj.skewY = obj.toSkewY );\r
+ scaleX = obj.scaleX = obj.toScaleX;\r
+ scaleY = obj.scaleY = obj.toScaleY;\r
+ alpha = obj.alpha = obj.toAlpha;\r
+ obj.scrollX = obj.toScrollX;\r
+ obj.scrollY = obj.toScrollY;\r
+ } else {\r
+ x = obj.x;\r
+ y = obj.y;\r
+ rotate = X_Node_CSS_ieMathRangeFix( obj.rotate );\r
+ skewX = X_Node_CSS_ieMathRangeFix( obj.skewX );\r
+ skewY = X_Node_CSS_ieMathRangeFix( obj.skewY );\r
+ scaleX = obj.scaleX;\r
+ scaleY = obj.scaleY;\r
+ alpha = obj.alpha;\r
+ };\r
+ \r
+ //console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU );\r
+ if( obj.transform ){\r
+ if( ( x === x || y === y ) && ( x !== 0 && y !== 0 ) ) str += ' translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)';\r
+ if( rotate < 0 || 0 < rotate ) str += ' rotate(' + rotate + 'deg)'; // opera は rad?\r
+ if( skewX < 0 || 0 < skewX ) str += ' skewX(' + skewX + 'deg)';\r
+ if( skewY < 0 || 0 < skewY ) str += ' skewY(' + skewY + 'deg)';\r
+ if( scaleX < 1 || 1 < scaleX ) str += ' scaleX(' + scaleX + ')';\r
+ if( scaleY < 1 || 1 < scaleY ) str += ' scaleY(' + scaleY + ')';\r
+ xnode[ 'css' ]( 'transform', ( str ? str.substr( 1 ) : '' ) + ( useGPU ? X_NodeAnime_translateZ : '' ) );\r
+ \r
+ if( X_NodeAnime_translateZ ){\r
+ if( useGPU ){\r
+ if( xnode[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){\r
+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+ xnode[ '_flags' ] |= X_NodeFlags_GPU_NOW;\r
+ } else\r
+ if( !( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ) ){\r
+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+ xnode[ '_flags' ] |= X_NodeFlags_GPU_RESERVED;\r
+ };\r
+ } else {\r
+ if( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ){\r
+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+ xnode[ '_flags' ] |= X_NodeFlags_GPU_RELEASE_RESERVED;\r
+ } else\r
+ if( xnode[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){\r
+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+ };\r
+ }; \r
+ }; \r
+ } else\r
+ if( obj.fallback === 32 ){\r
+ xnode[ 'css' ]( 'dxtransform', [ x | 0, y | 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY, obj.altX, obj.altY ] );\r
+ } else {\r
+ x === x && xnode[ 'css' ]( obj.altX, ( x | 0 ) + 'px' );\r
+ y === y && xnode[ 'css' ]( obj.altY, ( y | 0 ) + 'px' );\r
+ \r
+ switch( obj.fallback ){\r
+ case 4 :\r
+ xnode[ 'css' ]( 'zoom', scaleX );\r
+ break;\r
+ case 2 :\r
+ xnode[ 'css' ]( 'fontSize', scaleX + 'em' );\r
+ break;\r
+ case 1 :\r
+ \r
+ break;\r
+ };\r
+ };\r
+ \r
+ if( obj.doScroll && xnode[ '_rawObject' ] ){\r
+ console.log( 'ok ' + ratio );\r
+ xnode[ '_rawObject' ].scrollLeft = obj.scrollX | 0;\r
+ xnode[ '_rawObject' ].scrollTop = obj.scrollY | 0;\r
+ //X_Node_reserveUpdate();\r
};\r
+ \r
+ alpha === alpha && xnode[ 'css' ]( 'opacity', alpha );\r
};\r
\r
+\r
+var\r
+ X_NodeAnime_ease = {\r
+ 'quadratic' : function (k) {\r
+ return k * ( 2 - k );\r
+ /*{\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' : function (k) {\r
+ return Math.sqrt( 1 - ( --k * k ) );\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' : function (k) {\r
+ return --k * k * ( 5 * k + 4 ) + 1;\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' : function (k, X) {\r
+ X = 7.5625;\r
+ if ( k < ( 1 / 2.75 ) ) {\r
+ return X * k * k;\r
+ } else\r
+ if ( k < ( 2 / 2.75 ) ) {\r
+ return X * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;\r
+ } else\r
+ if ( k < ( 2.5 / 2.75 ) ) {\r
+ return X * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;\r
+ } else {\r
+ return X * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;\r
+ }\r
+ /*style: '',\r
+ fn: function (k) {\r
+ if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {\r
+ return 7.5625 * k * k;\r
+ } else if ( k < ( 2 / 2.75 ) ) {\r
+ return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;\r
+ } else if ( k < ( 2.5 / 2.75 ) ) {\r
+ return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;\r
+ } else {\r
+ return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;\r
+ }\r
+ }*/\r
+ },\r
+ 'elastic' : function (k) {\r
+ return k === 0 ? 0 : k === 1 ? 1 : ( 0.4 * Math.pow( 2, - 10 * k ) * Math.sin( ( k - 0.055 ) * 28.56 ) + 1 );\r
+ /*style: '',\r
+ fn: function (k) {\r
+ var f = 0.22,\r
+ e = 0.4;\r
+\r
+ if ( k === 0 ) { return 0; }\r
+ if ( k == 1 ) { return 1; }\r
+\r
+ return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 );\r
+ } */\r
+ }\r
+ };\r
OSDN Git Service
