Framer教程 | 你可能不知道,Framer中藏着一把瑞士军刀

在Framer中有这么一个函数模块,它可以让你在代码中更方便地处理一些事情。它所包含的功能及其丰富,可以处理数值范围、设置延时、循环定时、检测设备等,可以说是Framer中的瑞士军刀。在前面的一些教程中我们已经用过了它的几个功能,比如延时方法delay,但我没有细说。这篇文章我将全面的介绍一下这个函数模块——Utilities。

Utilities

在Framer中使用它要用它的缩写:Utils,它包含了很多方法,我们可以使用“ · ”来调用。下面我就逐一介绍一下这些方法分别有什么作用。

1、Utils.modulate( value, [a, a], [b, b], limit )

它的作用是将一个数字在不同范围之间转换。当我们设计下拉刷新动效时,需要根据下拉的距离来让loading图标旋转一定的度数,就可以使用这个方法。

比如,下拉的距离我们限制在0到200,而对应loding图标的角度是0到360,当下拉距离是128的时候,loading应该转多少度呢?这时候就可以使用modulate方法来计算了,Utils.modulate( 128, [0, 200], [0, 360] )传回的值就是需要旋转的度数。我们可以通过一个小demo来了解它:

当我从左到右拖动滑块时,我想让上面的圆盘对应地从0旋转到180度。那么我就可以监测滑块组件传回的值(0到1)来同步计算圆盘需要旋转的度数,其代码如下。

除了前面三个参数,最后还有一个可选参数limit。通过它来设定超出时是否限定,默认是不限定的,所以在Utils.modulate( 250, [0, 200], [0, 360] )中虽然250超过了200,也会传回一个值,只是这个值比360要大。当然你可以把它改成true来规定不允许超出。

2、Utils.cycle( values )

这个方法可以逐个输出一个数组的每一项。第一次调用,就输出第一项,再调用一次就输出第二项,以此类推。

需要注意的是为了方便我们将它赋给了变量cycler(多了一个r),使用时不要写成cycler了。

3、Utils.labelLayer( layer, text )

这个方法可以快速给图层添加标签,并在图层中上下左右居中。

执行此代码之后的效果如下:

4、Utils.round( value, decimals, increments, min, max )

这是数字的四舍五入方法,它还可以根据你的要求保留小数点后多少位。value是需要进行操作的数字,decimals是需要保留的小数点的位数,increments是取舍精度,min和max是限定返回的范围,如果value小于这个范围内就返回min,大于这个范围就返回max。

所谓取舍精度,就是它会以你给的数值为最小精度来取舍。比如对于数字16.23,当increments为5时,返回的值就是最接近的能被5整除的数字15;当increments为4时,返回的值就是最接近的能被4整除的数字16。

5、Utils.randomChoice( values )

该方法会在数组中随机选取一项传回来,下面这段代码可能会返回a、b、c中的任一个。

6、Utils.randomColor( opacity )

随机产生一个颜色,opacity是透明度。

7、Utils.randomImage( layer or size )

随机生成一个高清壁纸分享网站unsplash上的图片链接。如果你传入图层layer或者尺寸size,它会对图片尺寸进行优化。

8、Utils.randomNumber( a, b )

生成一个a和b之间的随机数字。

9、Utils.frameInset( frame, inset )

该方法会帮你计算添加边框之后内嵌区域的相关数据。传入的两个参数中,第一个是父级的定位数据对象,包括起始坐标和宽高,这样就可以在屏幕中确定一个矩形区域了;第二个参数是内嵌框边框的数据,包括它上下左右四个方向的边距。如果传入的是一个数字,就代表上下左右有着相同的边距,就是这个数字,如果传入的是一个对象(包含top、left、right、bottom)则代表逐个定义它的四个方向的边距。


