javascript - Transition.translate Easing 与 SpringTransition

Question

我目前正在对 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
  );          
});

所以我在这里不明白的是为什么 Easing 与物理驱动的 SpringTransition 相比如此“慢”？

Answer 1

您请求的 Spring 过渡周期为 10 毫秒，而缓动过渡则为 1000 毫秒或慢 100 倍。我“按原样”尝试了您的代码，并进行了修改，将更多的苹果与苹果进行比较，并且转换可以以相同的速度运行(笔记本电脑和设备)。首先您应该注意，最小 Spring 周期是 150 毫秒，因此您要求的 10 毫秒for 实际上是 150。 其次，您要堆叠转换，以便一个跟随另一个。松开将需要 1 秒，然后 Spring 将振荡。您可能想尝试稍微不同的东西...将过渡设置为以下内容:

// 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
);

这会表现得略有不同。单击时(实际上是每隔一次单击)， Logo 将以高速穿过屏幕，然后返回。我希望您会发现这些转换以相当高的速度运行。当然，对于更慢、更可见的测试，您可以将 Spring 周期设置为 1000，并将缓动持续时间设置为相同，并且速度应该具有可比性。