Question

我可以使用＆＃34;这里的部分，现在去制作一些东西＆＃34;方式Famo.us已经展示了自己，但对于我如何设置我的项目，结构，模块等方面提供一些指导会很好。

为什么没有实际网页的演示，而不是单屏iPhone视图（甚至可能是像Famo.us大学那样）？

是否可以在一般大小的DOM元素（如Web组件）中使用Famo.us？在现有的HTML结构中？

根据我的理解，可以在渲染中放入任何你想要的东西，但是如何适应多种屏幕尺寸？我是否应该开始在不同的＆＃34;断点大小的情况下构建我自己的表面库？（sm-surface md-surface lg-surface）并根据视口大小创建脚本包含？

Answer 1

在撰写本文时，我很惊讶你的问题是-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;
            };

我用它来创建我的renderControllers。它允许我为每个视图添加我想要的动画样式。它不是最终的全部，但它是一个快速的工具。然后在创建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();
                });

            };

要更改页面，菜单中的按钮表面点击输出一个emit事件：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是一个了不起的工具，我认为它会改变我们做事的方式。它还没有出现，但我认为这并不是让膝盖深入其中并且玩得开心，有点头发拉沮丧的理由。

这也不一定是我正在做的最好的方式。这些董事会上有比我更聪明的人，所以如果有更好的方法停止给他负面的问题和解释。

Editted：我工作的公司让我和另外两个开发人员使用famo.us制作应用程序/网站，并开始提供一些代码片段，解决了我们遇到的一些问题：https://github.com/vizidrix/famous。

如何使用Famo.us构建一个真实的应用程序？

1 个答案: