隨機(jī)效果是動效設(shè)計(jì)中較為常用的基本動效，本文將詳細(xì)介紹ProtoPie中的三種隨機(jī)函數(shù)的使用方式，并利用隨機(jī)函數(shù)進(jìn)行隨機(jī)抽號案例的制作。
隨機(jī)效果
日本設(shè)計(jì)師 Kazuki Akamine 按照常用運(yùn)動圖形中提取出的基礎(chǔ)要素的特點(diǎn)，將所有基礎(chǔ)動效分為了 14 個系列，便于設(shè)計(jì)師運(yùn)用和學(xué)習(xí)，這其中就包括隨機(jī)動效（腳本系動效）。隨機(jī)指每一幀的返回值都是隨機(jī)值的函數(shù)。將其使用在某一界面元素的位置屬性上，這樣每一幀對象都會移動到不同的地方，形成gif圖中非連續(xù)性的激烈運(yùn)動。除了位置屬性，還可以應(yīng)用在文本圖層上，或是結(jié)合縮放屬性實(shí)現(xiàn)多種多樣動效效果。
ProtoPie的隨機(jī)函數(shù)
ProtoPie軟件可以在表達(dá)式中添加隨機(jī)函數(shù)來實(shí)現(xiàn)隨機(jī)效果，軟件共提供了 3 種可以使用的隨機(jī)函數(shù)：
具體使用可以在軟件中任何支持表達(dá)式添加的地方進(jìn)行添加，實(shí)現(xiàn)對圖層具體屬性的隨機(jī)賦值，使用過程中我這邊在實(shí)際學(xué)習(xí)中有兩個使用技巧分享給大家：
○ ?利用反復(fù)實(shí)現(xiàn)連續(xù)的隨機(jī)賦值
在隨機(jī)動效說明動圖中可以看到小球?qū)嶋H是在不斷的做隨機(jī)位置的移動，要是實(shí)現(xiàn)這樣的效果除了使用隨機(jī)函數(shù)外，還需要打開具體設(shè)置中反復(fù)開關(guān)，使其不斷進(jìn)行位置的隨機(jī)移動。
○ ?關(guān)聯(lián)變量實(shí)現(xiàn)多屬性同樣的隨機(jī)變化
在縮放屬性隨機(jī)效果中，有圓形的隨機(jī)縮放效果，如果分別對寬度和高度添加隨機(jī)函數(shù)，無法實(shí)現(xiàn)高度寬度的同步隨機(jī)縮放，所以這里需要增加一個變量，對變量賦值隨機(jī)函數(shù)后，再將寬度和高度的縮放比例與變量進(jìn)行關(guān)聯(lián)便可以實(shí)現(xiàn)等比縮放。同理當(dāng)需要對多個基礎(chǔ)屬性的參數(shù)添加同樣隨機(jī)變化時，都可以使用添加關(guān)聯(lián)變量的方式來實(shí)現(xiàn)。
隨機(jī)抽號案例效果
在了解隨機(jī)函數(shù)的使用方法后，可以結(jié)合實(shí)際案例來實(shí)操一下。本次的案例是一個隨機(jī)抽號的效果，抽號機(jī)器中有0到9共10個數(shù)字小球，點(diǎn)擊抽號按鈕后，小球便隨機(jī)的在某一具體區(qū)域內(nèi)進(jìn)行隨機(jī)的變化，直至生成一個具體的隨機(jī)數(shù)字小球，點(diǎn)擊再來一次可以重新進(jìn)行數(shù)字抽取。
具體實(shí)現(xiàn)步驟
Step1
在Sketch中先繪制好隨機(jī)抽號機(jī)的基本視效，注意進(jìn)行圖層整理，將抽號結(jié)果、抽號按鈕、抽號機(jī)上層效果、各個數(shù)字小球及整個機(jī)器底座成組并分層。導(dǎo)入ProtoPie中，導(dǎo)入完成后注意將各個數(shù)字小球的錨點(diǎn)設(shè)置為圖層中心。
Step2
添加對抽號按鈕的點(diǎn)擊觸發(fā)，在觸發(fā)下先對1號小球添加對其旋轉(zhuǎn)、大小、位置的隨機(jī)變化，單次動效時長設(shè)置20ms左右，利用反復(fù)將隨機(jī)狀態(tài)的持續(xù)時長大約控制在1200ms左右，其中位置的隨機(jī)參數(shù)需要設(shè)置在抽號機(jī)的顯示窗口區(qū)域內(nèi)，而添加旋轉(zhuǎn)（-45°到45°隨機(jī)）和大?。?5%到105%隨機(jī)）的細(xì)微隨機(jī)變化可以增加小球移動過程中的變化顯得更為真實(shí)。
Step3
再對1號小球添加旋轉(zhuǎn)、大小、位置的隨機(jī)變化，這次延遲開始1200ms，使用150ms的動畫時長，同時不再勾選反復(fù)，并將位置的隨機(jī)位置限制在抽號機(jī)的顯示窗口的底部區(qū)域，模擬抽號結(jié)束后小球下落到底部效果。
Step4
將對1號小球的設(shè)置復(fù)制到其他0-9號小球上，復(fù)制過程中可以調(diào)整一下高速移動過程中小球的持續(xù)時長可以在20ms到60ms中調(diào)節(jié)，但過程持續(xù)時長保持在1200ms左右。同時回落的過程可以對持續(xù)時長及延遲開始時長添加一些隨機(jī)變化。這樣做多個小球就不會出現(xiàn)類似同步移動的情況，整體會顯得更為隨機(jī)。
Step5
在完成數(shù)字小球的隨機(jī)移動后，需要將抽號結(jié)果在上層顯示出來，注意由于整個抽號結(jié)果容器層在抽號器的上方所以需要開啟可觸碰低層級圖層的勾選項(xiàng)，使得抽號按鈕可以點(diǎn)擊。其中對最終抽取數(shù)字的文本添加隨機(jī)函數(shù)?randomInt(0,?9)?，使其可以隨機(jī)顯示0到9中任意一個整數(shù)。
Step6
最后在添加一些動效的細(xì)節(jié)，豐富整體效果。在點(diǎn)擊按鈕時，可以添加下?lián)艉吞鹩|發(fā)，添加按鈕層本身的移動使其有真實(shí)的點(diǎn)擊效果。在抽號結(jié)果的停留頁面也可以添加數(shù)字小球的循環(huán)縮放以及背后光暈的旋轉(zhuǎn)效果以豐富界面。
大功告成后，你就可以在預(yù)覽窗中抽取自己的隨機(jī)數(shù)字了啦~~
案例源文件下載&預(yù)覽
https://cloud.protopie.io/p/7870121946
本篇教程 作者：Annie
