アニメーションはプログラムされた目的地を超えていますか？

Question

ネイティブスクリプトでコンテキストメニューをアニメーション化しようとしています。そのため、最初のタップで子オプションが飛び出し、2回目にクリックすると戻ります。私は、ボタンがクリックされていない場合は、私のコードは、かなり自己説明的であることを願って、それがクリックされている場合は、その後、アニメーションを行い、その後、逆を行います。

exports.fabTap = function (args) { 
    var google = page.getViewById("google"); 
    var facebook = page.getViewById("facebook"); 
    var amazon = page.getViewById("amazon"); 
    if (clicked == false) { 
     google.style.visibility = "visible"; 
     facebook.style.visibility = "visible"; 
     amazon.style.visibility = "visible"; 

     google.animate({ 
       translate: { x: -55, y: -66 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 
     facebook.animate({ 
       translate: { x: 0, y: -75 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 
     amazon.animate({ 
       translate: { x: 55, y: -66 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 
    } else { 
     google.animate({ 
       translate: { x: 55, y: 66 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 
     facebook.animate({ 
       translate: { x: 0, y: 75 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 
     amazon.animate({ 
       translate: { x: -55, y: 66 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 

    } 
    clicked = !clicked; 
} 

ただし、このアニメーションからわかるように、ボタンは元の位置を超えて（下に）表示されます。何が起こっているのか？

アップデート：すべてのアニメーションは、元のベースに対して相対的であることを指摘し

感謝。しかし、私が戻ったすべての翻訳をtranslate: { x: 0, y: 0 }に変更すると、翻訳の前に視界の変化が起こっているように見えますか？どのようにそれを回避するための任意のアイデア？

Answer 1

facebook.animateを見てみましょう。最初のアニメーションはY = Y - 75になります。したがって、それはベースの位置から75ピクセル上に移動します。あなたの2番目のアニメーションはそれをとり、ベースの位置から75ピクセル下に移動します。

だから、数学を見て： ベースのFacebookの場所は100 まずアニメーションがBASEにそれをアニメーション化し、100 \である - 75 = 100 \、25; 2番目のアニメーションではになります。 + 75 = 100 \ 175

解決方法は簡単です。それらをすべてX：0とY：0に戻します。あなたの出発地であるあなたのベースの場所はオフセットではありません。翻訳：だからリターンのコードブロックのそれぞれに変更しなければならない

{X：0、Y：0}、

更新： 、エレメント>アニメーションコールは約束を返します。最も良い方法は、可視性を扱うことです。.then（function（）{element.style.visibility = 'collapse';}）;そのようにして、要素がアニメーションを終了すると、それは隠されます。

もう1つのことは、アニメーションにもアニメーションの最後に不透明度= 0があることです。それが出てくると不透明度= 1にアニメートされます。それが戻ってくると、不透明度= 0にアニメートされます。いくつかのアニメーションは、動き出すにつれてフェードインし、戻っていくにつれてフェードアウトするように見えます。

Answer 2

アニメーションが終了した後に可視性を変更するthenコールバックを使用することができますSOU animate()方法は、実際にPromiseを返します。

google.animate({ ... }).then(function(){ 
    google.style.visibility = "collapse "; 
})