Framer教程（如何创建出色的交互式原型） _交互式

看看下面的示例原型。这些都是在Framer中完成的。学习完本教程后, 你将能够立即开始创建自己的令人惊叹的动画原型。

文章图片
最新版本的Framer具有一个很棒的新功能：设计模式。它使你几乎可以像在Sketch或Figma中一样进行工作。你可以创建矢量层, 导入图像或创建文本层并设置其样式。如果你想在没有任何第三方应用程序的情况下快速进行原型制作, 那么所有这些都变得非常方便。
让我们创建一个应用类型的设计：在本教程的第一部分中, 我们将为Framer原型准备一个游乐场。我们将创建一个应用程序类型的设计, 其中包含三种不同类型的图层：矢量, 图像和文本。

文章图片
步骤1：创建简单的按钮和背景。
要开始设计, 请选择第一个选项卡(即设计模式), 然后添加一个画板, 就像在Sketch中一样。在本教程中, 我们将使用iPhone 7原型, 因此我选择了此预设作为我的画板尺寸。我还添加了蓝色背景填充。
接下来, 选择矩形工具并以简单的圆形按钮形式创建形状。

文章图片
步骤2：添加一张带有图片的卡片。
添加图层的第二种方法是拖放功能。你可以从计算机中选择任何图像文件, 将其拖放到Framer中, 然后使用右侧的工具栏设置其样式。我使用了一个简单的插图并将其样式化为卡片。

文章图片
步骤3：添加应用标题。
Framer还允许你添加文本层。同样, 样式与任何图形软件基本相同。你可以选择字体, 大小, 对齐方式, 字母间距等。

文章图片
步骤4：告诉Framer哪些层是交互式的。
在开始我们的Framer原型之前, 我们还有另外一步。我们只需要告诉Framer哪些层将是交互式的即可。只需在图层面板中单击图层名称旁边的点。正确命名每个图层以备将来使用是很好的。我将图层卡和按钮命名为。

文章图片
步骤5(奖金)：定义全局颜色。
一个好的做法是为整个原型定义一些变量。你可以从一开始就设置要使用的调色板, 版式和基本尺寸。这有助于节省时间。
设置颜色时, 只需在代码编辑器中命名它们, 并在相应的” =” 符号后提供HEX, RGB或RGBa值。请记住, 将所有变量都保留在代码的最顶部。

# variables -------------------------------blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

文章图片
下面是简短的属性列表, 这些属性对于直接在代码中对齐和计算图层位置很有用。你可以进行必要的数学运算来计算图层位置。当你以后添加交互并且想要保持原型响应时, 这变得很有必要。

# This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0)# You can use also some variables width: Screen.width # current device width height: Screen.height # current device height# As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

现在, 你已经设置好了-让我们开始我们的项目。
我们创建了不同类型的Framer图层。现在我们的互动游乐场已准备就绪。

文章图片
我们将逐步创建此应用程序原型。
最后！无聊的部分已经结束。现在该进行一些交互设计了。
在此处下载整个原型：https://framer.cloud/QatjE
1.创建按钮反馈交互要设计任何交互, 我们需要一个触发器来使其实现。它几乎可以是任何东西：屏幕轻按, 动画结束, 图像加载结束或手机加速度计。
步骤1：创建互动事件。
我们将使其保持简单。让我们使用以下命令在点击按钮时创建按钮反馈：

文章图片

layerA.onTap (event, layer) ->

Framer只是为你编写了这一行代码。这意味着, 当你点击按钮层时, 将会发生某些事情。
步骤2：向事件添加动画。
让我们在触发后开始制作动画。为此, 请在图层面板中单击按钮图层旁边的点, 然后选择” 添加动画” 。添加动画时, Framer会跳到动画编辑模式。你可以缩放, 移动, 旋转或更改图层的任何参数：

文章图片
Framer中的动画编辑器
Framer增加了几行代码。 (不用担心, 你仍然可以使用” 动画” 面板编辑动画。)

button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115, 250, 121, 1)" options: time: 0.30 curve: Bezier.ease

恭喜你！你刚刚创建了第一次互动。目前, 它只能运行一次, 但我们会修复它。你只能触发一次动画的原因是, 动画结束后没有任何设置。在第一个动画结束后, 我们必须将所有参数重置为以前的样子。
步骤3：重设动画。
几乎和我们之前一样, 添加另一个事件。区别在于动画结束时我们正在寻找一个事件：

文章图片
Framer添加的这次时间代码如下所示：

button.onAnimationEnd (event, layer) ->

因此, 当按钮层上的动画完成时, 我们可以添加下一个动画来重置按钮层参数：

