当用户第一次访问我的应用程序时,我有一个徽标,我想将其从屏幕中心移动到顶部,但随着它的移动,我也希望它缩小到其原始大小的 1/2。是否可以通过 famo.us 做到这一点?
问问题
451 次
3 回答
4
有几种方法可以实现这一点。为了清晰和简单起见,我建议使用 ModifierChain 类。这允许您将影响单个可渲染对象的修改器链接在一起。这是您要实现的目标的示例。
祝你好运!
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var StateModifier = require("famous/modifiers/StateModifier");
var Transform = require("famous/core/Transform");
var ModifierChain = require("famous/modifiers/ModifierChain");
var Easing = require("famous/transitions/Easing");
var context = Engine.createContext();
var surface = new Surface({
size:[200,200],
properties: { backgroundColor: 'green'}
})
surface.chain = new ModifierChain();
surface.state = new StateModifier({ origin:[0.5,0.5] });
surface.sizeState = new StateModifier();
surface.chain.addModifier(surface.sizeState);
surface.chain.addModifier(surface.state);
context.add(surface.chain).add(surface);
surface.on('click', function(){
transition = {duration:1000,curve:Easing.inOutQuad};
surface.sizeState.setTransform(Transform.scale(0.5,0.5,1),transition);
surface.state.setOrigin([0.5,0],transition);
});
于 2014-05-06T03:35:12.533 回答
2
如果一定要找到组合多个Transforms效果的矩阵
finalTransform = Transform.multiply4x4(Transform.scale(scaleX, scaleY, scaleZ),
Transform.translate(translateX, translateY, translateZ));
finalTransform = Transform.multiply4x4(finalTransform,
Transform.rotate(rotateX, rotateY, rotateZ));
这结合了旋转、缩放和平移的效果。您也可以包括偏斜。
于 2014-10-30T12:00:43.683 回答
0
这是我类似于 johntraver 的优雅解决方案
var Engine = famous.core.Engine;
var Modifier = famous.core.Modifier;
var Transform = famous.core.Transform;
var ImageSurface = famous.surfaces.ImageSurface;
// create the main context
var mainContext = Engine.createContext();
// your app here
var logo = new ImageSurface({
size: [200, 200],
content: 'img/famousLogo.svg',
classes: ['double-sided']
});
var initialTime = Date.now();
var centerModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
var spinYModifier = new Modifier({
transform: function () {
return Transform.rotateY(.001 * (Date.now() - initialTime));
}
});
var spinXModifier = new Modifier({
transform: function () {
return Transform.rotateX(.001 * (Date.now() - initialTime));
}
});
mainContext.add(centerModifier).add(spinXModifier).add(spinYModifier).add(logo);
于 2014-12-14T14:21:49.790 回答