原文链接: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)
网友评论