为什么我们需要 transitionableTransform class in famo.us?

Why do we need transitionableTransform class in famo.us?

为什么我们需要 transitionableTransform class in famo.us 如果我们可以简单地在状态修饰符中设置转换和转换:

var mainContext = Engine.createContext();

var surface = new Surface({
    size:[100,100],
    content: 'Click Me'
});

var modifier = new StateModifier({
    align: [.5, .5],
    origin: [.5, .5],
    transform: Transform.translate(0,-240,0)
});

surface.on("click", function(){
    modifier.setTransform(Transform.translate(0,0,0), {curve: 'easeIn', duration: 700});
});

mainContext.add(modifier).add(surface);

同样的问题是关于 transitionable state maintainer。什么时候以及为什么我应该使用它而不是像代码中那样直接设置状态修改器的变换和转换?

将其作为选项传递只是一种初始化修饰符变换状态的方法。正如 Antonio 所指出的,setTransform 现在 已弃用

下面和你的代码一样: Here is the example using TansitionableTransform

  var mainContext = Engine.createContext();

  var surface = new Surface({
    size:[100,100],
    content: 'Click Me',
    properties: {
      backgroundColor: 'lightgrey'
    }
  });

  var transTransform = new TransitionableTransform();
  transTransform.set(Transform.translate(0,-240,0));

  var modifier = new Modifier({
    align: [0.5, 0.5],
    origin: [0.5, 0.5],
    transform: transTransform
  });

  surface.on("click", function(){
    transTransform.setTranslate(Transform.translate(0,0,0), {curve: 'easeIn', duration: 700});
  });

  mainContext.add(modifier).add(surface);

根据 Famo.us 文档,modifier.setTransform(在 talves 示例中使用)已弃用

来自https://famo.us/docs/api/latest/core/Modifier "Deprecated: Prefer transformFrom with static Transform, or use a TransitionableTransform."

--

但是,推荐的使用 TransitionableTransform 的方式与您所拥有的不同。您应该在修改器的实例化中存储对 transitionableTransform 实例的引用。

你得到的一个好处是你在处理它的转换时不必引用修改器。您只需直接在转换上调用方法。

参考此处示例:https://gist.github.com/LearnFamous/ae8d1c8f7af7a702d544