OSDN Git Service

Version 0.6.200, fix X.Node.Anime.
[pettanr/clientJs.git] / 0.6.x / js / 02_dom / 10_XNodeAnime.js
index 6ba1bc2..cbf6a33 100644 (file)
@@ -41,9 +41,7 @@ var X_NODE_ANIME_RESET = 1,
  */\r
 function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){\r
        var list  = X_NodeAnime_QUEUE,\r
-               obj   = this[ '_anime' ],\r
-               isNew = !obj,\r
-               now, stop;\r
+               obj   = this[ '_anime' ];\r
        \r
        if( !( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ){\r
                alert( '@animate 要素はツリーに追加されていません!' );\r
@@ -51,10 +49,9 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
                return this;\r
        };\r
        \r
-       if( isNew ){\r
+       if( !obj ){\r
                this[ '_anime' ] = obj = {\r
                                x : 0, y : 0, a : 1,\r
-                               destX : 0, destY : 0, destA : 1,\r
                                duration : 0\r
                                //phase, lazyRelease, easing, follower, releaseNow\r
                        };\r
@@ -62,30 +59,27 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
        \r
        if( 0 <= duration && X_Type_isFinite( duration ) ){\r
                obj.duration  = duration;\r
-               stop = !duration;\r
        };\r
 \r
-       if( obj.phase !== 7 ){\r
-               // アニメーション中は easing の変更ができない\r
-               obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];\r
-       };\r
+       obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];\r
+               \r
 // form :\r
        obj.startX = obj.x = X_NodeAnime_getFinite( start[ 'x' ],       obj.x );\r
        obj.startY = obj.y = X_NodeAnime_getFinite( start[ 'y' ],       obj.y );\r
        obj.startA = obj.a = X_NodeAnime_getFinite( start[ 'opacity' ], obj.a );\r
 \r
  // to :\r
-       obj.destX     = X_NodeAnime_getFinite( dest[ 'x' ],       obj.destX );\r
-       obj.destY     = X_NodeAnime_getFinite( dest[ 'y' ],       obj.destY );\r
-       obj.destA     = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.destA );\r
+       obj.destX  = X_NodeAnime_getFinite( dest[ 'x' ],       obj.x );\r
+       obj.destY  = X_NodeAnime_getFinite( dest[ 'y' ],       obj.y );\r
+       obj.destA  = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.a );\r
 \r
        obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0;\r
+       obj.inited = false;\r
 \r
-       if( stop && 6 <= obj.phase ){\r
+       if( !obj.duration && 6 <= obj.phase ){\r
                this[ 'stop' ](); // 現在値で停止\r
-       } else\r
-       if( !stop || obj.lazyRelease ){\r
-               if( isNew || !obj.phase ){\r
+       } else {\r
+               if( !obj.phase ){\r
                        list[ list.length ] = this;\r
                        obj.phase = 1;\r
                        obj.uid   = ++X_NodeAnime_uid;\r
@@ -97,14 +91,14 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
                        obj.uid   = ++X_NodeAnime_uid;\r
                        X_NodeAnime_needsDetection = true;\r
                } else\r
-               if( !stop ){\r
+               if( obj.duration ){\r
                        // リストの先頭にいるため検査不要でアニメーション開始可能 4, 5, 6, 7\r
                        obj.phase = 6;\r
                } else\r
-               // obj.lazyRelease はあり\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
+                       obj.phase      = 4; // 強制停止(GPU転送予約)または値のみ更新\r
+                       obj.releaseNow = false; // TODO folower がるため GPU 転送できないケースあり\r
                        X_NodeAnime_needsDetection = true;\r
                };\r
                \r
@@ -120,11 +114,6 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
                                X_NodeAnime_updateTimerID = X_Timer_requestFrame( X_NodeAnime_updateAnimations );\r
                        };\r
                };      \r
-       } else {\r
-               if( obj.phase ){\r
-                       this[ 'stop' ](); // リストから外す\r
-               };\r
-               console.log( 'リストに加えない!' );\r
        };\r
 \r
        return this;\r
@@ -167,6 +156,8 @@ function X_Node_stop( option ){
                                obj.startA = obj.destA = obj.a = 1;\r
                        }; // TODO 終了値で停止も,,,\r
                        \r
+                       // obj.canceled = true;\r
+                       \r
                        if( rm ) break; // 1,2,3,6 の場合ここまで\r
                \r
                        obj.destX = obj.x;\r
