在撰写本文时，我很惊讶您的问题为 -2，因为我认为这是一个非常有效的问题。 famo.us 网站上的幻灯片项目和 Timbre 项目是好的开始。尽管他们的网站有时对我来说仍然很不稳定，但有时无法正确呈现，但滚动部分会被最小化到足以一次读取一两行的大小。因此，您可能无法查看这些内容。有一段时间我也做不到。
John Traver，顺便说一下，如果你在这里寻求帮助，他会很有帮助，他有一个帖子 https://medium.com/@john_traver/prodigy-technology-ab94cf0bba7f，在他的项目中使用了 famo.us 之后，他给出了一些启示。关于“仅在需要使用 Famo.us 的地方使用 Famo.us”的部分让生活更轻松。
不过，他的帖子不会回答你所有的问题。从我前面提到的两个项目（位于 famo.us 网站）中，最重要的一点就是如何使用视图。对我来说，我的大部分页面都是视图，如果它们具有相似的结构，我可以通过一些自定义选项使它们适用于多个页面。然后我的主页有我调用的函数来显示视图。
var makeSnapRenderController = function(widthIn, widthOut, heightIn, heightOut, durationIn, durationOut) {
if (!durationIn) {
durationIn = 300;
}
if (!durationOut) {
durationOut = 300;
}
var renderer = new RenderController({
inTransition: {curve: Easing.inOutQuart, duration: durationIn},
outTransition: {curve: Easing.inOutQuart, duration: durationOut},
overlap: true,
});
renderer.inTransformFrom(function(progress) {
return Transform.translate(widthIn * (1.0 - progress), heightIn * (1.0 - progress), 1); // 10
});
renderer.outTransformFrom(function(progress) {
return Transform.translate(widthOut * progress - widthOut, heightOut * progress - heightOut, 1-progress); // -10
});
// No opacity change
renderer.inOpacityFrom(function(progress) { return 1.5 * progress; });
renderer.outOpacityFrom(function(progress) { return 1.5 * progress; });
return renderer;
};
我用它来创建我的渲染控制器。它让我可以为每个视图添加我想要的动画样式。这不是全部，但它是一个快速的工具。然后在创建 renderController 之后，我有多个调用不同视图的函数。以下是我当前项目的滑出菜单，除了登录屏幕外，它随处可见。它在登录通过身份验证后被调用。
var showMenu = function() {
var SlideOutMenuView = require('Views/SlideOutMenuView');
var slideOutMenuView = new SlideOutMenuView();
menuRenderer.show(slideOutMenuView);
slideOutMenuView.on('usage', function(){
console.log('usage was clicked');
showStatisticsPage();
slideOutMenuView.close();
});
slideOutMenuView.on('profiles', function(){
console.log('profiles was clicked');
showProfilesPage();
slideOutMenuView.close();
});
slideOutMenuView.on('component', function(){
console.log('component was clicked');
showComponentDataPage();
slideOutMenuView.close();
});
};
要更改页面，菜单具有按钮以及在单击输出时发出发射事件的表面：slideMenu._eventOutput.emit('usage');如您所见，我在函数中观察它并调用另一个函数来显示该页面。
这给出了一般结构的概念，或者至少我希望如此。如果不问，我可以展示更多示例。对于尺码，我会这样做：
var remove = new Surface({
size: [_width * 0.24, _height * 0.049],
content: 'Remove',
properties: {
fontSize: Math.round(_height * 0.03) + 'px',
},
classes:['remove','btn'],
});
this.mainNode.add(new StateModifier({
transform: Transform.translate(_width * 0.74, _height * 0.144, 2)
})).add(remove);
_width 和 _height 是 window.innerWidth 和 window.innerHeight。你必须小心它并不总是有效，但在我现在正在进行的 android 项目上，以及我测试过的手机，以及我的最后一个 iphone 项目，它运行良好。我只是设置屏幕大小的百分比。只要它保持单元格大小，它就是一个很好的解决方案。对于需要多种设备类型的项目，我使用内容和类或其他任何不影响大小和布局的东西来创建表面。然后有几个函数保存 .add、transform、set size 函数，每个函数用于不同的目标设备检查它使用的比率或类型，然后调用适当的函数。
我不知道我是否已经回答了你的问题，但希望你过得更好。 Famo.us 是一个了不起的工具，我真的认为它会改变我们做事的方式。它还没有，但我不认为这不是一个理由让膝盖深陷其中并获得乐趣和一点头发拉扯的挫败感。
另外，这不一定是最好的方式，它只是我正在做的方式。这些板上的人比我聪明得多，所以如果有更好的方法，请不要给他负面的问题并解释一下。
编辑：
我工作的公司有我和另外两个开发人员使用 famo.us 开发应用程序/网站，并开始编写一些代码 sn-ps 来解决我们遇到的一些问题：https://github.com/vizidrix/famous。