OSDN Git Service

Version 0.6.109, fix X.Node.Anime.js.
authoritozyun <itozyun@user.sourceforge.jp>
Fri, 24 Oct 2014 22:28:40 +0000 (07:28 +0900)
committeritozyun <itozyun@user.sourceforge.jp>
Fri, 24 Oct 2014 22:28:40 +0000 (07:28 +0900)
0.6.x/js/02_dom/10_XNodeAnime.js

index b62a7f3..ceaabc6 100644 (file)
@@ -62,12 +62,17 @@ var X_Node_ANIMATIONS            = [],
        X_Node_Anime_updateTimerID   = 0,\r
        X_Node_Anime_needsDetection  = false,\r
        X_Node_Anime_hasTransform    = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],\r
+       /* Opera mobile で  translateZ(0) が有効だと XY が 0 0 になる */\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
        X_Node_Anime_transitionProps = X_Node_Anime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top';\r
 \r
 Node.prototype.animate = function( start, dest, duration, easing, wait ){\r
-       var obj = this._anime || ( this._anime = {} );\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
        \r
        obj.duration  = X.Type.isFinite( duration ) && 0 <= duration ? duration : 500;\r
        obj.easing    = ease[ easing ] || ease.circular;\r
@@ -77,14 +82,14 @@ Node.prototype.animate = function( start, dest, duration, easing, wait ){
        obj.wait      = X.Type.isFinite( wait ) ? wait : 1000;\r
                \r
        obj.startTime = X_Timer_now();\r
-       obj.startX    = start.x || 0;\r
-       obj.startY    = start.y || 0;\r
-       obj.startA    = 0 <= start.opacity && start.opacity <= 1 ? start.opacity : 1;\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
        \r
        obj.destTime  = obj.startTime + obj.duration;\r
-       obj.destX     = dest.x || 0;\r
-       obj.destY     = dest.y || 0;\r
-       obj.destA     = 0 <= dest.opacity && dest.opacity <= 1 ? dest.opacity : 1;\r
+       obj.destX     = ( dest.x || dest.x === 0 ) ? dest.x : obj.destX || 0;\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
        \r
        if( obj.gpuTimerID ){\r
@@ -102,6 +107,8 @@ Node.prototype.animate = function( start, dest, duration, easing, wait ){
        X_Node_ANIMATIONS.indexOf( this ) === -1 &&\r
                ( X_Node_ANIMATIONS[ X_Node_ANIMATIONS.length ] = this );\r
        \r
+       //console.log( 'animate ' + this._id + ' y:' + obj.startY + ' > ' + obj.destY + ' d:' + obj.duration );\r
+       \r
        return this;\r
 };\r
 \r
@@ -109,7 +116,7 @@ Node.prototype.stop = function(){
        var obj = this._anime;\r
        if( !obj ) return;\r
        if( X_Node_Anime_hasTransition ){\r
-               obj.phase = 99;\r
+               obj.phase = 100;\r
                X_Node_Anime_needsDetection = true;\r
                X_Node_Anime_reserveUpdate();\r
        } else {\r
@@ -133,10 +140,13 @@ function X_Node_Anime_reserveUpdate(){
 function X_Node_Anime_updateAnimations(){\r
        var i = X_Node_ANIMATIONS.length, ret, c = false;\r
        \r
-       if( X_Node_Anime_needsDetection ) X_Node_Anime_detectAnimationlayers();\r
+       //console.log( 'updateAnimations ' + i + ' ' + 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
@@ -155,7 +165,7 @@ function X_Node_Anime_updateAnimations(){
 };\r
 \r
 // TODO X.Timer.requestFrame 経由の BEFORE_UPDATE で更新を行う\r
-function X_Node_Anime_detectAnimationlayers(){\r
+function X_Node_Anime_detectAnimationLayers(){\r
        var i = X_Node_ANIMATIONS.length,\r
                l = i,\r
                j, xnode, parent, hasGPUChild, changed, remove;\r
@@ -163,11 +173,12 @@ function X_Node_Anime_detectAnimationlayers(){
        for( ; i; ){\r
                xnode = X_Node_ANIMATIONS[ --i ];\r
                parent = hasGPUChild = false;\r
-               \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
@@ -204,9 +215,11 @@ function X_Node_Anime_detectAnimationlayers(){
                                // 新規\r
                                changed = changed || !xnode._anime.gpuParent;\r
                                xnode._anime.phase = hasGPUChild ? 7 : 8;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。\r
-                       } else {\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
@@ -239,7 +252,7 @@ function X_Node_Anime_updateAnimation( xnode ){
                \r
                case 2 :\r
                        // アニメーション中\r
-                       break;\r
+                       return false;\r
                \r
                case 3 : // アニメーションの解除\r
                        X_Node_Anime_updateTransition( xnode, 0 );\r
@@ -294,7 +307,8 @@ function X_Node_Anime_updateAnimation( xnode ){
                        obj.gpuTimerID && X.Timer.remove( obj.gpuTimerID );\r
                        return true;\r
                \r
-               case 99 : // stop() : アニメーションの中断して削除\r
+               case 100 : // stop() : アニメーションの中断して削除\r
+                       console.log( 'stop() gpu:' + obj.gpuParent );\r
                        current = X_Node_Anime_getComputedPosition( xnode );\r
                                                \r
                        X_Node_Anime_updateTransition( xnode, 0 );\r
@@ -322,10 +336,11 @@ function X_Node_Anime_getComputedPosition( that ) {
 };\r
 \r
 function X_Node_Anime_onTransitionEnd(){\r
+       if( this._anime.phase !== 2 ) return X.Callback.PREVENT_DEFAULT;\r
        this._anime.phase = 3;\r
        X_Node_Anime_needsDetection = true;\r
        X_Node_Anime_reserveUpdate();\r
-\r
+       console.log( 'トランジション終了' );\r
        return X.Callback.UN_LISTEN | X.Callback.PREVENT_DEFAULT;\r
 };\r
 \r
@@ -396,7 +411,9 @@ function X_Node_Anime_updateAnimationsNoTransition(){
                        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
-                       \r
+                       obj.x = newX;\r
+                       obj.y = newY;\r
+                       obj.a = newA;\r
                        c = true;       \r
                };\r
        };\r