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

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

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

Transition.translate Easing vs SpringTransition

1 个答案: