Animate Opacity与其他Transform函数的异步 [英] Animate Opacity async with other Transform functions

问题描述

我需要让表面的 opacity 从 0 转换到 1 这样：

I need to make opacity of a surface to transform from 0 to 1 like this:

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

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

But Transform.opacity doesn't exist. I know this is basic but how to transform opacity with other properties like translate or rotate.

我知道修饰符有 setOpacity 根据 http://famo.us/guides/animations

UPDATE

我认为 stateModifier.setOpacity 是异步的，可以与其他人平行地动画，如translate或规模，但它不是异步。它发生的第一个THEN移动到下一个动画。

I thought stateModifier.setOpacity is async that can be animated in parallel with others such as translate or scale but it is NOT async. It happens first THEN moves to the next animation. That's why I asked this question.

推荐答案

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

After you updated your question I think that I better understand what you are looking for. Below is code to change the opacity, size and origin all at the same time. Hopefully is is a better answer than I had previously supplied you. Of course you can view this is a working 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);
});

这篇关于Animate Opacity与其他Transform函数的异步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！