隨機效果是動效設計中較為常用的基本動效坛芽，本文將詳細介紹ProtoPie中的三種隨機函數(shù)的使用方式生年，并利用隨機函數(shù)進行隨機抽號案例的制作俱恶。

隨機效果

隨機效果

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

拓展--文本圖層隨機效果

拓展--縮放屬性隨機效果

ProtoPie的隨機函數(shù)

ProtoPie軟件可以在表達式中添加隨機函數(shù)來實現(xiàn)隨機效果蓝纲，軟件共提供了 3 種可以使用的隨機函數(shù)：

ProtoPie中的隨機函數(shù)

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

○ ?利用反復實現(xiàn)連續(xù)的隨機賦值

在隨機動效說明動圖中可以看到小球?qū)嶋H是在不斷的做隨機位置的移動驻龟，要是實現(xiàn)這樣的效果除了使用隨機函數(shù)外，還需要打開具體設置中反復開關缸匪，使其不斷進行位置的隨機移動翁狐。

利用反復的連續(xù)隨機賦值

○ ?關聯(lián)變量實現(xiàn)多屬性同樣的隨機變化

在縮放屬性隨機效果中，有圓形的隨機縮放效果凌蔬，如果分別對寬度和高度添加隨機函數(shù)露懒，無法實現(xiàn)高度寬度的同步隨機縮放，所以這里需要增加一個變量砂心，對變量賦值隨機函數(shù)后懈词，再將寬度和高度的縮放比例與變量進行關聯(lián)便可以實現(xiàn)等比縮放。同理當需要對多個基礎屬性的參數(shù)添加同樣隨機變化時辩诞，都可以使用添加關聯(lián)變量的方式來實現(xiàn)坎弯。

關聯(lián)變量實現(xiàn)多屬性同步隨機賦值

隨機抽號案例效果

案例實際效果

在了解隨機函數(shù)的使用方法后，可以結(jié)合實際案例來實操一下译暂。本次的案例是一個隨機抽號的效果抠忘，抽號機器中有0到9共10個數(shù)字小球，點擊抽號按鈕后外永，小球便隨機的在某一具體區(qū)域內(nèi)進行隨機的變化崎脉，直至生成一個具體的隨機數(shù)字小球，點擊再來一次可以重新進行數(shù)字抽取伯顶。

具體實現(xiàn)步驟

Step1

在Sketch中先繪制好隨機抽號機的基本視效囚灼，注意進行圖層整理骆膝，將抽號結(jié)果、抽號按鈕灶体、抽號機上層效果阅签、各個數(shù)字小球及整個機器底座成組并分層。導入ProtoPie中赃春，導入完成后注意將各個數(shù)字小球的錨點設置為圖層中心愉择。

基本視效界面

Step2

添加對抽號按鈕的點擊觸發(fā)劫乱，在觸發(fā)下先對1號小球添加對其旋轉(zhuǎn)织中、大小、位置的隨機變化衷戈，單次動效時長設置20ms左右狭吼，利用反復將隨機狀態(tài)的持續(xù)時長大約控制在1200ms左右，其中位置的隨機參數(shù)需要設置在抽號機的顯示窗口區(qū)域內(nèi)殖妇，而添加旋轉(zhuǎn)（-45°到45°隨機）和大械篌稀（95%到105%隨機）的細微隨機變化可以增加小球移動過程中的變化顯得更為真實。

快速隨機移動的旋轉(zhuǎn)谦趣、大小疲吸、移動設置

Step3

再對1號小球添加旋轉(zhuǎn)、大小前鹅、位置的隨機變化摘悴，這次延遲開始1200ms，使用150ms的動畫時長舰绘，同時不再勾選反復蹂喻，并將位置的隨機位置限制在抽號機的顯示窗口的底部區(qū)域，模擬抽號結(jié)束后小球下落到底部效果捂寿。

單個小球隨機移動及回落的旋轉(zhuǎn)口四、大小、移動設置

Step4

將對1號小球的設置復制到其他0-9號小球上秦陋，復制過程中可以調(diào)整一下高速移動過程中小球的持續(xù)時長可以在20ms到60ms中調(diào)節(jié)蔓彩，但過程持續(xù)時長保持在1200ms左右。同時回落的過程可以對持續(xù)時長及延遲開始時長添加一些隨機變化驳概。這樣做多個小球就不會出現(xiàn)類似同步移動的情況赤嚼，整體會顯得更為隨機。

Step5

在完成數(shù)字小球的隨機移動后抡句，需要將抽號結(jié)果在上層顯示出來探膊，注意由于整個抽號結(jié)果容器層在抽號器的上方所以需要開啟可觸碰低層級圖層的勾選項，使得抽號按鈕可以點擊待榔。其中對最終抽取數(shù)字的文本添加隨機函數(shù)?randomInt(0,?9)?逞壁，使其可以隨機顯示0到9中任意一個整數(shù)流济。

最終抽取數(shù)字的文本設置

Step6

最后在添加一些動效的細節(jié)，豐富整體效果腌闯。在點擊按鈕時绳瘟，可以添加下?lián)艉吞鹩|發(fā)，添加按鈕層本身的移動使其有真實的點擊效果姿骏。在抽號結(jié)果的停留頁面也可以添加數(shù)字小球的循環(huán)縮放以及背后光暈的旋轉(zhuǎn)效果以豐富界面糖声。

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

案例源文件下載&預覽

https://cloud.protopie.io/p/7870121946

本篇教程 作者：Annie