@@ -188,12 +179,34 @@ function X_Node_stop( option ){
 \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
+       X_NodeAnime_needsDetection = true;\r
+       list.splice( list.indexOf( xnode ), 1 );\r
+       obj.phase = 0;\r
+\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.x, obj.y, obj.a, false );\r
+               skipUpdate || ( xnode[ '_rawObject' ].style.cssText = X_Node_CSS_objToCssText( xnode ) );\r
+               xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;\r
+       };\r
+};\r
 \r
 /*\r
  * 1. 新規アニメーションが現在アニメーション中の要素の親か子であればアニメーションを待機\r
- * 2. \r
  */\r
-function X_NodeAnime_detectWaitAnimation( xnode, duration, isText ){\r
+function X_NodeAnime_detectWaitAnimation( xnode, duration, isTest ){\r
        var list = X_NodeAnime_QUEUE,\r
                i    = 0, _xnode;\r
        \r
@@ -203,7 +216,7 @@ function X_NodeAnime_detectWaitAnimation( xnode, duration, isText ){
                // アニメーションの優先度はリストにいる順\r
                // まず先行する後続待機要素の中に、親子関係のものがいないか?探す\r
                if( _xnode[ '_anime' ].phase <= 3 ){\r
-                       if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){\r
+                       if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){ // 祖先か?見た方が早そう\r
                                // -> いる、このような要素が複数いる場合、誰に後続すればいいか?判然としないため、準待機フラグを立てる\r
                                return 2;\r
                        };\r
@@ -218,7 +231,7 @@ function X_NodeAnime_detectWaitAnimation( xnode, duration, isText ){
 \r
                if( 6 <= _xnode[ '_anime' ].phase ){\r
                        if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){\r
-                               return isText ? 3 : _xnode;\r
+                               return isTest ? 3 : _xnode;\r
                        };\r
                };\r
        };\r
@@ -228,17 +241,16 @@ function X_NodeAnime_detectWaitAnimation( xnode, duration, isText ){
 \r
 function X_NodeAnime_updateAnimations( e ){\r
        var list = X_NodeAnime_QUEUE,\r
-               i    = list.length,\r
                now  = X_Timer_now(),\r
-               c = false,\r
+               c    = false,\r
                i, xnode, obj, _xnode,\r
-               rm, easing, follower, lazy;\r
+               rm, easing, lazy;\r
        \r
        if( X_NodeAnime_needsDetection ){\r
                X_NodeAnime_needsDetection = false;\r
                \r
                //\r
-               list.sort( X_NodeAnime_sortAnimationNode );             \r
+               list.sort( X_NodeAnime_sortAnimationNode );\r
                \r
                for( i = 0; xnode = list[ i ]; ++i ){\r
                        obj = xnode[ '_anime' ];\r
@@ -254,7 +266,7 @@ function X_NodeAnime_updateAnimations( e ){
                };\r
        };\r
        \r
-       for( ; i; ){\r
+       for( i = list.length; i; ){\r
                rm    = false;\r
                xnode = list[ --i ];\r
                obj   = xnode[ '_anime' ];\r
@@ -271,11 +283,17 @@ function X_NodeAnime_updateAnimations( e ){
                                        break;\r
                                };\r
                                // アニメーション終了\r
+                               xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_END );\r
+                               \r
                        case 4 : // 強制停止(GPU転送予約)\r
                                lazy = !obj.follower && !obj.releaseNow && obj.lazyRelease;\r
                                X_NodeAnime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, !!lazy );\r
 \r
-                               xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_END );\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
@@ -292,10 +310,11 @@ function X_NodeAnime_updateAnimations( e ){
                                obj.startTime = now;\r
                                obj.destTime  = now + obj.duration;\r
                                obj.phase     = 7; // アニメーション中\r
-                               obj.progress  = 0;\r
-                               X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, true );\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.startX, obj.startY, obj.startA, true );\r
                                break;\r
                        \r
                        case 5 : // GPU解除待ち\r
@@ -305,7 +324,13 @@ function X_NodeAnime_updateAnimations( e ){
                                } else {\r
                                        c = true;\r
                                };\r
-                               break;  \r
+                               break;\r
+                       \r
+                       default : // 2 or 3\r
+                               // 待機状態でも親要素が GPU 化していなければ、開始値をセットすることは可能\r
+                               obj.inited || X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, false );\r
+                               obj.inited = false;\r
+                               break;\r
                };\r
                \r
                obj.releaseNow = false;\r