与其他变换函数异步制作不透明度动画
Animate Opacity async with other Transform functions
我需要像这样opacity
一个表面来从0
转换为1
:
stateModifier.setTransform(
Transform.multiply(Transform.opacity(1), Transform.rotateX(0)),
{ duration : 500, curve: Easing.inOutSine }
);
但Transform.opacity
并不存在。我知道这是基本的,但是如何使用其他属性(如translate
或rotate
(转换不透明度。
我知道modifier
根据 http://famo.us/guides/animations setOpacity
更新
我认为stateModifier.setOpacity
是异步的,可以与其他动画(例如翻译或缩放(并行动画,但它不是异步的。它首先发生,然后移动到下一个动画。这就是我问这个问题的原因。
在您更新问题后,我认为我更好地理解了您在寻找的内容。下面是同时更改不透明度、大小和原点的代码。希望是一个比我以前提供给你的更好的答案。当然,您可以在此处查看这是一个工作小提琴
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);
});
我创建了一个 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});
});
相关文章:
- Greenstock不透明度动画从0到1再返回
- 设置1400个Raphael.js对象的不透明度动画会影响动画性能
- 悬停不起作用时对不透明度更改进行动画处理
- jQuery淡入淡出/动画不透明度到不同的显示类型,然后阻止
- 在Raphael JS中,不透明度:0和开始动画到不透明度:1之间的延迟
- jQuery动画仅在动画期间更改不透明度
- JQuery 悬停函数不透明度动画
- 与其他变换函数异步制作不透明度动画
- AngularJS中的CSS不透明度动画
- 在导航栏上切换不透明度动画
- Jquery/Javascript不透明度动画滚动
- 延迟关键帧每定义的时间,并保持不透明度0动画后
- 输入字段值不透明度动画
- 不透明度动画应该很容易?(javascript)
- 如何停止多个不透明度动画队列?(jQuery)
- 如何重置a帧光标的不透明度动画
- Ng展示摆动DOM不透明度动画
- Jquery传输不透明度动画冲突
- CSS z-index在不透明度动画期间改变
- 为什么图像不透明度动画在Firefox和Chrome中运行顺畅,但在Safari中却不行