Animate Непрозрачность асинхронной с другими Transform функциями

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

UPDATE

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

Answer 1

После того как вы обновили свой вопрос, я думаю, что лучше понять, что вы ищете. Ниже приведен код для изменения непрозрачности, размера и происхождения в одно и то же время. Надеюсь, это лучший ответ, чем я раньше предоставлял вам. Конечно, вы можете просмотреть это рабочая скрипку 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); 
}); 

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