javascript - Transition.translate缓动与SpringTransition

我目前正在对Famo.us进行一些试验，实际上有一件事我还无法解决。

在一个小示例中，我尝试创建一个HeaderFooterLayout，其中标题包含一个左对齐的简单图标。单击它会使其反弹到标题的右端。

现在使用简单的Transform.translate，它在我的Nexus4和Nexus 7上的运行效果不如预期的那么顺畅，但是将其更改为SpringTransition岩石。这是代码示例：

var Transitionable = require('famous/transitions/Transitionable');
var SpringTransition = require('famous/transitions/SpringTransition');
    Transitionable.registerMethod('spring', SpringTransition);

var logoStateModifier = new StateModifier({});
var logo = new ImageSurface({
            size: [186, 43],
            content: 'images/my-logo.png'
        });
var posX = 0;
var adjustment = 20;

// Click event on image
logo.on('click', function() {
  if(posX === 0) {
    posX = (window.innerWidth - logo.size[0] - adjustment);
  } else {
    posX = 0;
  }

  var spring = {
      method: 'spring',
      period: 10,
      dampingRatio: 0.3,
  };

  // transform translate with Easing
  logoStateModifier.setTransform(
     Transform.translate(posX,0,0),
     { duration: 1000, curve: Easing.inOutBack}
  );
  // spring transition
  logoStateModifier.setTransform(
    Transform.translate(posX, 0, 0), spring
  );
});

因此，我在这里不明白的是，为什么与物理驱动的SpringTransition相比，缓动这么“慢”？

最佳答案

您要求的弹簧过渡时间为10毫秒，而缓动过渡时间为1000毫秒或慢100倍。我按原样尝试了您的代码，并进行了修改，将更多的苹果与其他苹果进行比较，并且转换可以相同的速度运行（笔记本电脑和设备）。首先，您应该注意，最小的弹簧周期是150ms，因此您要询问的时间是10ms实际上是150。第二，您正在堆叠转换，以便一个跟随另一个。缓动需要1秒钟，然后弹簧会振荡。您可能想尝试一些稍有不同的方法...将转换设置为以下内容：

// transform translate with Easing
logoStateModifier.setTransform(
    Transform.translate(posX,0,0),
    { duration: 150, curve: Easing.inOutBack}
);
// spring transition
logoStateModifier.setTransform(
    Transform.translate(0, 0, 0), spring
);

这将略有不同。单击时（实际上每隔两次单击一次），徽标将高速穿过屏幕，然后返回。我希望您会发现这些转换以相当高的速度运行。当然，对于较慢，更可见的测试，您可以将弹簧周期设置为1000，并将缓动时间设置为相同，并且速度也应具有可比性。