javascript - 动画超出了其设定的目标？

Question

我正在尝试在 native 脚本中为上下文菜单设置动画，以便在第一次点击时，子选项会跳出，然后当第二次点击时，它们会返回。我希望下面的代码是相当不言自明的，如果按钮尚未被单击，则执行动画，如果已单击，则执行相反的操作。

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 像素。您的第二个动画将其获取并将其移动到距基本位置向下 75 像素的位置。

所以看看数学: facebook 基本位置为 100\,100 第一个动画将其设置为 BASE - 75 = 100\,25； 第二个动画将其设置为 BASE + 75 = 100\,175

所以解决办法很简单；将它们全部返回到 X:0 和 Y:0；这是您的起始位置 无偏移量是您的基本位置。

所以每个return的代码块都应该改为:translate: { x: 0, y: 0 },

更新: Element->Animation调用返回一个promise；处理可见性的最好方法是使用 .then(function() { element.style.visibility = 'collapse'; });这样，一旦元素完成其动画，它将被隐藏。

您可以做的另一件事是让动画在动画结束时也具有不透明度= 0；所以当它出来时，它会动画化为不透明度= 1；当它返回时，它的动画效果为不透明度 = 0。有些动画看起来非常好，它在移出时淡入，在返回时淡出。