0

我目前正在对 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 相比，为什么 Easing 如此“慢”？

4

1 回答 1

1

您请求的弹簧过渡的周期为 10 毫秒，而缓动过渡的周期为 1000 毫秒或慢 100 倍。我“按原样”尝试了您的代码，并进行了修改，将更多的苹果与苹果进行了比较，并且转换可以以相同的速度运行（笔记本电脑和设备）。首先，您应该注意最小的弹簧周期是 150 毫秒，所以您要求的 10 毫秒for 实际上是 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
);

这会稍有不同。单击时（实际上是每一次单击），徽标将高速穿过屏幕，然后返回。我希望您会发现这些转换以相当高的速度运行。当然，对于较慢且更易于查看的测试，您可以将 spring 周期设置为 1000，将缓动持续时间设置为相同，并且速度应该是可比的。

于 2014-06-10T05:11:55.287 回答