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;所以它从 base 位置向上移动75像素。您的第二个动画将其移动并从基础位置向下移动75个像素。

所以看看数学：基地facebook位置是100 \，100 第一个动画将其动画为 BASE - 75 = 100 \，25; 第二个动画将其动画为 BASE + 75 = 100 \，175

所以解决方案很简单;将它们全部返回到X：0和Y：0;这是您的起始位置没有偏移是您的基本位置。

因此返回的每个代码块都应更改为：translate：{x：0，y：0}，

<强>更新元素 - ＆gt;动画调用返回一个promise;处理可见性的最好方法是使用.then（function（）{element.style.visibility =＆＃39; collapse＆＃39 ;;}）;这样，一旦元素完成动画，它就会被隐藏。

你可以做的另一件事是让动画在动画结束时也有不透明度= 0;因此，它出现了opacity = 1;并且当它返回它时，动画变为opacity = 0.有些动画看起来非常好，它会在它移出时淡入并在它返回时淡出。

超出其编程目的地的动画？

1 个答案: