Анимация выходит за пределы их запрограммированного назначения?

Question

Я пытаюсь анимировать контекстное меню в собственном скрипте, так что при первом нажатии дочерние параметры выпрыгивают, а затем, когда вы нажимаете второй раз, они возвращаются. Надеюсь, мой код ниже достаточно понятен, если кнопка не была нажата, а затем сделать анимацию, если она была нажата, а затем сделать наоборот.

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; 
} 

Однако, как вы можете видеть из этой анимации, кнопки, похоже, выходят за пределы (ниже) их исходного положения. Любые идеи, почему это происходит?

Update:

Спасибо за указание на то, что все анимации относительно исходной базы. Однако, если я изменю все мои возвратные переводы на translate: { x: 0, y: 0 }, то видимость меняется, кажется, до перевода? Любая идея, как обойти это?

Answer 1

Давайте посмотрим на facebook.animate; ваша первая анимация делает Y = Y - 75; Таким образом, он перемещается вверх от базы на расстоянии 75 пикселей вверх. Ваша вторая анимация берет его и перемещает на 75 пикселей вниз от базы .

Так смотрит на математику: Base facebook Место это 100 \, 100 Первая анимация оживляет его БАЗА - 75 = 100 \ 25; Вторая анимация оживляет ее до BASE + 75 = 100 \, 175

Итак, решение прост; верните их все в X: 0 и Y: 0; который является вашим исходным местоположением. Никакое смещение не является вашим базовым местоположением.

Таким образом, каждый из кодовых блоков для возврата должен быть изменен на: перевод: {х: 0, у: 0},

Обновление: element-> Animation вызовы возвращают обещание; Лучшим способом борьбы с видимостью является использование .then (function() {element.style.visibility = 'collapse';}); так что, как только элемент завершит свою анимацию, он будет скрыт.

Другая вещь, которую вы могли бы сделать, - это иметь анимацию с непрозрачностью = 0 в конце анимации; так как он выходит, он оживляет opacity = 1; и по мере того, как он возвращает, он оживляет opacity = 0. Некоторые анимации выглядят действительно красиво, когда он исчезает, когда он выходит и исчезает, когда он возвращается.

Answer 2

Метод animate() фактически возвращает Promise ИМИ вы можете использовать then обратный вызов, чтобы изменить видимость после того, как анимация закончена:

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