内容
设计原型背后的原因并不新鲜-与浏览器中所有有关设计的嗡嗡声相同。当您在实际环境中看到设计时，它便完全不同了。当您不必假设界面的功能和感觉时，您可以做出更好的决策。这听起来像是额外的工作，但是通过查看设计工作可以获得的见解是无价的。
Framer是一个新的基于代码的原型制作工具。您可以像通常一样在Sketch（或Photoshop）中创建模型，然后将其导入Framer。然后，编写一些CoffeeScript，您可以完成很多工作。
我将以iOS应用程序原型为例，教您使用Framer进行原型制作的基本知识，该示例具有两个视图：个人资料视图和用户头像图像的放大视图。我们将原型化展开后的照片视图如何打开和关闭，并对其进行动画处理。在此处查看在线演示（要查看源代码，只需单击左上角的图标）。您还需要Framer的免费试用版，您可以在framerjs.com上获得该试用版。
从草图导入
第一步是将图层从Sketch导入Framer。在Sketch中打开设计时，只需在Framer中单击“导入”按钮，然后在随后的对话框中选择正确的文件。成帧器将自动从每个图层导入图像，并通过如下代码使其可访问：
草图= Framer.Importer.load“已导入/配置文件”
使用该变量访问导入的图层。例如，要引用Sketch文件中名为“ content”的图层，您可以在Framer中键入sketch.content。
创建蒙版和头像层
该原型的核心功能是在点击头像时展开头像，然后在再次点击时关闭头像。首先，我们将创建两个蒙版图层-嵌套蒙版或另一个蒙版内部的蒙版。我们将同时对两个蒙版进行动画处理，以创建漂亮的，微妙的打开和关闭效果。展开后，headerMask图层会将头像照片裁剪为矩形，遮罩层会将其裁剪为个人资料视图上的小圆圈。
像这样创建headerMask层：
headerMask = new图层宽度：Screen.width，高度：800 backgroundColor：“透明”
代码的第一行创建并命名新层。然后，使用CoffeeScript的缩进语法，设置width，height和background属性。我们将使用透明背景，以便在展开头像照片时显示下面的图层。
接下来，创建遮罩层：
mask =新图层宽度：1000，高度：1000背景颜色：“透明”，边框半径：500 y：sketch.header.height-100 superLayer：headerMask比例尺：0.2，originY：0
我们创建一个新层并以相同的方式设置属性。大的borderRadius将此图层变成一个圆圈。我们放置遮罩层，使其与从Sketch导入的标头层重叠。我们还将缩小到20％，即0.2。 originY为零会将锚点或图像配准设置到顶部边缘。
剩下的属性superLayer将我们创建的headerMask图层设置为该新图层的父图层。这就是在Framer中进行遮罩的方式。只需设置superLayer属性，父层将对子层进行遮罩。
接下来，我们需要创建头像图形并将其放置在这些新蒙版中。要缩放裁剪边界并设置动画效果，我们将手动创建头像图层。将照片复制到项目文件夹的“图像”子文件夹中。然后使用该图像创建一个图层：
avatar =新的图层图像：“ images / avatar.png”宽度：mask.width，高度：mask.height superLayer：mask，force2d：true
注意，我们将化身的超级图层设置为遮罩层。两者现在都嵌套在headerMask中。我们还设置了宽度和高度，以使图像完全填满遮罩的区域。
最后，我们将创建一个变量来存储用于动画的蒙版的Y位置。由于它比屏幕大，因此我们将其水平居中。
定义状态
创建动画的第一步是定义开始和结束状态。在成帧器中，状态就像用代码写出的关键帧一样。状态只是属性的集合。每层都有一个默认状态。对于此原型，该默认值将用作动画的起点，因此我们只需要为每个图层设置第二个状态。
状态的语法非常简单。引用图层，使用layer.states.add（）方法，然后列出要包括的属性。
sketch.content.states.add（hide：{opacity：0}）headerMask.states.add（move：{y：120}）mask.states.add（grow：{比例尺：1.1，y：maskY-420}）
从Sketch导入并包含所有其他配置文件屏幕元素的内容层的第二状态应完全透明。这样，当化身展开时，我们将具有黑色背景，其余的导入图标和元素将显示出来。
第二行代码为headerMask创建一个状态，将状态简单地向下移动到120的Y位置。当化身照片放大时，这将使标题和关闭按钮显示在屏幕顶部。它还将为头像照片的裁剪边界设置动画。
最后，使用我们之前创建的maskY变量，遮罩层的新状态既可以按比例放大又可以向上移动。由于遮罩层的originY（或锚点）是其上边缘，因此我们需要将其向上移动420个像素，以便可见图像的中心。
在状态之间进行动画处理
为了在默认状态和我们刚刚创建的新状态之间建立动画，我们只需要再多四行代码即可。我们将在头像层上设置一个点击处理程序。当用户在个人资料屏幕上点击它时，我们将通过循环状态切换到展开的视图。再次点击时，我们将循环回到默认状态，以使其返回一个小圆圈。相同的代码行可处理两种交互：
avatar.on Events.Click，-> headerMask.states.next（）mask.states.next（）sketch.content.states.next（）
该块的第一行在头像层上设置点击处理程序。无论何时对其进行裁剪，无论其裁剪方式或大小如何，都将运行后面的语句。
然后，我们简单地引用每一层，并使用layer.states.next（）方法切换状态。当您使用layer.states.next（）时，成帧器将使用其内部默认动画设置。这非常方便，但是您可以通过精细化动画曲线来制作甚至更好的动画。
使用此处的状态时，可以使用layer.states.animationOptions属性轻松地分别更改每个动画曲线。只需进行三处细微调整，动画效果就会完全不同：
sketch.content.states.animationOptions =曲线：“ ease”，时间：0.3 headerMask.states.animationOptions =曲线：“ spring（150，20，0）” mask.states.animationOptions =曲线：“ spring（300，30， 0）“
对于逐渐淡入和淡出的内容层，我们将选择一个简单的曲线预设，缓和，并将动画持续时间设置为0.3，以使其非常快。
对于headerMask和mask层，请使用弹簧曲线。出于我们的目的，您只需要知道弹簧曲线值会更改动画的速度和弹跳。遮罩层的值将使其动画比headerMask和content快得多。有关弹簧曲线设置的更多详细信息，请参阅Framerjs.com/docs上的Framer文档。
在真实的移动设备上尝试
在真实的设备上看到设计要比使用仿真器有效得多，并且您会看到工作中的好处。 Framer包含一个镜像功能，这是一个内置服务器，可通过本地网络为您的原型提供URL。只需使用您的设备访问该URL。
您已经学到了在Framer中制作自己的设计原型所需的一切。你在等什么？
字：Jarrod Drysdale
Jarrod Drysdale是一位作家，设计顾问，数字产品制造商。本文最初发表于《网络》杂志的第270期。
喜欢这个吗？阅读这些！
- 在Sketch中创建可点击的实时原型
- 如何建立博客
- 最好的照片编辑器
