我创建了一个 github 存储库,其中包含一个示例,说明如何仅使用一个修改器来完成它。
https://github.com/thiswildorchid/ Famous-modifier-reuse但我在这里包含代码作为示例。在此示例中,动画是在单击表面时触发的,但您可以以任何您喜欢的方式触发它。这里还有一个小提琴http://jsfiddle.net/orchid1/jd2q7r0v/1/
我使用了 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});
});