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

Итак, что я не понимаю, так это то, почему Easing настолько «медленный» по сравнению с SpringTransition, управляемым физикой?


javascript famo.us
person zewa666    schedule 25.05.2014    source источник
comment
Я подозреваю, что Easing использует циклическую переменную t в github.com/ Famous/transitions/blob/master/Easing.js, чтобы он получал позицию во время цикла. SpringTransition на самом деле использует PhysicEngine github.com/Famous/physics/blob/master/PhysicsEngine .js, чтобы оптимизировать производительность   -  person HP.    schedule 28.05.2014

Ответы (1)


arrow_upward
1
arrow_downward

Весенний переход, который вы запрашиваете, имеет период 10 мс, а плавный переход — 1000 мс или в 100 раз медленнее. Я попробовал ваш код «как есть» и с модификацией, которая сравнивает больше яблок с яблоками, и переходы могут выполняться с одинаковой скоростью (как для ноутбука, так и для устройств). 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 и продолжительность смягчения на то же самое, и снова скорости должны быть сопоставимы.

person rich    schedule 10.06.2014
comment
Боже мой ... спасибо за подсказку с минимальной продолжительностью. Вот в чем именно была разница, не понимал, что более короткий период сделает смягчение намного более плавным. Во всяком случае, еще одна вещь, которую я понял, заключается в том, что обертывание приложения внутри приложения Phonegap сделало его немного медленнее, потому что WebView не сравнивается по скорости с приложением Chrome, хотя оно немного изменилось с недавним Android. 4.4.3 обновление - person zewa666; 10.06.2014