在Framer中有這么一個(gè)函數(shù)模塊，它可以讓你在代碼中更方便地處理一些事情。它所包含的功能及其豐富，可以處理數(shù)值范圍、設(shè)置延時(shí)、循環(huán)定時(shí)、檢測設(shè)備等，可以說是Framer中的瑞士軍刀。在前面的一些教程中我們已經(jīng)用過了它的幾個(gè)功能，比如延時(shí)方法delay，但我沒有細(xì)說。這篇文章我將全面的介紹一下這個(gè)函數(shù)模塊——Utilities。
在Framer中使用它要用它的縮寫：Utils，它包含了很多方法，我們可以使用“ · ”來調(diào)用。下面我就逐一介紹一下這些方法分別有什么作用。
1、Utils.modulate( value, [a, a], [b, b], limit )
它的作用是將一個(gè)數(shù)字在不同范圍之間轉(zhuǎn)換。當(dāng)我們設(shè)計(jì)下拉刷新動效時(shí)，需要根據(jù)下拉的距離來讓loading圖標(biāo)旋轉(zhuǎn)一定的度數(shù)，就可以使用這個(gè)方法。
比如，下拉的距離我們限制在0到200，而對應(yīng)loding圖標(biāo)的角度是0到360，當(dāng)下拉距離是128的時(shí)候，loading應(yīng)該轉(zhuǎn)多少度呢？這時(shí)候就可以使用modulate方法來計(jì)算了，Utils.modulate( 128, [0, 200], [0, 360] )傳回的值就是需要旋轉(zhuǎn)的度數(shù)。我們可以通過一個(gè)小demo來了解它：
當(dāng)我從左到右拖動滑塊時(shí)，我想讓上面的圓盤對應(yīng)地從0旋轉(zhuǎn)到180度。那么我就可以監(jiān)測滑塊組件傳回的值（0到1）來同步計(jì)算圓盤需要旋轉(zhuǎn)的度數(shù)，其代碼如下。
除了前面三個(gè)參數(shù)，最后還有一個(gè)可選參數(shù)limit。通過它來設(shè)定超出時(shí)是否限定，默認(rèn)是不限定的，所以在Utils.modulate( 250, [0, 200], [0, 360] )中雖然250超過了200，也會傳回一個(gè)值，只是這個(gè)值比360要大。當(dāng)然你可以把它改成true來規(guī)定不允許超出。
2、Utils.cycle( values )
這個(gè)方法可以逐個(gè)輸出一個(gè)數(shù)組的每一項(xiàng)。第一次調(diào)用，就輸出第一項(xiàng)，再調(diào)用一次就輸出第二項(xiàng)，以此類推。
需要注意的是為了方便我們將它賦給了變量cycler（多了一個(gè)r），使用時(shí)不要寫成cycler了。
3、Utils.labelLayer( layer, text )
這個(gè)方法可以快速給圖層添加標(biāo)簽，并在圖層中上下左右居中。
執(zhí)行此代碼之后的效果如下：
4、Utils.round( value, decimals, increments, min, max )
這是數(shù)字的四舍五入方法，它還可以根據(jù)你的要求保留小數(shù)點(diǎn)后多少位。value是需要進(jìn)行操作的數(shù)字，decimals是需要保留的小數(shù)點(diǎn)的位數(shù)，increments是取舍精度，min和max是限定返回的范圍，如果value小于這個(gè)范圍內(nèi)就返回min，大于這個(gè)范圍就返回max。
所謂取舍精度，就是它會以你給的數(shù)值為最小精度來取舍。比如對于數(shù)字16.23，當(dāng)increments為5時(shí)，返回的值就是最接近的能被5整除的數(shù)字15；當(dāng)increments為4時(shí)，返回的值就是最接近的能被4整除的數(shù)字16。
5、Utils.randomChoice( values )
該方法會在數(shù)組中隨機(jī)選取一項(xiàng)傳回來，下面這段代碼可能會返回a、b、c中的任一個(gè)。
6、Utils.randomColor( opacity )
隨機(jī)產(chǎn)生一個(gè)顏色，opacity是透明度。
7、Utils.randomImage( layer or size )
隨機(jī)生成一個(gè)高清壁紙分享網(wǎng)站unsplash上的圖片鏈接。如果你傳入圖層layer或者尺寸size，它會對圖片尺寸進(jìn)行優(yōu)化。
8、Utils.randomNumber( a, b )
生成一個(gè)a和b之間的隨機(jī)數(shù)字。
9、Utils.frameInset( frame, inset )
該方法會幫你計(jì)算添加邊框之后內(nèi)嵌區(qū)域的相關(guān)數(shù)據(jù)。傳入的兩個(gè)參數(shù)中，第一個(gè)是父級的定位數(shù)據(jù)對象，包括起始坐標(biāo)和寬高，這樣就可以在屏幕中確定一個(gè)矩形區(qū)域了；第二個(gè)參數(shù)是內(nèi)嵌框邊框的數(shù)據(jù)，包括它上下左右四個(gè)方向的邊距。如果傳入的是一個(gè)數(shù)字，就代表上下左右有著相同的邊距，就是這個(gè)數(shù)字，如果傳入的是一個(gè)對象（包含top、left、right、bottom）則代表逐個(gè)定義它的四個(gè)方向的邊距。
看到這里是不是都想睡覺了？那聽我給你講一個(gè)故事。以前呢，我喜歡上了一個(gè)女孩，但一直都是在心里默默喜歡不敢表白。后來在朋友的慫恿下，我準(zhǔn)備在國慶節(jié)那天向她表白。為什么是國慶節(jié)這天呢？可能是我覺得需要沖喜吧。我約她晚上8點(diǎn)一起去橘子洲看煙花然后趁機(jī)表白。
10、Utils.delay( delay, handler )
假設(shè)現(xiàn)在是下午2點(diǎn)，那6個(gè)小時(shí)之后，我就要見她了。用代碼表示的話就要用延時(shí)方法，也就是Utils.delay。
上面的代碼意思就是說，6s（我等不了6小時(shí)來看演示效果了）之后輸出“Would you like to be my girl friend ？”。和所有的愛情小說不太一樣，她沒有答應(yīng)我，我覺得肯定是時(shí)間選錯(cuò)了。
11、Utils.interval( interval , handler )
但我是一個(gè)不服輸?shù)娜税。∥耶?dāng)然不甘心，于是我決定每個(gè)周末都約她出來玩，多在一起培養(yǎng)培養(yǎng)感情。
上面的代碼意思是說，每隔7s（我同樣等不了7天看效果）就輸出一次“Go out and play together？”。
這個(gè)方法果然奏效，我們的感情急劇升溫，聊得也越來越多。
12、Utils.debounce( interval, handler )
后來呢，我們經(jīng)常一起去自習(xí)。她背書的時(shí)候就讓我?guī)兔μ崾舅?guī)則是如果停頓超過1秒就提示她，否則就不提示。我是個(gè)很嚴(yán)謹(jǐn)?shù)娜?，所以我把時(shí)間控制地很精確。我在她每次停頓的時(shí)候就開始計(jì)時(shí)，如果1秒鐘到了她還沒想起來我就提示她，在1秒以內(nèi)她想了起來我就等待她下一次停頓的時(shí)候再次計(jì)時(shí)。
這段代碼中呢，我沒有算她背書的時(shí)間，只是將她停頓的時(shí)間連接起來。她第一次停頓時(shí)我立刻開始執(zhí)行我的hint方法，但在第0.6秒時(shí)她就想了起來；在她第二次停頓時(shí)我再次開始計(jì)時(shí)，但她只停頓了0.4s；第三次時(shí)停頓了1.2秒，超過1秒，所以我就提示了她。這個(gè)過程我執(zhí)行了三次hint，但是只在第三次輸出了“Give you some tips！”。
debounce方法會如果在自己定義好的時(shí)間x秒以內(nèi)被再次調(diào)用，就會重新計(jì)時(shí)；否則就會在調(diào)用之后的第x秒執(zhí)行里面的內(nèi)容，如此類推。
13、Utils.throttle( interval, handler )
時(shí)間過得很快，轉(zhuǎn)眼夏天到了，暑假我們都回家了。在家那段時(shí)間我每時(shí)每刻都在想她，一想她我就想給她發(fā)消息，但是我不能一直給她發(fā)呀，我要控記我記幾。
所以我就給自己寫了上面的代碼，固定每隔0.1天（代碼中是0.1s）給她發(fā)一條消息。可是在中午午飯那一會，我就想了她1000次，這1000次每次都想給她發(fā)消息，但實(shí)際上我只給他發(fā)送了一條消息。
throttle方法就可以控制頻率，當(dāng)調(diào)用它的周期小于他既定的周期（上述代碼是0.1s）時(shí)，就有很多次它不會執(zhí)行里面的內(nèi)容，而是按自己的周期去執(zhí)行。所以上面的代碼中它被調(diào)用了1000次，但實(shí)際上只輸出了一次“I miss you~”。
14、Utils.insertCSS( css )
在前端代碼中CSS是樣式，可以通過它控制元素的外觀。這個(gè)功能就提供了CSS（樣式表）注入，它允許你自己定義一段CSS代碼，添加到某個(gè)圖層上。
如上述代碼中，先給layerB添加了一個(gè)類biubiubiu，再定義了一段CSS代碼，里面給biubiubiu添加了綠色背景和淺灰色投影的樣式（注意在Framer中寫CSS代碼需要用"""將其包含起來），再通過insertCSS方法將這段樣式注入，那么就可以看見layerB變成了綠色，而且有了投影。
15、設(shè)備判斷：
下面這些代碼都是對當(dāng)前設(shè)備進(jìn)行判斷的。
isWebKit() 是否是webkit內(nèi)核瀏覽器
isChrome() 是否是Chrome瀏覽器
isSafari() 是否是Safari瀏覽器
isTouch() 是否是可觸摸設(shè)備
isDesktop() 是否是桌面瀏覽器
isPhone() 是否是手機(jī)設(shè)備
isTablet() 是否是平板設(shè)備
isMobile() 是否是移動設(shè)備（包含手機(jī)和平板）
Utilities所包含的功能非常多，但你不需要一次都記住。你可以現(xiàn)有一個(gè)大致的了解，在實(shí)踐中慢慢使用并逐漸熟悉它。
你問最后我和那個(gè)女孩怎么樣了？呵呵，她說她不喜歡機(jī)器人。
