查看原文
其他

[ Framer教程 ]像学习写文章一样学习Framer编程

leadream codesigner 2022-07-13

李晋老师是民谣歌手中IT技术最好的

之前推送过一些Framer教程,但总觉得缺了点什么。今天想想,直接教大家上手做是不对的。对于很多设计师来说编程还是很神秘的东西,我必须要揭下它神秘的面纱。


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

以中文写作类比,我们使用的语言是中文,那么使用Framer编程我们使用的是CoffeeScript(这些技术宅取名时不是吃的就是喝的),它是前端脚本语言javascript的一种变形。

最开始写作文,老师会告诉我们要遵循一些规则,像首行缩进、陈述句以句号结尾、问句以问号结尾等等。在使用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中函数的概念类似,接受一个或多个参数做处理后返回或者不返回。

一般要先定义函数,就可以到各个地方引用函数了,引用时可以传入不同的参数。

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

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

它就表示函数sum接收两个参数a和b,计算a+b后返回结果。在引用函数时我们直接写sum(2,3),那么sum(2,3)的值就是5。

6、对象:

终于说到程序员面对的终极问题——对象,在代码里对象是一个集合体,它可以包含一些属性和操作。在创建对象时,使用new关键词,比如创建一个女朋友图层对象:

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

她包含了一些属性:名字叫beauty,宽度是60,高度是170,当我们使用她的某一个属性时,只需要用小圆点就可以啦,比如她的身高就是girlfriend.height。

同时,她还包含一些操作,比如girlfriend.centerX(12)表示让她站在屏幕中央往右偏移12的位置(centerX( )是Framer中定义好的操作,图层对象都有,具体可以查阅文档)。

现在回来看我们的任务:在屏幕上画一个蓝色的圆形,当点击它时,它会逐渐变成绿色,同时会变成一个正方形。

假设这个圆形的半径是80,蓝色为”#14C4FF”,绿色为”#36E43C”,那我们先画一个蓝色的圆形。

在Framer中图层默认是矩形,所以我们可以先画一个正方形,把它的圆角半径设为宽度的一半就变成圆形了。用代码表示就是:

# 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,颜色是绿色,就像这样:

不过你看不到它变成正方形,因为默认的状态就是开始创建时设置的圆形那个状态。

接下来,我们就要给layerA添加一个点击事件,使它在被点击时从初始状态变换到stateB。代码是这样的:

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

layerA所包含的操作onClick(event,layer),一直监听layerA是否被点击,当它被点击时就执行layerA.states.switch(“stateB”)的操作,即layerA的状态转换到stateB。

至此,我们就完整的将这句话翻译成Framer能够听懂的语言。你可以自己试一试,写你的第一段代码。

对于CoffeeScript,我也在不断学习,以上如有错误,欢迎指出。如果有任何问题也欢迎在留言区留言。

阅读原文有源代码

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存