[ Framer教程 ]像上学写小说一样学习Framer编制程序

在此以前推送过局地Framer教程,但总以为缺了点什么。前天思想,直接教大家上手做是不对的。对于许多设计师来说编制程序依旧很神秘的事物,小编不可能不要揭下它潜在的面纱。

揭秘它的心腹面纱

要学习Framer,我们先要消除 “编程很难高智商才能玩得溜”的心理障碍。其实,就如写文章一样,编程也是通过一种语言去描述一些东西,你大能够把一段代码看成一篇小说。

以普通话写作类比,大家应用的言语是中文,那么使用Framer编制程序大家利用的是CoffeeScript(这一个技术宅取名时不是吃的正是喝的),它是前者脚本语言javascript的一种变形。

CoffeeScript介绍

最初始写作文,老师会告诉大家要根据一些平整,像首行缩进、陈述句以句号结尾、问句以问号结尾等等。在动用Framer编制程序时大家也要依照一些平整,比如选用空白缩进来表示代码块、以“#”开始的言语是注释等。那几个规则,你在行使的长河中会渐渐精晓。

现今有这么一段文字“在屏幕上画一个蓝色的圆形,当点击它时,它会逐渐变成绿色,同时会变成一个正方形”,大家要把它翻译成Framer能读懂的言语,要达成的功用如下:

最后效果

在早先此前,大家先驾驭一些概念和着力语法。

Framer和Sketch一样,都以以图层的款式来显现设计。与Sketch区别的是,每一个图层除了拥有尺寸、地方、背景观等体制属性以外,还有状态等质量。每一种图层能够是别的图层的父图层,也能够是其他图层的子图层,能够看做Sketch的分组。而动作效果的呈现,则是透过不一致境况之间的对接来达成,区别景观间发生变化的性质就会形成多少个补间动画。

在Framer的代码里面,有这么一些非正规的号子或词语须求小心,大家砍下边那段代码来比喻:

# Set background color
Screen.backgroundColor ="#333"
layerA.onClick(event, layer)->
    layerA.states.switch("stateB")

1、圆点:

意味着所属,能够翻译成“的”。

上述代码中Screen.backgroundColor翻译过来正是screen(荧屏)的背景象。须要专注的是,原点前面不仅能够跟属性值,还是能够跟二个操作,上述代码中的layerA.onClick翻译过来就是“点击图层A时”。

2、等号:

等号在此处代表赋值,就如数学里面包车型大巴x=1表示把1赋给了x。上述代码中Screen.backgroundColor=”#333”就把#333以此颜色给了显示器背景观,即把荧屏背景象设为#333。

3、井号:

井号表示注释,即是给代码做备忘。固然过了不短日子,再经过看注释也能明了那里的代码干了哪些。而系统是不会处理注释的,注释只是给人看的。

4、关键词:

所谓重点词,便是Framer中既定的片段关键作用的词,你在命名时无法采用。上述代码中,backgroundColor、onClick、states都是必不可缺词,在Framer编辑器中他们一般是浅绿灰的。随着学习深远,大家还会触发很多珍视词。

关键词

5、函数:

遥想一下数学中的函数:f(x,y)=x+y,f(x,y)接收参数x和y,总计x+y后赶回结果给f(x,y)。在Framer中等高校函授数的概念类似,接受1个或多个参数做拍卖后再次来到大概不回来。

一般要先定义函数,就足以到种种地方引用函数了,引用时能够流传分化的参数。

Framer的函数表明式一般这么定义:

sum=( a , b )->
    a + b

它就意味着函数sum接收四个参数a和b,总计a+b后回来结果。在引用函数时我们一贯写sum(2,3),那么sum(2,3)的值便是5。

6、对象:

归根结底说到程序员面对的巅峰难点——对象,在代码里对象是1个集合体,它能够涵盖部分特性和操作。在创造对象时,使用new关键词,比如创造3个女对象图层对象:

# Create my girlfriend
girlfriend =new  Layer
    name:"beauty"
    width:60
    height:170

她包蕴了一些性质:名字叫beauty,宽度是60,中度是170,当大家利用她的某3个属性时,只须要用小圆点就足以啦,比如他的身高便是girlfriend.height。

而且,她还蕴藏部分操作,比如girlfriend.centerX(12)表示让她站在显示屏大旨往右偏移12的职分(centerX(
)是Framer中定义好的操作,图层对象都有,具体能够查看文档)。

当今返重放大家的义务:在显示屏上画八个黄色的圆形,当点击它时,它会日渐成为青黄,同时会化为2个星型。

借使这么些圈子的半径是80,莲灰为”#14C4FF”,绿色为”#36E43C”,那咱们先画二个高粱红的圆形。

在Framer中图层暗中同意是矩形,所以大家得以先画一个星型,把它的圆角半径设为宽度的3/6就变成圆形了。用代码表示正是:

# Create layer
layerA =new  Layer
    width:160
    height:160
    x:240
    y:300
    backgroundColor:"#14C4FF"
    borderRadius:80

大家给它取名layerA,new
Layer就是新建二个图层,连起来正是新建多少个图层并把它赋给layerA。下边包车型大巴代码都以后缩进(按tab键缩进)了,它们表示layerA的本性。大家设置宽高为160,x、y是岗位,笔者任由设的,为了把它定在荧屏中心。背景象设为深湖蓝,圆角半径设为80,在右手就涌出了四个圆:

初阶状态:圆形

接下去,大家给它添加多个新的情况。

# Add states
layerA.states.add
    stateB:
        borderRadius:0
        backgroundColor:"#36E43C"

layerA.states.add表示给layerA的场馆添加贰个,取名为stateB,在该意况下,圆角半径是0,颜色是粉色,就如这么:

CoffeeScript,状态B:矩形

不过你看不到它变成圆柱形,因为暗中同意的景况正是始于创办时设置的圈子那么些地方。

接下去,我们即将给layerA添加二个点击事件,使它在被点击时从初阶状态变换来stateB。代码是那般的:

layerA.onClick(event, layer)->
    layerA.states.switch("stateB")

layerA所涵盖的操作onClick(event,layer),平素监听layerA是或不是被点击,当它被点击时就推行layerA.states.switch(“stateB”)的操作,即layerA的情况转换成stateB。

从那之后,大家就总体的将那句话翻译成Framer能够听懂的语言。你能够协调节和测试一试,写你的率先段代码。

对于CoffeeScript,笔者也在相连学习,以上如有错误,欢迎提出。借使有其余难题也欢迎在评论区留言。

源代码点那里:https://github.com/leadream/funny/blob/master/framer-primary/app.coffee