写给Framer新手：三步教你快速入门（1）

原文链接：https://blog.framer.com/new-to-framer-just-3-things-to-get-you-started-47397f27c71e 

Google、Facebook、Twitter、Dropbox等很多公司在设计阶段会制作可交互原型，不仅因为它可以弥补我们在设计过程中容易忽略的问题：时间，还有其它很多理由值得我们这样做。

在制作可交互原型的时候，有很多工具可供选择。如果你是程序员，或者熟练掌握任意一种编程语言，那么你选择的范围将会更广。但如果你只使用Photoshop或者Keynote这种所见即所得的工具，Framer将会成为你的一大神器！

我身边有很多设计师尝试过学习Framer，但都无疾而终。他们认为自己缺乏编程经验，所以很难学会。从某种程度上说，我可以理解这种心情。但我认为阻碍他们的不是编程经验，而是心态。其实学会Framer并不难，只不过因为它陌生，所以显得格外困难罢了。

Framer的出现可不是为了折磨我们，而是为了让设计变得更加容易。如果你刚刚开始学习Framer，或者曾经放弃过，那么这篇文章就是为你量身定制。接下来我会介绍三个法则，帮助你快速入门。

第一步：预备知识

在介绍这三个法则之前，我希望带大家了解一些编程语言的基本知识。Framer使用的语言是Coffeescript，它是一种简化版的JavaScript (JS)。我不敢说它很好学，但学了它一定很有用，因为JS是世界上应用最广泛的编程语言之一，所以了解这些知识在其它地方也会有所帮助。

接下来我将会介绍Coffescript的几个基本知识点，如果你对编程语言已经非常熟悉，可以直接跳过这个部分。

赋值

在编程语言中，“=”的意思不是相等，而是赋值。“=”右边的值将会被赋给左边，例如：

number = 12

执行这行操作后，“number”的值将会变成12。如果将其它值赋给“number”，比如令number=0.1，那么“number”的值将会变成0.1。

变量

在上面这个例子中，你可能会好奇“number”到底是什么——它被称作变量。在JS等大多数编程语言中，当使用一个变量之前，我们需要事先对它进行“声明”（比如var number = 12或者int number = 12）。但在使用Coffeescript编程时，你可以随时命名并使用一个新的变量。唯一需要注意的是，变量的名称不能以数字开头，比如“2nd”。

Coffeescript和其它编程语言还有一点不同，它的变量不需要被定义成某种固定的类型（比如整数，浮点数，字符串，数组，对象等等）。这意味着你可以随意对变量进行赋值，比如：

opacityValue = 1    #整数类型

scaleValue = 1.2    #浮点类型

howOld = "I am 12."    #字符串类型

点

如果你将Sketch文件导入Framer Studio，可以看到类似下面的一行代码。在稍后的章节中我将会详细介绍导入功能。

example = Framer.Importer.load("imported/example@2x")

你可以将这行代码中的“.”想象成连接符，它可以连接导入文件的名称"example"（即变量）以及你在Sketch中建立的任一图层。例如，你想指定上图中的“circles”这个图层，或改变它的属性，你可以这样写：

example.circles

这并不是一个完整的语句，运行它会引起错误。你应该使用“.”来指定属性，并进行相应的赋值。你可以认为在Framer中，每个图层的属性都可以通过“.”来指定，而且无需声明这一图层所在的层级，你可以直接指定任一级别的图层。例如：

example.circles.scale = 1.2

example.circle1.opacity = 0.5

example.circle1.rotation = 90

# 透明度opacity和旋转角度rotation是circle1这个图层的属性

# 你不需要按照Sketch中的嵌套关系指定图层，比如: example.circles.circle1

缩进

Coffescript不像JS之类的其它语言，使用大括号“{”和“}”来表现程序的结构，而是通过缩进来进行体现。每一个存在缩进的行都属于一个级别更高（缩进更少）的行。

function = ->

    layer.animate

        properties:

            opacity: 1

            rotation: 90

# layer.animate属于function，properties:属于layer.animate

好了，就这些！

当然，上面这些内容远远不够，你需要学习的还有很多。但我相信这些知识已经足够让你实现很多变换和动画效果了。接下来你将看到它们是如何实现的。

---

敬请期待：

写给Framer新手：三步教你快速入门（2）

写给Framer新手：三步教你快速入门（3）