button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255, 255, 255, 1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

而已！点击按钮后, 我们现在有了工作反馈。

文章图片
Framer中的按钮反馈原型
2.为卡层交互创建不同的状态好的, 现在你知道如何设计动画并触发它了。通常, 你必须设计图层的不同状态。你可以通过仅更改一些参数(例如位置, 大小或不透明度)来设计同一层的多个状态。
步骤1：为卡片层添加和创建状态。
向卡添加状态的方法几乎与添加动画相同。你必须单击卡层旁边的点, 然后单击添加状态。现在, 你已进入状态编辑模式。根据你的喜好进行设计：

文章图片
请注意代码的缩进。它应该从第一行开始。
我为卡片层设计了两种不同的状态：

card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115, 250, 121, 1)"card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255, 255, 255, 1)"

步骤2：添加事件。
【Framer教程（如何创建出色的交互式原型）】使它正常工作仅需一步。我们必须创建一个事件来更改这些状态??。

button.onTap -> card.stateCycle()

这样做是每次执行动作时, 都会一层一层地更改所有状态。因此, 在本例中, 每次我们点击按钮层时, 我们都会更改为卡状态。如果你想创建更多状态并正确触发它们, 下面的代码段将为你提供更好的服务：

button.onTap -> card.stateSwitch("b")

当你要触发图层的特定状态时, 此片段非常有用。
我对原型所做的最后调整是更改动画速度和状态之间的曲线：

card.animationOptions = curve: Spring time: 0.8

文章图片
状态在iPhone原型上的交互
你可以使用事件做更多的事情, 但是在这一点上, 你将能够创建几乎任何基本的交互。它是我见过的写得最好的文档之一。
在Framer中加速工作：组件
现在是时候添加一些组件来加快你的工作了。要从现在开始充分利用本教程, 请下载以下原型：https://framer.cloud/WTySI
1.第一部分：滚动

文章图片
我对原型做了一些修改。现在我们有了一个列表, 但是它的高度高于屏幕分辨率。我们必须创建滚动才能看到原型中的整个列表。
第1步：创建图层并设置组件。

文章图片
首先, 创建一个高度大于屏幕高度的图层。将此层标记为交互式, 并命名为列表。然后跳转到代码模式。这次我们将不使用方便的左侧边栏。让我们将整个屏幕设置为可滚动：

scroll = new ScrollComponent width: Screen.width height: Screen.height

此代码使用当前设备的宽度和高度创建一个不可见区域。
第2步：告诉Framer你要滚动哪些层。
什么都没发生。我们必须告诉Framer哪些层应该可滚动。为此, 我们将列表层添加到滚动组件中：

list.parent = scroll.content

步骤3：锁定垂直滚动。
现在允许我们滚动, 但是它发生在各个方向。我们必须在垂直轴上锁定滚动：

scroll.scrollHorizontal = false

文章图片
滚动组件
哇！你仅用五行简单的代码在应用程序内部创建了一个滚动条。
2.页面组件：在屏幕之间滑动

文章图片
在页面组件中, Framer使你可以在屏幕之间滑动并自动将它们固定到位。
滑动屏幕是一种非常流行的交互方式。这里的想法与滚动组件非常相似。你可以在此处下载有效的原型：https：//framer.cloud/icddT
步骤1：设置组件。
首先, 我们必须在代码编辑器中创建一个” 盒子” , 神奇的地方将发生：

page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

此时, 你应该熟悉这里的所有代码。这只是组件及其区域的简单设置。现在, 我们必须创建一些图层以进行滑动。
步骤2：建立图层
我们将使用第一个原型设计并对其进行一些修改。这次我导入了两张图像, 而不是一张卡图像。
首先, 我们必须将画板扩大两倍。在画板属性面板中, 找到宽度并将其乘以2(或仅加* 2)。将卡彼此相邻放置, 并用蓝点将其激活, 并正确命名它们：card1和card2。

文章图片
步骤3：将图层添加到页面组件。
在代码编辑器的代码末尾, 我们必须添加：

card1.parent = page.content card2.parent = page.content

这意味着我们正在将这些层添加到组件中。

文章图片
页面组件-它使你可以在屏幕上水平和垂直滑动
页面组件现在可以使用了！
最后的话
就是这些, 伙计们！我希望你发现此Framer教程对使用市场上最强大的原型工具开始你的旅程很有用。另外, 你应该考虑加入Facebook上的Framer组：www.facebook.com/groups/framerjs。周围有一个庞大的社区, 这对于你入门时很有帮助。
如果你想深入了解Framer, 请尝试阅读Framer文档。
? ? ?
在srcmini设计博客上进一步阅读：