Javascript 与其他变换函数异步设置不透明度动画

我需要对曲面进行

opacity

，以便从

0

转换为

1

，如下所示：

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

但是

Transform.opacity

不存在。我知道这是基本的，但如何使用其他属性（如

translate

或

rotate

）变换不透明度

我知道

modifier

具有

setOpacity

根据

更新

---

我认为

stateModifier.setOpacity

是异步的，可以与其他动画（如translate或scale）并行设置动画，但它不是异步的。它首先发生，然后移动到下一个动画。这就是我问这个问题的原因。

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

---

我创建了一个github repo，其中有一个示例，演示了如何只使用一个修饰符。 但是我在这里把代码作为一个例子。 在本例中，动画是在单击曲面时触发的，但可以按任何方式触发。这里还有一把小提琴

我使用了Tranform.rotateX，但您可以使用任何旋转变换。请注意，我为起始值设置了默认值。这种方法的好处是只使用一个修饰符，而不需要修饰符

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

---

我无法让你的榜样发挥作用。另外，这不仅仅是褪色（我知道怎么做）。我在寻找褪色和其他变换组合我已经修改了我的答案，它能回答你的问题吗？

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