javascript - Animate Opacity 与其他 Transform 函数异步

Question

我需要使表面的不透明度从0转换为1，如下所示:

stateModifier.setTransform(
  Transform.multiply(Transform.opacity(1), Transform.rotateX(0)), 
  { duration : 500, curve: Easing.inOutSine }
);

但是 Transform.opacity 不存在。我知道这是基本的，但如何使用其他属性(如 translate 或 rotate)转换不透明度。

我知道 modifier 根据 http://famo.us/guides/animations 有 setOpacity

更新

我认为 stateModifier.setOpacity 是异步的，可以与其他动画(例如平移或缩放)并行设置动画，但它不是异步的。它首先发生然后移动到下一个动画。这就是我问这个问题的原因。

Answer 1

在您更新问题后，我想我能更好地理解您在寻找什么。下面是同时更改不透明度、大小和原点的代码。希望这是比我之前提供给您的更好的答案。当然你可以查看这是一个工作 fiddle here

var chainSurface = new Surface({
  size:[200,200],
  properties: { backgroundColor: 'green'}
})

chainSurface.chain = new ModifierChain();

chainSurface.state = new StateModifier({ origin:[0.5,0.5] });
chainSurface.sizeState = new StateModifier();
chainSurface.fadeState = new StateModifier();

chainSurface.chain.addModifier(chainSurface.fadeState);
chainSurface.chain.addModifier(chainSurface.sizeState);
chainSurface.chain.addModifier(chainSurface.state);

mainContext.add(chainSurface.chain).add(chainSurface);

chainSurface.on('click', function(){
  transition = {duration:1000,curve:Easing.inOutQuad};

  chainSurface.fadeState.setOpacity(0,transition);
  chainSurface.sizeState.setTransform(Transform.scale(0.5,0.5,1),transition);
  chainSurface.state.setOrigin([0.5,0],transition);
});