看到这里是不是都想睡觉了?那听我给你讲一个故事。以前呢,我喜欢上了一个女孩,但一直都是在心里默默喜欢不敢表白。后来在朋友的怂恿下,我准备在国庆节那天向她表白。为什么是国庆节这天呢?可能是我觉得需要冲喜吧。我约她晚上8点一起去橘子洲看烟花然后趁机表白。

10、Utils.delay( delay, handler )

假设现在是下午2点,那6个小时之后,我就要见她了。用代码表示的话就要用延时方法,也就是Utils.delay。

上面的代码意思就是说,6s(我等不了6小时来看演示效果了)之后输出“Would you like to be my girl friend ?”。和所有的爱情小说不太一样,她没有答应我,我觉得肯定是时间选错了。

11、Utils.interval( interval , handler )

但我是一个不服输的人啊!我当然不甘心,于是我决定每个周末都约她出来玩,多在一起培养培养感情。

上面的代码意思是说,每隔7s(我同样等不了7天看效果)就输出一次“Go out and play together?”。

这个方法果然奏效,我们的感情急剧升温,聊得也越来越多。

12、Utils.debounce( interval, handler )

后来呢,我们经常一起去自习。她背书的时候就让我帮忙提示她,规则是如果停顿超过1秒就提示她,否则就不提示。我是个很严谨的人,所以我把时间控制地很精确。我在她每次停顿的时候就开始计时,如果1秒钟到了她还没想起来我就提示她,在1秒以内她想了起来我就等待她下一次停顿的时候再次计时。

这段代码中呢,我没有算她背书的时间,只是将她停顿的时间连接起来。她第一次停顿时我立刻开始执行我的hint方法,但在第0.6秒时她就想了起来;在她第二次停顿时我再次开始计时,但她只停顿了0.4s;第三次时停顿了1.2秒,超过1秒,所以我就提示了她。这个过程我执行了三次hint,但是只在第三次输出了“Give you some tips!”。

debounce方法会如果在自己定义好的时间x秒以内被再次调用,就会重新计时;否则就会在调用之后的第x秒执行里面的内容,如此类推。

13、Utils.throttle( interval, handler )

时间过得很快,转眼夏天到了,暑假我们都回家了。在家那段时间我每时每刻都在想她,一想她我就想给她发消息,但是我不能一直给她发呀,我要控记我记几。

所以我就给自己写了上面的代码,固定每隔0.1天(代码中是0.1s)给她发一条消息。可是在中午午饭那一会,我就想了她1000次,这1000次每次都想给她发消息,但实际上我只给他发送了一条消息。

throttle方法就可以控制频率,当调用它的周期小于他既定的周期(上述代码是0.1s)时,就有很多次它不会执行里面的内容,而是按自己的周期去执行。所以上面的代码中它被调用了1000次,但实际上只输出了一次“I miss you~”。

14、Utils.insertCSS( css )

在前端代码中CSS是样式,可以通过它控制元素的外观。这个功能就提供了CSS(样式表)注入,它允许你自己定义一段CSS代码,添加到某个图层上。

如上述代码中,先给layerB添加了一个类biubiubiu,再定义了一段CSS代码,里面给biubiubiu添加了绿色背景和浅灰色投影的样式(注意在Framer中写CSS代码需要用"""将其包含起来),再通过insertCSS方法将这段样式注入,那么就可以看见layerB变成了绿色,而且有了投影。

15、设备判断:

下面这些代码都是对当前设备进行判断的。

isWebKit() 是否是webkit内核浏览器
isChrome() 是否是Chrome浏览器
isSafari() 是否是Safari浏览器
isTouch() 是否是可触摸设备
isDesktop() 是否是桌面浏览器
isPhone() 是否是手机设备
isTablet() 是否是平板设备
isMobile() 是否是移动设备(包含手机和平板)

Utilities所包含的功能非常多,但你不需要一次都记住。你可以现有一个大致的了解,在实践中慢慢使用并逐渐熟悉它。

你问最后我和那个女孩怎么样了?呵呵,她说她不喜欢机器人。

推荐阅读更多精彩内容