我很满意"这里有各种各样的东西,现在去做一些东西"的方式,Famo.us已经出现了,但如果我想要如何设置我的项目,结构,模块等,我会很乐意.
为什么没有实际网页的演示,而不是单屏iPhone视图(甚至可能像Famo.us大学)？
是否可以在一般大小的DOM元素(如Web组件)中使用Famo.us？在现有的HTML结构中？
根据我的理解,可以在渲染中放入任何你想要的东西,但是如何适应多种屏幕尺寸？我是否应该开始以不同的"断点大小"(sm-surface md-surface lg-surface)构建我自己的曲面库,并根据视口大小创建脚本包含？
我写这篇文章的时候我很惊讶你的问题是-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是一个了不起的工具,我认为它会改变我们做事的方式.它还没有,但我认为这并不是让膝盖深入其中并且玩得开心并且有点头发拉沮丧的理由.
这也不一定是我正在做的最好的方式.这些板上有比我更聪明的人,所以如果有更好的方法停止给他负面的问题和解释.
编辑:我工作的公司有我和另外两个开发人员使用famo.us制作应用程序/网站,并开始提供一些代码片段,解决了我们遇到的一些问题:https://github.com/vizidrix /着名.