隨機效果是動效設計中較為常用的基本動效，本文將詳細介紹ProtoPie中的三種隨機函數的使用方式，並利用隨機函數進行隨機抽號案例的製作。

隨機效果

隨機效果

日本設計師 Kazuki Akamine 按照常用運動圖形中提取出的基礎要素的特點，將所有基礎動效分為了 14 個系列，便於設計師運用和學習，這其中就包括隨機動效（腳本系動效）。隨機指每一幀的返回值都是隨機值的函數。將其使用在某一界面元素的位置屬性上，這樣每一幀對象都會移動到不同的地方，形成gif圖中非連續性的激烈運動。除了位置屬性，還可以應用在文本圖層上，或是結合縮放屬性實現多種多樣動效效果。

拓展–文本圖層隨機效果

拓展–縮放屬性隨機效果

ProtoPie的隨機函數

ProtoPie軟件可以在表達式中添加隨機函數來實現隨機效果，軟件共提供了 3 種可以使用的隨機函數：

ProtoPie中的隨機函數

具體使用可以在軟件中任何支持表達式添加的地方進行添加，實現對圖層具體屬性的隨機賦值，使用過程中我這邊在實際學習中有兩個使用技巧分享給大家：

（1）利用反覆實現連續的隨機賦值

在隨機動效說明動圖中可以看到小球實際是在不斷的做隨機位置的移動，要是實現這樣的效果除了使用隨機函數外，還需要打開具體設置中反覆開關，使其不斷進行位置的隨機移動。

利用反覆的連續隨機賦值

（2）關聯變量實現多屬性同樣的隨機變化

在縮放屬性隨機效果中，有圓形的隨機縮放效果，如果分別對寬度和高度添加隨機函數，無法實現高度寬度的同步隨機縮放，所以這裡需要增加一個變量，對變量賦值隨機函數後，再將寬度和高度的縮放比例與變量進行關聯便可以實現等比縮放。同理當需要對多個基礎屬性的參數添加同樣隨機變化時，都可以使用添加關聯變量的方式來實現。

關聯變量實現多屬性同步隨機賦值

隨機抽號案例效果

案例實際效果

在瞭解隨機函數的使用方法後，可以結合實際案例來實操一下。本次的案例是一個隨機抽號的效果，抽號機器中有0到9共10個數字小球，點擊抽號按鈕後，小球便隨機的在某一具體區域內進行隨機的變化，直至生成一個具體的隨機數字小球，點擊再來一次可以重新進行數字抽取。

具體實現步驟

Step1

在Sketch中先繪製好隨機抽號機的基本視效，註意進行圖層整理，將抽號結果、抽號按鈕、抽號機上層效果、各個數字小球及整個機器底座成組並分層。導入ProtoPie中，導入完成後註意將各個數字小球的錨點設置為圖層中心。

基本視效界面

Step2

添加對抽號按鈕的點擊觸發，在觸發下先對1號小球添加對其旋轉、大小、位置的隨機變化，單次動效時長設置20ms左右，利用反覆將隨機狀態的持續時長大約控制在1200ms左右，其中位置的隨機參數需要設置在抽號機的顯示窗口區域內，而添加旋轉（-45°到45°隨機）和大小（95%到105%隨機）的細微隨機變化可以增加小球移動過程中的變化顯得更為真實。

快速隨機移動的旋轉、大小、移動設置

Step3

再對1號小球添加旋轉、大小、位置的隨機變化，這次延遲開始1200ms，使用150ms的動畫時長，同時不再勾選反覆，並將位置的隨機位置限制在抽號機的顯示窗口的底部區域，模擬抽號結束後小球下落到底部效果。

單個小球隨機移動及回落的旋轉、大小、移動設置

Step4

將對1號小球的設置複製到其他0-9號小球上，複製過程中可以調整一下高速移動過程中小球的持續時長可以在20ms到60ms中調節，但過程持續時長保持在1200ms左右。同時回落的過程可以對持續時長及延遲開始時長添加一些隨機變化。這樣做多個小球就不會出現類似同步移動的情況，整體會顯得更為隨機。

Step5

在完成數字小球的隨機移動後，需要將抽號結果在上層顯示出來，註意由於整個抽號結果容器層在抽號器的上方所以需要開啟可觸碰低層級圖層的勾選項，使得抽號按鈕可以點擊。其中對最終抽取數字的文本添加隨機函數 randomInt(0, 9) ，使其可以隨機顯示0到9中任意一個整數。

最終抽取數字的文本設置

Step6

最後在添加一些動效的細節，豐富整體效果。在點擊按鈕時，可以添加下擊和抬起觸發，添加按鈕層本身的移動使其有真實的點擊效果。在抽號結果的停留頁面也可以添加數字小球的循環縮放以及背後光暈的旋轉效果以豐富界面。

大功告成後，你就可以在預覽窗中抽取自己的隨機數字了啦~~

案例預覽：https://cloud.protopie.io/p/7870121946

作者：Annie

本文由 @Annie 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議