美文网首页
写给Framer新手:三步教你快速入门(1)

写给Framer新手:三步教你快速入门(1)

作者: 王小黑666 | 来源:发表于2018-04-08 17:20 被阅读37次

    原文链接: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)

    相关文章

      网友评论

          本文标题:写给Framer新手:三步教你快速入门(1)

          本文链接:https://www.haomeiwen.com/subject/abvuaxtx.html