0

翻訳アニメーションを Halt() して、最終的な位置に即座に配置したい。halt() は現在、アニメーションを現在の位置で停止します。

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');

var mainContext = Engine.createContext();

var surface = new Surface({
  size: [100, 100],
  content: 'click me to halt',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

var stateModifier = new StateModifier({
  origin: [0.5, 0]
});

mainContext.add(stateModifier).add(surface);

stateModifier.setTransform(
  Transform.translate(0, 300, 0),
  { duration : 8000, curve: 'linear' }
);

surface.on('click', function() {
  stateModifier.halt();
  surface.setContent('halted');
});
4

2 に答える 2

1

あなたのソリューションは非常にハックに見えます..遷移なしで同じ変換を適用してみませんか..

surface.on('click', function() {
    stateModifier.halt();
    stateModifier.setTransform(Transform.translate(0, 300, 0));
    surface.setContent('halted');
});

編集：

さらに良いことに、最終的な変換を直接取得できます..

surface.on('click', function() {
  stateModifier.setTransform(stateModifier.getFinalTransform());
  surface.setContent('halted');
});
于 2014-05-13T17:33:06.850 に答える
0

少なくとも 0.2.0 より前のバージョンでは、これに対するハックを発見しました。

Translate.set() を使用して非常に大きな数を使用して最終状態を設定し、アニメーションの最終状態を強制することができます。

Famo.us の将来のバージョンで、halt() を使用して何らかの方法でこれがサポートされるとよいでしょう。

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');

var mainContext = Engine.createContext();

var surface = new Surface({
  size: [100, 100],
  content: 'click me to halt',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

var stateModifier = new StateModifier({
  origin: [0.5, 0]
});

mainContext.add(stateModifier).add(surface);

stateModifier.setTransform(
  Transform.translate(0, 300, 0),
  { duration : 8000, curve: 'linear' }
);

surface.on('click', function() {
  // This forces the translate animation to its end state
  var translate = stateModifier._transformState.translate;
  translate.set(translate.get(Number.MAX_VALUE));
  surface.setContent('halted');
});
于 2014-05-13T17:12:35.173 に答える