ProtoPie进阶教程：随机函数的学习及应用

随机效果是动效设计中较为常用的基本动效，本文将详细介绍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协议