Асинхронность Animate Opacity с другими функциями преобразования

Question

Мне нужно сделать opacity поверхности для преобразования из 0 в 1 как это:

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

Но Transform.opacity не существует Я знаю, что это основной, но как преобразовать непрозрачность с другими свойствами, такими как translate или же rotate,

я знаю modifier имеет setOpacity в соответствии с http://famo.us/guides/animations

ОБНОВИТЬ

я думал stateModifier.setOpacity это асинхронный, который может быть анимирован параллельно с другими, такими как перевод или масштабирование, но это не асинхронный. Это происходит сначала, ТО затем переходит к следующей анимации. Вот почему я задал этот вопрос.

Answer 1

После того, как вы обновили свой вопрос, я думаю, что я лучше понимаю, что вы ищете. Ниже приведен код для одновременного изменения непрозрачности, размера и источника. Надеюсь, это лучший ответ, чем я предоставил вам ранее. Конечно, вы можете посмотреть, что это рабочая скрипка здесь

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

Answer 2

Я создал репозиторий Github с примером того, как сделать это только с одним модификатором. https://github.com/thiswildorchid/famous-modifier-reuse но я привожу здесь код в качестве примера. В этом примере анимация запускается по щелчку поверхности, но вы можете запустить ее любым удобным для вас способом. Также здесь есть скрипка для этого http://jsfiddle.net/orchid1/jd2q7r0v/1/

Я использовал Tranform.rotateX, но вы можете использовать любое преобразование вращения. Обратите внимание, что я установил значения по умолчанию для начальных значений. Преимущество этого подхода заключается в том, что вы используете только один Модификатор и вам не нужен ModifierChain.

    var Engine = require("famous/core/Engine"),
    Modifier = require("famous/core/Modifier"),
    Surface = require("famous/core/Surface"),
    Transitionable = require("famous/transitions/Transitionable"),
    Transform = require("famous/core/Transform");

var context, mod, surf, opacityTransform, rotateTransform;

context = Engine.createContext();

context.setPerspective(1000);

//the opacities starting value is 1
opacityTransform = new Transitionable(1);

//the starting rotation is an angle of zero
//you can console log Transform.identity to see the value but its basically an angle of 0
rotateTransform = new Transitionable(Transform.identity);


//very basic modifier here
mod = new Modifier({
    size: [100, 100],
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
});

//very simple surface
surf = new Surface({
    content: "Hello World",
    properties: {
        border: "1px red solid",
        textAlign: "center",
        lineHeight: "100px"
    }
});

//gotta add everything to the context
context.add(mod).add(surf);

//here I tell the modifier to transform using my custom transitionables transforms
mod.transformFrom(rotateTransform);
mod.opacityFrom(opacityTransform);


//for illustration purposes I used a click event but trigger it any way you like 
surf.on("click", function () {

    //you can add an easing function here if you would like and even a callback as the 3rd argument
    //more importantly here you see I set the opacity to 0 and the rotation to the new angle I want
    opacityTransform.set(0, {duration: 1000});
    rotateTransform.set(Transform.rotateX(1.4), {duration: 1000});
});