Question

在较高的层面上，我们试图了解Framer渲染具有动态高度的图层的最佳方式。

我们将我们的设计从Sketch导入Framer。我们正在构建一个简单的问答页面。每个页面有1个问题，用户将完成20个问题，一个问题页面接一个。

这是设计的粗略版本：

页眉，页脚和提示符的高度始终相同。问答部分根据我们想要呈现的问题和答案而变化。

我们看到三种可能的解决方案：

创建20个不同的草图模板/卡片，每个模板/卡片代表不同问题的渲染（例如，card1将列出带有answers1的问题1）。当第一个问题得到解答时，我们渲染下一个草图卡片以显示带有答案2的问题2。为了清楚起见，我建议每张卡都包含所有内容：标题，问题，提示，答案和页脚。
有1个草图模板/卡片，它是标题，问题1，提示，答案1和页脚的完整呈现。有一堆迷你模板/卡层也被导入Framer。每个问题都有一个图层，每组答案都有一个图层。当Framer尝试加载问题2时，它将使用answers1（以及页眉，页脚等）加载question1的完整呈现，并将包含question1的图层与question2交换，并将包含answers1的图层与answers2交换。有一个问题，问题2比问题1小，所以现在问题和提示层之间有一个很大的空白区域。因此，以编程方式遍历Framer中的图层并使用align对齐它们。
有几个小图层（标题，问题1，问题2，...，问题20，提示，答案1，...，答案20，页脚）并使用Framer通过逐个添加每个图层来构建页面。还要编写CSS以匹配完美的设计像素。

问题：我们在＃2的问题是重新定位“所有层”的前期工作很多。据我们所知，Framer复制所有草图图层并根据它们的绝对位置（x和y坐标）定位它们。由于所有图层都是绝对定位的，因此必须通过每个图层并根据它们相对于彼此的定位方式重新对齐。这真的看起来很麻烦，据我们所知，Framer没有辅助功能来帮助实现这一目标。当然，我们可以编写一些通过父树工作的东西，并重新调整兄弟姐妹的位置，但这感觉太容易出错，而且不符合使用Framer构建原型的精神。

我们与＃3的问题是，这只是感觉就像构建网站一样，这不像是原型设计。因为我们不能直接导入像素完美的草图设计，所以有很多像素推动。我们希望在设计更改时快速更新原型。我们希望设计会经常更改，因为我们正在运行大量用户测试并获得很好的反馈。每次将设计更改为“重新设计”我的原型时，这种方法会让我花费大量时间。

思考？我们缺少明显的东西吗？感谢您的阅读和感谢您的时间。

Answer 1

I don't know how much chrome you have around the cards, and if you want to define the margin between the layers inside Sketch, but writing a function to align a list of layers with variable height on top of each other doesn't actually have to be that hard:

stackLayers = (layerList, startY = 0, spacing = 0) ->
    currentY = startY
    for layer in layerList
        layer.y = currentY
        currentY = layer.maxY + spacing

Full example here: http://share.framerjs.com/sztcm5e9l4li/

If you keep the names of your Sketch layers containing the cards the same, you can re-import from Sketch and the repositioning will keep working, even if the size changes.

Because the structural tree of groups in your Sketch file is contained inside Framer, you can place all the layers you want to stack on top of each other in one group and call stackLayers(sketch.nameOfGroup.children, 0, 10) to stack all children of 'nameOfGroup' on top of each other.

Answer 2

我们最终用方法＃2来解决这个问题。总结：交换图层并重新定位下面的所有图层，同时遍历所有父图层并根据需要调整大小（例如，如果新图层小于我们要交换的旧图层，我们需要缩小父图层差异）。

一般方法是：

使用TextLayer创建包含新问题文本的新图层
测量原始草图问题文本图层与新TextLayer
根据＃2
删除原始草图图层
将新TextLayer插入与原始草图图层相同的x和y坐标

代码要点：https://gist.github.com/MrNickBreen/5c2bed427feb8c701d5b6b1fbea11cb4

特别感谢Niels提出的帮助我解决这个问题的建议。

具有动态高度的FramerJS图层（从草图导入图层）

2 个答案: