Transition.translate Easing vs SpringTransition

Question

I'm currently experimenting a bit with Famo.us and there is actually one thing I can't yet wrap my head around.

In a small example i tried to create a HeaderFooterLayout, where the header contains a simple icon left aligned. A click on it will bounce it to the right end of the header.

Now with a simple Transform.translate this works not as smooth as expected on my Nexus4 and Nexus 7, but hell changing it to a SpringTransition rocks. Here is the code example:

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

So what I don't understand here is why Easing is so "slow" compared to the Physics driven SpringTransition?

What I am suspecting is that Easing is using loop through variable `t` in https://github.com/Famous/transitions/blob/master/Easing.js so that it gets the position during the loop. The `SpringTransition` actually uses `PhysicEngine` https://github.com/Famous/physics/blob/master/PhysicsEngine.js so it may optimize the performance — HP., May 28 '14 at 00:57

score 1 · Accepted Answer · answered Jun 10 '14 at 05:11

The spring transition your requesting has a period of 10ms while the easing transition is 1000ms or 100 times slower. I tried your code "as is" and with a modification that compares more apples to apples and the transitions can run at the same speed (both laptop and devices.) First you should note that the minimum spring period is 150ms so the 10ms your asking for is actually 150. Second you are stacking the transitions so that one follows the other. The easing will take 1 second and then the spring will oscillate. You may want to try something slightly different... set the transitions to the following:

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

This will behave slightly differently. On click (every other click actually) the logo will cross the screen at high speed and then come back. I expect you'll find that these transitions run at comparable high speeds. Of course for a slower more viewable test you can set the spring period to 1000 and the easing duration to the same and again the speeds should be comparable.

Oh my gosh ... thx for the hint with the min duration. Thats what exactly was the difference, didn't realize that having a shorter period would make the Easing so much more fluid. Anyway another thing I realized is that wrapping the Application inside a Phonegap App made it a bit slower because the WebView doesn't compare equally in speed to the Chrome App, although it changed a bit with the recent Android. 4.4.3 update — zewa666, Jun 10 '14 at 10:49

Transition.translate Easing vs SpringTransition

1 Answers1