具有动态高度的FramerJS层(从草图导入层)

Question

在高层次上，我们试图理解Framer呈现一个动态高度层的最佳方法。

我们从Sketch引进我们的设计到Framer。我们正在建立一个简单的问答页面。每页有一个问题，用户将处理20个问题，一个又一个问题页。

下面是这个设计的一个粗略版本：

​

页眉、页脚和提示始终是相同的高度。问答部分根据我们要呈现的问题和答案进行更改。

我们认为有三种可能的解决办法：

1. 创建20个不同的草图模板/卡片，每个模板/卡片代表一个不同问题的呈现(例如，card1将列出question1和answers1)。当第一个问题被回答时，我们呈现下一个草图卡，用answers2显示answers2。为了明确起见，我建议每一张卡片都包含所有内容:页眉、问题、提示、答案和页脚。
2. 有一个草图模板/卡片，这是头部，question1，提示符，answers1和页脚的完整呈现。有一堆迷你模板/卡片层，也被导入到Framer中。每个问题都有一层，每套答案都有一层。当Framer试图加载问题2时，它将使用question1 (以及页眉、页脚等)加载answers1的完整呈现，并将包含question1的层替换为question2，并将包含answers1的层替换为answers2。有一个问题，question2比question1小，所以在问题和提示层之间有一个很大的空白。因此，以编程方式在Framer中遍历这些层并使用对齐方法对齐它们。
3. 有几个小层(标头、question1、question2、…)、question20、提示符、answer1、.、answer20、页脚)，并使用Framer逐层添加页面。还编写CSS，以匹配设计像素完美。

问题:我们与#2的问题是，有大量的前期工作来重新定位“所有的层”。据我们所知，Framer复制了所有的草图层，并根据它们与x和y坐标的绝对位置来定位它们。因为所有的层都是绝对定位的，它必须通过每一层并重新应用对齐，这取决于它们是如何相互参照的。这看起来确实是排他性的，据我们所知，Framer中没有帮助实现这一目标的辅助功能。当然，我们可以编写一些通过父树工作的东西，并重新排列兄弟姐妹，但这感觉太容易出错，而且不符合用Framer构建原型的精神。

我们的问题是，第三，这只是感觉像建设网站，这不像原型。有很多像素推送，因为我们不能直接导入像素完美的草图设计。当设计发生变化时，我们想要快速更新原型。我们预计设计会经常改变，因为我们运行了大量的用户测试，并得到了很好的反馈。这种方法会让我花费大量的时间来搅动每一次设计改变为“重新设计”我的原型。

有什么想法？我们漏掉了什么明显的东西吗？谢谢你的阅读和感谢你的时间。

Answer 1

最后，我们用方法2解决了这个问题。总之:交换层并重新定位下面的所有层，还可以遍历所有父层并根据需要重新调整大小(例如，如果新层小于与我们交换的旧层，则需要通过差异缩小父层)。

总的做法是：

• 使用TextLayer创建具有新问题文本的新层
• 测量原始素描问题文本层与我们的新TextLayer之间的大小差异
• 根据#2中计算的差异调整父层的大小
• 删除原始草图层
• 在与原始草图层相同的x和y坐标中插入新的TextLayer

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

特别感谢尼尔斯的建议，它帮助我解决了这个问题。

Answer 2

我不知道你在卡片上有多少铬，如果你想要定义Sketch内部各层之间的边距，但是编写一个函数来对齐彼此之间可变高度的图层列表并不一定那么困难：

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

这里的完整示例：http://share.framerjs.com/sztcm5e9l4li/

如果您保持您的素描层的名称包含相同的卡，您可以重新导入从素描和重新定位将继续工作，即使大小改变。

因为Sketch文件中的组的结构树包含在Framer中，所以您可以将想要堆栈的所有层放在一个组中，并调用stackLayers(sketch.nameOfGroup.children, 0, 10)将'nameOfGroup‘的所有子层叠加在一起。