可以halt（）在最終狀態停止動畫嗎？

Question

我想暫停（）我的翻譯動畫，並立即結束它的最終位置。 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'); 
}); 

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

Answer 2

我發現了一個黑客，至少在0.2.0之前。

您可以使用Translate.set（）使用非常大的數來設置最終狀態，以強制動畫的最後狀態。

這將是很高興看到支持這個不知何故與Famo.us

的未來版本中停止（）

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